diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx index 5cfbd29..922f1aa 100644 --- a/src/components/ProtectedRoute.tsx +++ b/src/components/ProtectedRoute.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useAuth } from '@/hooks/useAuth'; import { Skeleton } from '@/components/ui/skeleton'; @@ -11,9 +11,13 @@ interface ProtectedRouteProps { export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRouteProps) { const { user, loading: authLoading } = useAuth(); const navigate = useNavigate(); + const [hasChecked, setHasChecked] = useState(false); useEffect(() => { - if (!authLoading) { + // Only run effect once after auth loading completes + if (!authLoading && !hasChecked) { + setHasChecked(true); + if (!user) { // Save current URL to redirect back after login const currentPath = window.location.pathname + window.location.search; @@ -32,10 +36,10 @@ export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRout } } } - }, [user, authLoading, navigate, requireAdmin]); + }, [user, authLoading, navigate, requireAdmin, hasChecked]); // Show loading skeleton while checking auth - if (authLoading) { + if (authLoading || !hasChecked) { return (