35 lines
No EOL
1.1 KiB
TypeScript
35 lines
No EOL
1.1 KiB
TypeScript
import { Navigate, useLocation } from 'react-router-dom';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
|
|
interface ProtectedRouteProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function ProtectedRoute({ children }: ProtectedRouteProps) {
|
|
const { isAuthenticated, isLoading } = useAuth();
|
|
const location = useLocation();
|
|
|
|
console.log('ProtectedRoute check:', {
|
|
isAuthenticated,
|
|
isLoading,
|
|
path: location.pathname
|
|
});
|
|
|
|
if (isLoading) {
|
|
// Show a loading spinner while authentication state is being determined
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
console.log('Not authenticated, redirecting to login');
|
|
// Redirect to the login page, but save the current location they were trying to access
|
|
return <Navigate to="/login" state={{ from: location.pathname }} replace />;
|
|
}
|
|
|
|
console.log('User is authenticated, showing protected content');
|
|
return <>{children}</>;
|
|
} |