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
Checking authentication status...
; + return
Checking authentication...
; } - - // Show redirecting state if not authenticated + if (!isAuthenticated) { - return
Redirecting to login...
; + return
Not authenticated - redirecting to login...
; } - // User is authenticated, render children return children; }; diff --git a/src/components/Verifier/Verifier.js b/src/components/Verifier/Verifier.js index 570788b..3dba40e 100644 --- a/src/components/Verifier/Verifier.js +++ b/src/components/Verifier/Verifier.js @@ -644,10 +644,24 @@ function Verifier() { if (isAuthLoading) return

Loading authentication...

; if (authError) return

Authentication 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'); - return

You 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); + + return

Authentication 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'); + return

Session invalid. Redirecting to login...

; } const isAnyOperationInProgress = isVerifying || isRevoking || isLoadingVerifications || isLoadingNetwork || isCheckingValidity; @@ -657,7 +671,10 @@ function Verifier() {

Bluesky Verifier Tool

- 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.

diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js index 76d5287..add9f30 100644 --- a/src/contexts/AuthContext.js +++ b/src/contexts/AuthContext.js @@ -139,6 +139,13 @@ export const AuthProvider = ({ children }) => { loading, hasError: !!error }); + + // Force a page refresh if session state changes and we're on a protected path + // This ensures the latest auth state is always used for route protection + if (!loading && window.location.pathname === '/verifier' && !session) { + console.log('(AuthProvider) No session on protected page, forcing refresh'); + window.location.reload(); + } }, [session, loading, error]); return (