feat: Prevent flash of unauthenticated content and premature redirects by checking for existing tokens in local storage.

src/app/(auth)/layout.tsx

@@ -2,7 +2,7 @@
 
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function AuthLayout({
   children,
@@ -11,6 +11,13 @@ export default function AuthLayout({
 }) {
   const { data: session, status } = useSession();
   const router = useRouter();
+  const [hasTokens, setHasTokens] = useState(false);
+
+  // Fast synchronous check for existing tokens on mount
+  // If tokens exist, the user is likely authenticated and will be redirected
+  useEffect(() => {
+    setHasTokens(!!localStorage.getItem('accessToken'));
+  }, []);
 
   useEffect(() => {
     if (status === 'loading') return;
@@ -26,7 +33,17 @@ export default function AuthLayout({
     }
   }, [session, status, router]);
 
-  // Show loading spinner while checking authentication
+  // If user has tokens in localStorage, they are likely authenticated
+  // Show a blank white screen to prevent flash of login page during redirect
+  if (hasTokens || session) {
+    return (
+      <div className="min-h-screen bg-white flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00293d]"></div>
+      </div>
+    );
+  }
+
+  // Show loading spinner while checking authentication (no tokens = genuinely unauthenticated)
   if (status === 'loading') {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc]">
@@ -42,23 +59,7 @@ export default function AuthLayout({
     );
   }
 
-  // Show loading while redirecting authenticated users
-  if (session) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc]">
-        <div className="text-center">
-          <img
-            src="/assets/logo.svg"
-            alt="RE-Quest"
-            className="h-8 mx-auto mb-4"
-          />
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00293d] mx-auto"></div>
-        </div>
-      </div>
-    );
-  }
-
-  // Only render auth pages for unauthenticated users
+  // Only render auth pages for unauthenticated users (no tokens, no session)
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
       <div className="w-full max-w-[510px]">

src/app/(user)/layout.tsx

@@ -2,7 +2,7 @@
 
 import { useSession } from 'next-auth/react';
 import { useRouter, usePathname } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Footer } from '@/components/layout/Footer';
 import { CommonHeader } from '@/components/layout/CommonHeader';
 import { PresenceProvider } from '@/components/providers/presence-provider';
@@ -27,10 +27,16 @@ export default function UserLayout({
   const { data: session, status } = useSession();
   const router = useRouter();
   const pathname = usePathname();
+  const [hasTokens, setHasTokens] = useState(false);
 
   const isDashboard = pathname === '/user/dashboard';
   const isPublic = isPublicPath(pathname);
 
+  // Fast check for existing tokens on mount
+  useEffect(() => {
+    setHasTokens(!!localStorage.getItem('accessToken'));
+  }, []);
+
   useEffect(() => {
     if (status === 'loading') return;
 
@@ -48,7 +54,12 @@ export default function UserLayout({
 
     // Protected pages require login
     if (!session) {
+      // Check localStorage - if tokens exist, session might still be resolving
+      // Don't redirect to /login prematurely (prevents login page flash)
+      const tokensExist = !!localStorage.getItem('accessToken');
+      if (!tokensExist) {
         router.replace('/login');
+      }
       return;
     }