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
Loading authentication...
; if (authError) returnAuthentication 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); - - 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; 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 (