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 (
-
-
-

-
-
-
- );
- }
-
- // 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;
}