This repository has no description
fix flash
author
damedotblog
date
(Apr 22, 2025, 4:34 PM -0400)
commit
d4ff50c1
d4ff50c1c2a527964cb913b846eccadfe6a90512
parent
18cfbcad
18cfbcade75c61d45d802fc595b7f9dd46b94834
+22
-81
+7
-60
src/components/ProtectedRoute.js
+7
-60
src/components/ProtectedRoute.js
···
1
-
import React, { useEffect, useRef, useState } from 'react';
1
+
import React, { useEffect, useState } from 'react';
2
2
import { Navigate, useLocation } from 'react-router-dom';
3
3
import { useAuth } from '../contexts/AuthContext';
4
4
import { isAccountAllowed } from '../config/allowlist';
···
6
6
7
7
// Component to protect routes that require authentication
8
8
const ProtectedRoute = ({ children }) => {
9
-
const { isAuthenticated, loading, session, checkAuthStatus } = useAuth();
9
+
const { isAuthenticated, loading, session } = useAuth();
10
10
const location = useLocation();
11
-
const [redirecting, setRedirecting] = useState(false);
12
-
const [checkingStatus, setCheckingStatus] = useState(false);
13
-
const checkCount = useRef(0);
14
-
const maxChecks = 3; // Maximum number of checks to prevent infinite loops
15
-
16
-
// Perform an immediate auth check when the component mounts
17
-
useEffect(() => {
18
-
const checkAuth = async () => {
19
-
if (checkCount.current >= maxChecks) {
20
-
console.error("Maximum auth check attempts reached. Stopping to prevent infinite loop.");
21
-
return;
22
-
}
23
-
24
-
// Only proceed if not already checking, not already redirecting, and not loading
25
-
if (!isAuthenticated && !checkingStatus && !redirecting && !loading) {
26
-
try {
27
-
console.log("ProtectedRoute: Checking authentication status");
28
-
setCheckingStatus(true);
29
-
checkCount.current += 1;
30
-
await checkAuthStatus();
31
-
} catch (error) {
32
-
console.error("ProtectedRoute: Auth check failed:", error);
33
-
} finally {
34
-
setCheckingStatus(false);
35
-
}
36
-
}
37
-
};
38
-
39
-
// Call immediately on mount or when dependency values change
40
-
checkAuth();
41
-
42
-
// Set up interval for periodic checks only if authenticated
43
-
let interval;
44
-
if (isAuthenticated && session) {
45
-
console.log("ProtectedRoute: Setting up periodic auth checks");
46
-
interval = setInterval(() => {
47
-
checkAuthStatus().catch(err => {
48
-
console.error("Error in periodic auth check:", err);
49
-
});
50
-
}, 30000); // Check every 30 seconds
51
-
}
52
-
53
-
return () => {
54
-
if (interval) {
55
-
console.log("ProtectedRoute: Clearing periodic auth checks");
56
-
clearInterval(interval);
57
-
}
58
-
};
59
-
}, [isAuthenticated, checkAuthStatus, redirecting, loading, checkingStatus, session]);
60
11
61
-
// Show loading state while authentication is being checked
62
-
if (loading || checkingStatus) {
12
+
// Show loading state while authentication context is initializing
13
+
if (loading) {
63
14
return <Loading message="Checking authentication..." />;
64
15
}
65
16
66
-
// If not authenticated, redirect to login with return URL
67
-
if (!isAuthenticated && !redirecting) {
17
+
// If not authenticated after loading, redirect to login
18
+
if (!isAuthenticated) {
68
19
console.log("ProtectedRoute: Not authenticated, redirecting to login");
69
-
setRedirecting(true); // Prevent multiple redirects
70
-
const returnUrl = encodeURIComponent(location.pathname);
20
+
const returnUrl = encodeURIComponent(location.pathname + location.search); // Include search params
71
21
return <Navigate to={`/login?returnUrl=${returnUrl}`} replace />;
72
22
}
73
23
···
77
27
return <Navigate to="/supporter" replace />;
78
28
}
79
29
80
-
// Reset counter when rendering the protected content
81
-
checkCount.current = 0;
82
-
83
30
// Render children if authenticated and allowed
84
31
console.log("ProtectedRoute: Authentication successful, rendering protected content");
85
32
return children;
-20
src/components/Verifier/Verifier.js
-20
src/components/Verifier/Verifier.js
···
569
569
if (isAuthLoading) return <p>Loading authentication...</p>;
570
570
if (authError) return <p>Authentication Error: {authError}. <a href="/login">Please login</a>.</p>;
571
571
572
-
// Direct redirect for unauthenticated users as a backup
573
-
if (!isAuthenticated) {
574
-
console.log('Verifier: Detected unauthenticated user, forcing redirect');
575
-
576
-
// Force redirect as an additional failsafe
577
-
setTimeout(() => {
578
-
const redirectUrl = `/login?returnUrl=${encodeURIComponent(window.location.pathname)}`;
579
-
window.location.replace(redirectUrl);
580
-
}, 100);
581
-
582
-
return <p>Authentication required. Redirecting to login...</p>;
583
-
}
584
-
585
-
// Verify we have a valid session
586
-
if (!session || !session.did) {
587
-
console.log('Verifier: Session invalid, forcing redirect');
588
-
window.location.replace('/login');
589
-
return <p>Session invalid. Redirecting to login...</p>;
590
-
}
591
-
592
572
const isAnyOperationInProgress = isVerifying || isRevoking || isLoadingVerifications || isLoadingNetwork || isCheckingValidity;
593
573
594
574
return (
+3
src/contexts/AuthContext.js
+3
src/contexts/AuthContext.js
···
143
143
144
144
// Force a page refresh if session state changes and we're on a protected path
145
145
// This ensures the latest auth state is always used for route protection
146
+
// REMOVED: This can cause unwanted flashing/reloads
147
+
/*
146
148
if (!loading && window.location.pathname === '/verifier' && !session) {
147
149
console.log('(AuthProvider) No session on protected page, forcing refresh');
148
150
window.location.reload();
149
151
}
152
+
*/
150
153
}, [session, loading, error]);
151
154
152
155
return (