Fix admin login verification loop
- Remove checkSession from useEffect dependency array to prevent infinite loop - Improve session validation logic with better error handling - Add clear session functionality for debugging - Add 'Clear Session & Reload' button to help with stuck sessions - Better session cleanup on validation errors This should resolve the verification loop issue in the admin login.
This commit is contained in:
@@ -97,42 +97,61 @@ const AdminPage = () => {
|
||||
const sessionToken = sessionStorage.getItem('admin_session_token');
|
||||
const csrfToken = authState.csrfToken;
|
||||
|
||||
if (authStatus === 'true' && sessionToken && csrfToken) {
|
||||
try {
|
||||
const response = await fetch('/api/auth/validate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': csrfToken
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sessionToken,
|
||||
csrfToken
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
showLogin: false
|
||||
}));
|
||||
return;
|
||||
} else {
|
||||
sessionStorage.clear();
|
||||
}
|
||||
} catch {
|
||||
sessionStorage.clear();
|
||||
}
|
||||
// If no session data, show login immediately
|
||||
if (!authStatus || !sessionToken || !csrfToken) {
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
showLogin: true
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
showLogin: true
|
||||
}));
|
||||
try {
|
||||
const response = await fetch('/api/auth/validate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': csrfToken
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sessionToken,
|
||||
csrfToken
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
showLogin: false
|
||||
}));
|
||||
return;
|
||||
} else {
|
||||
// Clear invalid session
|
||||
sessionStorage.removeItem('admin_authenticated');
|
||||
sessionStorage.removeItem('admin_session_token');
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
showLogin: true
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Session validation error:', error);
|
||||
// Clear session on error
|
||||
sessionStorage.removeItem('admin_authenticated');
|
||||
sessionStorage.removeItem('admin_session_token');
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
showLogin: true
|
||||
}));
|
||||
}
|
||||
}, [authState.csrfToken]);
|
||||
|
||||
// Initialize
|
||||
@@ -153,7 +172,20 @@ const AdminPage = () => {
|
||||
if (authState.csrfToken && !authState.isLocked) {
|
||||
checkSession();
|
||||
}
|
||||
}, [authState.csrfToken, authState.isLocked, checkSession]);
|
||||
}, [authState.csrfToken, authState.isLocked]);
|
||||
|
||||
// Handle logout
|
||||
const handleLogout = useCallback(() => {
|
||||
sessionStorage.removeItem('admin_authenticated');
|
||||
sessionStorage.removeItem('admin_session_token');
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: false,
|
||||
showLogin: true,
|
||||
password: '',
|
||||
error: ''
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// Handle login form submission
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
@@ -440,6 +472,17 @@ const AdminPage = () => {
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Debug: Clear Session Button */}
|
||||
<div className="mt-6 pt-6 border-t border-white/20">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="w-full text-white/60 hover:text-white/80 text-sm py-2 px-4 rounded-lg border border-white/20 hover:border-white/40 transition-all"
|
||||
>
|
||||
Clear Session & Reload
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user