Files
Charon/frontend/src/context/AuthContext.tsx
GitHub Actions 85802a75fc chore(frontend): add auth guard for session expiration handling
Implemented global 401 response handling to properly redirect users
to login when their session expires:

Changes:

frontend/src/api/client.ts: Added setAuthErrorHandler() callback
pattern and enhanced 401 interceptor to notify auth context
frontend/src/context/AuthContext.tsx: Register auth error handler
that clears state and redirects to /login on 401 responses
tests/core/authentication.spec.ts: Fixed test to clear correct
localStorage key (charon_auth_token)
The implementation uses a callback pattern to avoid circular
dependencies while keeping auth state management centralized.
Auth endpoints (/auth/login, /auth/me) are excluded from the
redirect to prevent loops during initial auth checks.

All 16 authentication E2E tests now pass including:

should redirect to login when session expires
should handle 401 response gracefully
Closes frontend-auth-guard-reload.md
2026-01-20 06:11:59 +00:00

120 lines
3.3 KiB
TypeScript

import { useState, useEffect, useCallback, type ReactNode, type FC } from 'react';
import client, { setAuthToken, setAuthErrorHandler } from '../api/client';
import { AuthContext, User } from './AuthContextValue';
export const AuthProvider: FC<{ children: ReactNode }> = ({ children }) => {
const [user, setUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(true);
// Handle session expiry by clearing auth state and redirecting to login
const handleAuthError = useCallback(() => {
console.log('Session expired, redirecting to login');
localStorage.removeItem('charon_auth_token');
setAuthToken(null);
setUser(null);
// Use window.location for full page redirect to clear any stale state
if (window.location.pathname !== '/login') {
window.location.href = '/login';
}
}, []);
// Register auth error handler on mount
useEffect(() => {
setAuthErrorHandler(handleAuthError);
}, [handleAuthError]);
useEffect(() => {
const checkAuth = async () => {
try {
const stored = localStorage.getItem('charon_auth_token');
if (stored) {
setAuthToken(stored);
}
const response = await client.get('/auth/me');
setUser(response.data);
} catch {
setAuthToken(null);
setUser(null);
} finally {
setIsLoading(false);
}
};
checkAuth();
}, []);
const login = async (token?: string) => {
if (token) {
localStorage.setItem('charon_auth_token', token);
setAuthToken(token);
}
try {
const response = await client.get<User>('/auth/me');
setUser(response.data);
} catch (error) {
setUser(null);
setAuthToken(null);
localStorage.removeItem('charon_auth_token');
throw error;
}
};
const logout = async () => {
try {
await client.post('/auth/logout');
} catch (error) {
console.error("Logout failed", error);
}
localStorage.removeItem('charon_auth_token');
setAuthToken(null);
setUser(null);
};
const changePassword = async (oldPassword: string, newPassword: string) => {
await client.post('/auth/change-password', {
old_password: oldPassword,
new_password: newPassword,
});
};
// Auto-logout logic
useEffect(() => {
if (!user) return;
const TIMEOUT_MS = 15 * 60 * 1000; // 15 minutes
let timeoutId: ReturnType<typeof setTimeout>;
const resetTimer = () => {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
console.log('Auto-logging out due to inactivity');
logout();
}, TIMEOUT_MS);
};
// Initial timer start
resetTimer();
// Event listeners for activity
const events = ['mousedown', 'keydown', 'scroll', 'touchstart'];
const handleActivity = () => resetTimer();
events.forEach(event => {
window.addEventListener(event, handleActivity);
});
return () => {
if (timeoutId) clearTimeout(timeoutId);
events.forEach(event => {
window.removeEventListener(event, handleActivity);
});
};
}, [user]);
return (
<AuthContext.Provider value={{ user, login, logout, changePassword, isAuthenticated: !!user, isLoading }}>
{children}
</AuthContext.Provider>
);
};