fix: session refresh every render

app/dashboard/dashboard-client.tsx

@@ -34,7 +34,7 @@ const toActiveConnection = (session: ApiSession): ActiveConnection => {
     status: session.active ? "connected" : "error",
     protocol: (session.forwarding_type || "http").toLowerCase(),
     serverLabel: session.node || "Unknown node",
-    remote: session.slug ? `${session.slug}.tunnl.live` : session.node || "—",
+    remote: session.slug ? `${session.slug}.${session.node}` : session.node || "—",
     startedAgo,
     latencyMs: null,
     dataInOut: undefined,
@@ -86,26 +86,18 @@ export default function DashboardClient({ initialActiveConnections }: DashboardC
   const [activeConnections, setActiveConnections] = useState<ActiveConnection[]>(
     initialActiveConnections.map(toActiveConnection),
   )
-  const [session, setSession] = useState<SessionResponse["data"] | null>(null)
+  const { data: cachedSession } = authClient.useSession()
+  const [session, setSession] = useState<SessionResponse["data"] | null>(cachedSession ?? null)
 
   useEffect(() => {
     setActiveConnections(initialActiveConnections.map(toActiveConnection))
   }, [initialActiveConnections])
 
   useEffect(() => {
-    const fetchSession = async () => {
+    if (!session && cachedSession) {
-      try {
+      setSession(cachedSession)
-        const result = await authClient.getSession()
-        if (result.data) {
-          setSession(result.data)
-        }
-      } catch (error) {
-        console.error("Error fetching session", error)
-      }
     }
-
+  }, [cachedSession, session])
-    fetchSession()
-  }, [])
 
   const stopConnection = (id: string) => {
     setActiveConnections((prev) => prev.filter((conn) => conn.id !== id))

app/dashboard/page.tsx

@@ -3,10 +3,20 @@ import SiteFooter from "@/components/site-footer"
 import { auth } from "@/lib/auth"
 import { headers } from "next/headers"
 import DashboardClient from "./dashboard-client"
+import { redirect } from "next/navigation";
 
 export default async function DashboardPage() {
+  const requestHeaders = await headers()
+  const session = await auth.api.getSession({
+    headers: requestHeaders,
+  }).catch(() => {
+    redirect('/')
+  })
+
   const { token } = await auth.api.getToken({
-      headers: await headers(),
+    headers: requestHeaders,
+  }).catch(() => {
+    redirect('/')
   })
 
   const data = await fetch(`${process.env.API_URL}/api/sessions`, {
@@ -20,8 +30,10 @@ export default async function DashboardPage() {
 
   return (
     <div className="flex min-h-screen flex-col bg-gray-950 text-white">
-      <SiteHeader />
+      <SiteHeader session={session} />
-      <DashboardClient initialActiveConnections={initialActiveConnections} />
+      <DashboardClient
+        initialActiveConnections={initialActiveConnections}
+      />
       <SiteFooter />
     </div>
   )

app/page.tsx

@@ -5,7 +5,6 @@ import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from
 import SiteHeader from "@/components/site-header"
 import SiteFooter from "@/components/site-footer"
 import { authClient } from "@/lib/auth-client"
-import { useEffect } from "react"
 
 const defaultConfig: TunnelConfigType = {
   type: "http",
@@ -16,26 +15,10 @@ const defaultConfig: TunnelConfigType = {
 export default function Home() {
   const [selectedServer, setSelectedServer] = useState<Server | null>(null)
   const [tunnelConfig, setTunnelConfig] = useState<TunnelConfigType>(defaultConfig)
-  type SessionData = Awaited<ReturnType<typeof authClient.getSession>>;
+  const { data: session } = authClient.useSession()
-  const [logedin, setLogedin] = useState<SessionData | null>(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const result = await authClient.getSession()
-        if (result.data != null) {
-          setLogedin(result.data.user);
-        }
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
-
-    fetchData();
-  }, []);
   return (
     <div className="flex min-h-screen flex-col bg-gray-950 text-white">
-      <SiteHeader />
+      <SiteHeader session={session}/>
       <main className="flex-1 flex flex-col items-center justify-center px-4 py-8">
         <div className="w-full max-w-4xl mx-auto">
           <div className="text-center mb-12">
@@ -52,8 +35,8 @@ export default function Home() {
             onConfigChange={setTunnelConfig}
             selectedServer={selectedServer}
             onServerSelect={setSelectedServer}
-            isAuthenticated={logedin != null ? true : false}
+            isAuthenticated={Boolean(session)}
-            userId={logedin?.sshIdentifier}
+            userId={session?.user?.sshIdentifier}
           />
 
           <div className="max-w-3xl mx-auto">

app/settings/page.tsx

@@ -1,40 +1,36 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { authClient } from "@/lib/auth-client"
 import SiteHeader from "@/components/site-header"
 import SiteFooter from "@/components/site-footer"
 
 export default function SettingsPage() {
-  type SessionResponse = Awaited<ReturnType<typeof authClient.getSession>>
-  const [session, setSession] = useState<SessionResponse["data"] | null>(null)
   const [requireAuth, setRequireAuth] = useState(true)
   const [message, setMessage] = useState<string | null>(null)
+  const { data: session, isPending } = authClient.useSession();
+  const router = useRouter();
 
   useEffect(() => {
-    const loadSession = async () => {
+    if (!isPending && !session) {
-      try {
+      router.push('/login');
-        const result = await authClient.getSession()
-        if (result.data) {
-          setSession(result.data)
-        }
-      } catch (error) {
-        console.error("Failed to load session", error)
-      }
     }
+  }, [session, isPending, router]);
 
-    loadSession()
+  if (isPending) {
-  }, [])
+    return <div>Loading...</div>;
-
+  }
+  
   const handleToggle = (value: boolean) => {
     setRequireAuth(value)
     setMessage(value ? "Authentication required for tunnel requests" : "Authentication not required for tunnel requests")
     setTimeout(() => setMessage(null), 2500)
   }
 
-  return (
+  return session ? (
     <div className="flex min-h-screen flex-col bg-gray-950 text-white">
-      <SiteHeader />
+      <SiteHeader session={session} />
 
       <main className="flex-1">
         <div className="max-w-5xl mx-auto px-4 py-8 space-y-6">
@@ -80,5 +76,5 @@ export default function SettingsPage() {
       </main>
       <SiteFooter />
     </div>
-  )
+  ) : null;
 }

components/site-header.tsx

@@ -3,29 +3,16 @@
 import Link from "next/link"
 import TunnlLogo from "./tunnl-logo"
 import UserMenu from "./user-menu"
-import { useEffect, useState } from "react"
 import { authClient } from "@/lib/auth-client";
 import { redirect, RedirectType } from 'next/navigation'
 
-export default function SiteHeader() {
+type UseSessionReturn = ReturnType<typeof authClient.useSession>;
-    type SessionData = Awaited<ReturnType<typeof authClient.getSession>>;
+type SessionType = UseSessionReturn extends { data: infer D } ? D : never;
-    const [logedin, setLogedin] = useState<SessionData | null>(null)
+type SiteHeaderProps = {
-
+  session?: SessionType;
-    useEffect(() => {
+};
-        const fetchData = async () => {
-            try {
-                const result = await authClient.getSession()
-                if (result.data != null) {
-                    setLogedin(result.data.user);
-                }
-            } catch (error) {
-                console.error('Error fetching data:', error);
-            }
-        };
-
-        fetchData();
-    }, []);
 
+export default function SiteHeader({ session }: SiteHeaderProps) {
     const logout = async () => {
         await authClient.signOut({
             fetchOptions: {
@@ -47,12 +34,12 @@ export default function SiteHeader() {
                     </div>
                     
                     <div className="flex items-center gap-4">
-                        {logedin ? (
+                        {session ? (
                             <UserMenu
                                 user={{
-                                    name: logedin.name ?? "User",
+                                    name: session.user?.name ?? "User",
-                                    email: logedin.email ?? "",
+                                    email: session.user.email ?? "",
-                                    image: logedin.image ?? undefined,
+                                    image: session.user.image ?? undefined,
                                 }}
                                 onSignOut={logout}
                             />