diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js index 3a06cb6..481eba7 100644 --- a/src/components/Login/Login.js +++ b/src/components/Login/Login.js @@ -13,13 +13,23 @@ const Login = () => { const queryParams = new URLSearchParams(location.search); const returnUrl = queryParams.get('returnUrl') || '/verifier'; - console.log('Login component loaded, returnUrl =', returnUrl); + console.log('Login component loaded with returnUrl =', returnUrl); + // Handle redirection after successful authentication useEffect(() => { - // If already authenticated, redirect to returnUrl if (isAuthenticated) { - console.log('Already authenticated, redirecting from Login page to:', returnUrl); + console.log('Login page: User is authenticated, redirecting to:', returnUrl); + + // First try React Router navigation navigate(returnUrl, { replace: true }); + + // As a backup, also use direct redirection after a short delay + setTimeout(() => { + if (window.location.pathname !== returnUrl.split('?')[0]) { + console.log('Login page: Using fallback redirect to:', returnUrl); + window.location.href = returnUrl; + } + }, 200); } }, [isAuthenticated, navigate, returnUrl]); @@ -31,20 +41,22 @@ const Login = () => { event.preventDefault(); console.log(`Login attempt for handle: ${handle || 'default PDS'}, returnUrl: ${returnUrl}`); - // Call the login function from AuthContext - // The returnUrl is passed so the user can be redirected after successful login try { + // Store the returnUrl in localStorage as a backup + localStorage.setItem('auth_redirect_url', returnUrl); + + // Call the login function from AuthContext await login(handle || null, returnUrl); } catch (err) { console.error('Login error:', err); - // Error handling is done through the AuthContext error state } }; + // If already authenticated, show a message while redirecting if (isAuthenticated) { return (
-

Already logged in. Redirecting...

+

Already logged in. Redirecting to {returnUrl}...

); } diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx index 1cc1f6a..8029818 100644 --- a/src/components/ProtectedRoute.jsx +++ b/src/components/ProtectedRoute.jsx @@ -1,63 +1,41 @@ -import React, { useEffect, useState } from 'react'; -import { Navigate, useLocation, useNavigate } from 'react-router-dom'; +import React, { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; const ProtectedRoute = ({ children }) => { - const { isAuthenticated, loading, session } = useAuth(); + const { isAuthenticated, loading } = useAuth(); const location = useLocation(); - const navigate = useNavigate(); - const [shouldRender, setShouldRender] = useState(false); - const [redirectTriggered, setRedirectTriggered] = useState(false); - // Log initial state on mount + // Simple and direct redirect approach useEffect(() => { - console.log('ProtectedRoute mounted with auth state:', { - isAuthenticated, - loading, - hasDid: session?.did ? true : false, - path: location.pathname - }); - }, []); - - // Determine if we should redirect or render children - useEffect(() => { - // Only make decision after loading completes - if (!loading) { - if (isAuthenticated) { - console.log('ProtectedRoute: Authentication confirmed, will render protected content'); - setShouldRender(true); - } else { - // Only trigger redirect once to avoid infinite loops - if (!redirectTriggered) { - console.log('ProtectedRoute: Not authenticated, redirecting to login'); - setRedirectTriggered(true); - - // Prepare the redirect URL - const redirectUrl = `/login?returnUrl=${encodeURIComponent(location.pathname + location.search)}`; - - // Try React Router navigation first - navigate(redirectUrl, { replace: true }); - - // Fallback to direct redirection after a short delay - // This ensures redirection happens even if React Router navigation fails - setTimeout(() => { - if (window.location.pathname !== '/login') { - console.log('ProtectedRoute: Fallback to direct window location redirect'); - window.location.href = redirectUrl; - } - }, 100); - } - } + // Only check after loading is complete + if (loading) { + console.log('ProtectedRoute: Still loading auth status...'); + return; + } + + // If not authenticated, redirect directly via window.location + if (!isAuthenticated) { + console.log('ProtectedRoute: Not authenticated, redirecting to login...'); + const redirectUrl = `/login?returnUrl=${encodeURIComponent(location.pathname + location.search)}`; + window.location.href = redirectUrl; + } else { + console.log('ProtectedRoute: User is authenticated, rendering content'); } - }, [isAuthenticated, loading, navigate, location, redirectTriggered]); + }, [isAuthenticated, loading, location]); // Show loading state while checking auth if (loading) { return
Checking authentication status...
; } - // Render children only when explicitly set to do so - return shouldRender ? children :
Redirecting to login...
; + // Show redirecting state if not authenticated + if (!isAuthenticated) { + return
Redirecting to login...
; + } + + // User is authenticated, render children + return children; }; export default ProtectedRoute; \ No newline at end of file diff --git a/src/components/Verifier/Verifier.css b/src/components/Verifier/Verifier.css index 1eeea90..7cd28b6 100644 --- a/src/components/Verifier/Verifier.css +++ b/src/components/Verifier/Verifier.css @@ -304,6 +304,10 @@ margin-right: 5px; } +.verifier-network-results p { + margin: 0px; +} + /* Validity status indicators */ .verifier-validity-status { display: inline-block; @@ -388,9 +392,6 @@ .verifier-network-results { margin-top: 0px; } -.verifier-network-results .verifier-verifier-list { - margin-bottom: 15px; /* Space between lists */ -} .verifier-additional-context p { margin-top: 0px; diff --git a/src/components/Verifier/Verifier.js b/src/components/Verifier/Verifier.js index 01aae07..570788b 100644 --- a/src/components/Verifier/Verifier.js +++ b/src/components/Verifier/Verifier.js @@ -640,14 +640,14 @@ function Verifier() { inputRef.current?.focus(); }; + // Handle loading and error states if (isAuthLoading) return

Loading authentication...

; if (authError) return

Authentication Error: {authError}. Please login.

; - // Check authentication after all hooks are defined + // Simple auth check for debugging - this should never actually render if ProtectedRoute is working if (!session) { - console.log('Verifier: Not authenticated, waiting for ProtectedRoute redirection'); - // Show a brief loading message while ProtectedRoute handles redirection - return

Checking authentication status...

; + console.log('Verifier: Session missing, should be redirected by ProtectedRoute'); + return

You need to be logged in to use the Verifier. Redirecting...

; } const isAnyOperationInProgress = isVerifying || isRevoking || isLoadingVerifications || isLoadingNetwork || isCheckingValidity;