Simplify ProtectedRoute to fix blank page issue
Removed hasChecked ref logic that was causing rendering issues. The key insight is that the effect should run when user changes, but only redirect if the condition doesn't match. ## Changes: - Remove hasCheckedRef complexity - Simplify effect to only redirect when conditions don't match - Split admin check into separate condition that only runs when user exists - This prevents unnecessary redirects while allowing normal rendering ## Root Cause: The hasChecked logic was preventing the component from rendering properly on navigation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useRef } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useAuth } from '@/hooks/useAuth';
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
import { Skeleton } from '@/components/ui/skeleton';
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
@@ -11,29 +11,22 @@ interface ProtectedRouteProps {
|
|||||||
export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRouteProps) {
|
export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRouteProps) {
|
||||||
const { user, loading: authLoading } = useAuth();
|
const { user, loading: authLoading } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const hasCheckedRef = useRef(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Only run effect once per component mount
|
if (!authLoading && !user) {
|
||||||
if (!authLoading && !hasCheckedRef.current) {
|
// Save current URL to redirect back after login
|
||||||
hasCheckedRef.current = true;
|
const currentPath = window.location.pathname + window.location.search;
|
||||||
|
sessionStorage.setItem('redirectAfterLogin', currentPath);
|
||||||
|
navigate('/auth');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!user) {
|
// Check for admin role if required (only after user is loaded)
|
||||||
// Save current URL to redirect back after login
|
if (!authLoading && user && requireAdmin) {
|
||||||
const currentPath = window.location.pathname + window.location.search;
|
const userRole = user.user_metadata?.role;
|
||||||
sessionStorage.setItem('redirectAfterLogin', currentPath);
|
if (userRole !== 'admin') {
|
||||||
navigate('/auth');
|
// Redirect non-admin users to member dashboard
|
||||||
return;
|
navigate('/dashboard');
|
||||||
}
|
|
||||||
|
|
||||||
// Check for admin role if required
|
|
||||||
if (requireAdmin) {
|
|
||||||
const userRole = user.user_metadata?.role;
|
|
||||||
if (userRole !== 'admin') {
|
|
||||||
// Redirect non-admin users to member dashboard
|
|
||||||
navigate('/dashboard');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [user, authLoading, navigate, requireAdmin]);
|
}, [user, authLoading, navigate, requireAdmin]);
|
||||||
|
|||||||
Reference in New Issue
Block a user