diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx index d0cf22e..5f8b993 100644 --- a/src/app/(auth)/layout.tsx +++ b/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 ( +
+
+
+ ); + } + + // Show loading spinner while checking authentication (no tokens = genuinely unauthenticated) if (status === 'loading') { return (
@@ -42,23 +59,7 @@ export default function AuthLayout({ ); } - // Show loading while redirecting authenticated users - if (session) { - return ( -
-
- RE-Quest -
-
-
- ); - } - - // Only render auth pages for unauthenticated users + // Only render auth pages for unauthenticated users (no tokens, no session) return (
diff --git a/src/app/(user)/layout.tsx b/src/app/(user)/layout.tsx index 2d046da..349b8a8 100644 --- a/src/app/(user)/layout.tsx +++ b/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) { - router.replace('/login'); + // 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; }