Protected Routes Redirecting Unauthenticated Users Incorrectly

1. Route guard/middleware checks user state before it's loaded from session
2. Protected component renders before auth context is initialized
3. Missing dependency in useEffect that checks authentication
4. Router.push() called during render instead of in useEffect
5. Authentication check uses wrong variable or localStorage key

Create a ProtectedRoute wrapper component that checks auth status and displays loading state: if(!isLoaded) return

Use Next.js middleware.ts for route-level protection before components render

Ensure auth context is loaded before any route checks: const { user, isLoading } = useAuth(); if(isLoading) return null;