Refine session caching and auth middleware

Author: richiemcilroy

apps/api/src/auth.ts

@@ -21,6 +21,12 @@ function createAuth() {
       'https://sandchest.com',
       'https://*.sandchest.com',
     ],
+    session: {
+      cookieCache: {
+        enabled: true,
+        maxAge: 5 * 60, // 5 minutes — avoids DB read on every getSession()
+      },
+    },
     advanced: {
       crossSubDomainCookies: {
         enabled: true,

apps/web/src/app/login/page.tsx

@@ -1,12 +1,17 @@
 import type { Metadata } from 'next'
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/server-auth'
 import AuthLayout from '@/components/AuthLayout'
 import EmailForm from '@/components/auth/EmailForm'
 
 export const metadata: Metadata = {
   title: 'Log in — Sandchest',
 }
 
-export default function LoginPage() {
+export default async function LoginPage() {
+  const session = await getSession()
+  if (session) redirect('/dashboard')
+
   return (
     <AuthLayout>
       <EmailForm

apps/web/src/app/signup/page.tsx

@@ -1,12 +1,17 @@
 import type { Metadata } from 'next'
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/server-auth'
 import AuthLayout from '@/components/AuthLayout'
 import EmailForm from '@/components/auth/EmailForm'
 
 export const metadata: Metadata = {
   title: 'Sign up — Sandchest',
 }
 
-export default function SignupPage() {
+export default async function SignupPage() {
+  const session = await getSession()
+  if (session) redirect('/dashboard')
+
   return (
     <AuthLayout>
       <EmailForm

apps/web/src/components/DashboardSessionProvider.tsx

@@ -36,14 +36,42 @@ export default function DashboardSessionProvider({
   const router = useRouter()
 
   // Check session validity every 5 minutes — external system sync (valid useEffect)
+  // Pauses when tab is hidden to avoid unnecessary API+DB calls.
   useEffect(() => {
-    const interval = setInterval(async () => {
-      const { data } = await authClient.getSession()
-      if (!data) {
-        window.location.href = '/login'
+    let interval: ReturnType<typeof setInterval> | null = null
+
+    function startPolling() {
+      if (interval) return
+      interval = setInterval(async () => {
+        const { data } = await authClient.getSession()
+        if (!data) {
+          window.location.href = '/login'
+        }
+      }, 5 * 60 * 1000)
+    }
+
+    function stopPolling() {
+      if (interval) {
+        clearInterval(interval)
+        interval = null
+      }
+    }
+
+    function handleVisibilityChange() {
+      if (document.hidden) {
+        stopPolling()
+      } else {
+        startPolling()
       }
-    }, 5 * 60 * 1000)
-    return () => clearInterval(interval)
+    }
+
+    startPolling()
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    return () => {
+      stopPolling()
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
   }, [])
 
   return (

apps/web/src/lib/server-auth.ts

@@ -1,10 +1,14 @@
 import 'server-only'
 
+import { cache } from 'react'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001'
 
+const AUTH_COOKIE = 'better-auth.session_token'
+const SECURE_AUTH_COOKIE = '__Secure-better-auth.session_token'
+
 export interface ServerSession {
   session: {
     id: string
@@ -27,6 +31,11 @@ export interface ServerOrg {
   slug: string
 }
 
+async function hasSessionCookie(): Promise<boolean> {
+  const cookieStore = await cookies()
+  return cookieStore.has(AUTH_COOKIE) || cookieStore.has(SECURE_AUTH_COOKIE)
+}
+
 async function authFetch<T>(path: string, init?: RequestInit): Promise<T | null> {
   const cookieStore = await cookies()
   const cookieHeader = cookieStore
@@ -48,14 +57,16 @@ async function authFetch<T>(path: string, init?: RequestInit): Promise<T | null>
   return res.json() as Promise<T>
 }
 
-export async function getSession(): Promise<ServerSession | null> {
+export const getSession = cache(async (): Promise<ServerSession | null> => {
+  if (!(await hasSessionCookie())) return null
   return authFetch<ServerSession>('/api/auth/get-session')
-}
+})
 
-export async function getOrgs(): Promise<ServerOrg[]> {
+export const getOrgs = cache(async (): Promise<ServerOrg[]> => {
+  if (!(await hasSessionCookie())) return []
   const data = await authFetch<ServerOrg[]>('/api/auth/organization/list')
   return data ?? []
-}
+})
 
 async function setActiveOrgServer(organizationId: string): Promise<void> {
   await authFetch('/api/auth/organization/set-active', {

apps/web/src/middleware.test.ts

@@ -67,37 +67,18 @@ describe('auth middleware', () => {
   })
 
   describe('auth pages', () => {
-    test('redirects authenticated users from /login to /dashboard', () => {
-      const res = middleware(makeRequest('/login', SESSION_COOKIE))
-      expect(res.status).toBe(307)
-      expect(new URL(res.headers.get('location')!).pathname).toBe('/dashboard')
-    })
-
-    test('redirects authenticated users from /signup to /dashboard', () => {
-      const res = middleware(makeRequest('/signup', SESSION_COOKIE))
-      expect(res.status).toBe(307)
-      expect(new URL(res.headers.get('location')!).pathname).toBe('/dashboard')
-    })
-
-    test('redirects authenticated users from /verify to /dashboard', () => {
-      const res = middleware(makeRequest('/verify', SESSION_COOKIE))
-      expect(res.status).toBe(307)
-      expect(new URL(res.headers.get('location')!).pathname).toBe('/dashboard')
-    })
+    test('does not redirect from auth pages — pages handle their own auth logic', () => {
+      // Auth pages (/login, /signup, /verify) validate sessions server-side
+      // via getSession() instead of relying on cookie existence checks.
+      // This prevents redirect loops when cookies outlive sessions.
+      const loginRes = middleware(makeRequest('/login', SESSION_COOKIE))
+      expect(loginRes.status).toBe(200)
 
-    test('allows unauthenticated users to access /login', () => {
-      const res = middleware(makeRequest('/login'))
-      expect(res.status).toBe(200)
-    })
+      const signupRes = middleware(makeRequest('/signup', SESSION_COOKIE))
+      expect(signupRes.status).toBe(200)
 
-    test('allows unauthenticated users to access /signup', () => {
-      const res = middleware(makeRequest('/signup'))
-      expect(res.status).toBe(200)
-    })
-
-    test('allows unauthenticated users to access /verify', () => {
-      const res = middleware(makeRequest('/verify'))
-      expect(res.status).toBe(200)
+      const verifyRes = middleware(makeRequest('/verify', SESSION_COOKIE))
+      expect(verifyRes.status).toBe(200)
     })
   })
 
@@ -110,10 +91,10 @@ describe('auth middleware', () => {
       expect(config.matcher).toContain('/onboarding')
     })
 
-    test('includes auth pages', () => {
-      expect(config.matcher).toContain('/login')
-      expect(config.matcher).toContain('/signup')
-      expect(config.matcher).toContain('/verify')
+    test('does not include auth pages — they handle auth server-side', () => {
+      expect(config.matcher).not.toContain('/login')
+      expect(config.matcher).not.toContain('/signup')
+      expect(config.matcher).not.toContain('/verify')
     })
   })
 })

apps/web/src/middleware.ts

@@ -5,37 +5,29 @@ const AUTH_COOKIE = 'better-auth.session_token'
 const SECURE_AUTH_COOKIE = '__Secure-better-auth.session_token'
 
 const PROTECTED_PREFIXES = ['/dashboard', '/onboarding']
-const AUTH_PAGES = ['/login', '/signup', '/verify']
 
 function hasSessionCookie(request: NextRequest): boolean {
   return request.cookies.has(AUTH_COOKIE) || request.cookies.has(SECURE_AUTH_COOKIE)
 }
 
 export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl
-  const authenticated = hasSessionCookie(request)
 
   // Redirect unauthenticated users away from protected routes
   if (PROTECTED_PREFIXES.some((prefix) => pathname.startsWith(prefix))) {
-    if (!authenticated) {
+    if (!hasSessionCookie(request)) {
       const loginUrl = request.nextUrl.clone()
       loginUrl.pathname = '/login'
       return NextResponse.redirect(loginUrl)
     }
   }
 
-  // Redirect authenticated users away from auth pages
-  if (AUTH_PAGES.some((page) => pathname === page)) {
-    if (authenticated) {
-      const dashboardUrl = request.nextUrl.clone()
-      dashboardUrl.pathname = '/dashboard'
-      return NextResponse.redirect(dashboardUrl)
-    }
-  }
+  // Auth pages (/login, /signup, /verify) handle their own redirect logic
+  // server-side via getSession() to avoid loops when cookies outlive sessions.
 
   return NextResponse.next()
 }
 
 export const config = {
-  matcher: ['/dashboard/:path*', '/onboarding', '/login', '/signup', '/verify'],
+  matcher: ['/dashboard/:path*', '/onboarding'],
 }