diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js index 481eba7..dd47925 100644 --- a/src/components/Login/Login.js +++ b/src/components/Login/Login.js @@ -13,25 +13,30 @@ const Login = () => { const queryParams = new URLSearchParams(location.search); const returnUrl = queryParams.get('returnUrl') || '/verifier'; - console.log('Login component loaded with returnUrl =', returnUrl); + console.log('Login component: returnUrl =', returnUrl); + + // Log auth status to debug + useEffect(() => { + console.log('Login component auth status:', { + isAuthenticated, + loading, + hasError: !!error, + returnUrl + }); + }, [isAuthenticated, loading, error, returnUrl]); // Handle redirection after successful authentication useEffect(() => { if (isAuthenticated) { - console.log('Login page: User is authenticated, redirecting to:', returnUrl); - - // First try React Router navigation - navigate(returnUrl, { replace: true }); + console.log('Login: User is authenticated, redirecting to', returnUrl); - // As a backup, also use direct redirection after a short delay + // Set a short delay to ensure state updates complete setTimeout(() => { - if (window.location.pathname !== returnUrl.split('?')[0]) { - console.log('Login page: Using fallback redirect to:', returnUrl); - window.location.href = returnUrl; - } - }, 200); + console.log('Login: Executing redirect to', returnUrl); + window.location.replace(returnUrl); + }, 100); } - }, [isAuthenticated, navigate, returnUrl]); + }, [isAuthenticated, returnUrl]); const handleInputChange = (event) => { setHandle(event.target.value); diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx index 8029818..01b1267 100644 --- a/src/components/ProtectedRoute.jsx +++ b/src/components/ProtectedRoute.jsx @@ -6,35 +6,35 @@ const ProtectedRoute = ({ children }) => { const { isAuthenticated, loading } = useAuth(); const location = useLocation(); - // Simple and direct redirect approach + // Use a side effect to check authentication and redirect if needed useEffect(() => { - // Only check after loading is complete + // If we're still loading, wait if (loading) { - console.log('ProtectedRoute: Still loading auth status...'); + console.log('ProtectedRoute: Waiting for auth to complete...'); return; } - // If not authenticated, redirect directly via window.location + // If not authenticated, redirect immediately if (!isAuthenticated) { - console.log('ProtectedRoute: Not authenticated, redirecting to login...'); + console.log('ProtectedRoute: Not authenticated, forcing redirect to login...'); const redirectUrl = `/login?returnUrl=${encodeURIComponent(location.pathname + location.search)}`; - window.location.href = redirectUrl; + + // Force redirect - this is the simplest, most reliable approach + window.location.replace(redirectUrl); } else { - console.log('ProtectedRoute: User is authenticated, rendering content'); + console.log('ProtectedRoute: User is authenticated, allowing access'); } - }, [isAuthenticated, loading, location]); + }, [isAuthenticated, loading, location.pathname, location.search]); - // Show loading state while checking auth + // Keep the component simple - only render children if authenticated if (loading) { - return
Loading authentication...
; if (authError) returnAuthentication Error: {authError}. Please login.
; - // Simple auth check for debugging - this should never actually render if ProtectedRoute is working - if (!session) { - console.log('Verifier: Session missing, should be redirected by ProtectedRoute'); - returnYou need to be logged in to use the Verifier. Redirecting...
; + // Direct redirect for unauthenticated users as a backup + if (!isAuthenticated) { + console.log('Verifier: Detected unauthenticated user, forcing redirect'); + + // Force redirect as an additional failsafe + setTimeout(() => { + const redirectUrl = `/login?returnUrl=${encodeURIComponent(window.location.pathname)}`; + window.location.replace(redirectUrl); + }, 100); + + returnAuthentication required. Redirecting to login...
; + } + + // Verify we have a valid session + if (!session || !session.did) { + console.log('Verifier: Session invalid, forcing redirect'); + window.location.replace('/login'); + returnSession invalid. Redirecting to login...
; } const isAnyOperationInProgress = isVerifying || isRevoking || isLoadingVerifications || isLoadingNetwork || isCheckingValidity; @@ -657,7 +671,10 @@ function Verifier() {- With Bluesky's new decentralized verification system, anyone can verify anyone else and any Bluesky client can choose which accounts to treat as "Trusted Verifiers". Try verifying an account for yourself or check to see who has verified you! It's as simple as creating a verification record in your PDS that points to the account you want to verify. + With Bluesky's new decentralized verification system, anyone can verify anyone else and any Bluesky client can choose which accounts to treat as "Trusted Verifiers". +
++ Try verifying an account for yourself or check to see who has verified you! It's as simple as creating a verification record in your PDS that points to the account you want to verify.