diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css index 7af342d..b709590 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/Navbar.css @@ -92,6 +92,11 @@ color: #3B9AF8; /* Change color on hover */ } +/* Add rule for dark mode nav links */ +.dark-mode .navbar-links ul li a { + color: #3b9af8; +} + /* Right Section: Actions */ .navbar-actions { display: flex; @@ -329,9 +334,15 @@ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } +/* Add rule for base color of dropdown links in dark mode */ +.dark-mode .dropdown-menu li a { + color: #e0e0e0; /* Light grey for readability */ +} + .dark-mode .dropdown-menu li a:hover { background-color: rgba(59, 154, 248, 0.2); - color: #66b2ff; + /* Update hover color to match main links */ + color: #3b9af8; } /* ---------------------------------- */ diff --git a/src/components/ProtectedRoute.js b/src/components/ProtectedRoute.js index 0359909..b7e4494 100644 --- a/src/components/ProtectedRoute.js +++ b/src/components/ProtectedRoute.js @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Navigate, useLocation } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; import { isAccountAllowed } from '../config/allowlist'; @@ -6,68 +6,18 @@ import Loading from './Loading/Loading'; // Component to protect routes that require authentication const ProtectedRoute = ({ children }) => { - const { isAuthenticated, loading, session, checkAuthStatus } = useAuth(); + const { isAuthenticated, loading, session } = useAuth(); const location = useLocation(); - const [redirecting, setRedirecting] = useState(false); - const [checkingStatus, setCheckingStatus] = useState(false); - const checkCount = useRef(0); - const maxChecks = 3; // Maximum number of checks to prevent infinite loops - - // Perform an immediate auth check when the component mounts - useEffect(() => { - const checkAuth = async () => { - if (checkCount.current >= maxChecks) { - console.error("Maximum auth check attempts reached. Stopping to prevent infinite loop."); - return; - } - - // Only proceed if not already checking, not already redirecting, and not loading - if (!isAuthenticated && !checkingStatus && !redirecting && !loading) { - try { - console.log("ProtectedRoute: Checking authentication status"); - setCheckingStatus(true); - checkCount.current += 1; - await checkAuthStatus(); - } catch (error) { - console.error("ProtectedRoute: Auth check failed:", error); - } finally { - setCheckingStatus(false); - } - } - }; - - // Call immediately on mount or when dependency values change - checkAuth(); - - // Set up interval for periodic checks only if authenticated - let interval; - if (isAuthenticated && session) { - console.log("ProtectedRoute: Setting up periodic auth checks"); - interval = setInterval(() => { - checkAuthStatus().catch(err => { - console.error("Error in periodic auth check:", err); - }); - }, 30000); // Check every 30 seconds - } - - return () => { - if (interval) { - console.log("ProtectedRoute: Clearing periodic auth checks"); - clearInterval(interval); - } - }; - }, [isAuthenticated, checkAuthStatus, redirecting, loading, checkingStatus, session]); - // Show loading state while authentication is being checked - if (loading || checkingStatus) { + // Show loading state while authentication context is initializing + if (loading) { return ; } - // If not authenticated, redirect to login with return URL - if (!isAuthenticated && !redirecting) { + // If not authenticated after loading, redirect to login + if (!isAuthenticated) { console.log("ProtectedRoute: Not authenticated, redirecting to login"); - setRedirecting(true); // Prevent multiple redirects - const returnUrl = encodeURIComponent(location.pathname); + const returnUrl = encodeURIComponent(location.pathname + location.search); // Include search params return ; } @@ -77,9 +27,6 @@ const ProtectedRoute = ({ children }) => { return ; } - // Reset counter when rendering the protected content - checkCount.current = 0; - // Render children if authenticated and allowed console.log("ProtectedRoute: Authentication successful, rendering protected content"); return children; diff --git a/src/components/Verifier/Verifier.js b/src/components/Verifier/Verifier.js index db0071e..74a99b4 100644 --- a/src/components/Verifier/Verifier.js +++ b/src/components/Verifier/Verifier.js @@ -569,26 +569,6 @@ function Verifier() { if (isAuthLoading) return

Loading authentication...

; if (authError) return

Authentication Error: {authError}. Please login.

; - // 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; return ( diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js index 4513b9f..2bec708 100644 --- a/src/contexts/AuthContext.js +++ b/src/contexts/AuthContext.js @@ -143,10 +143,13 @@ export const AuthProvider = ({ children }) => { // 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 + // REMOVED: This can cause unwanted flashing/reloads + /* if (!loading && window.location.pathname === '/verifier' && !session) { console.log('(AuthProvider) No session on protected page, forcing refresh'); window.location.reload(); } + */ }, [session, loading, error]); return (