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
This commit is contained in:
GitHub Actions
2026-01-18 22:13:02 +00:00
parent 57cd23f99f
commit 85802a75fc
5 changed files with 254 additions and 51 deletions

View File

@@ -22,12 +22,32 @@ export const setAuthToken = (token: string | null) => {
}
};
// Global 401 error logging for debugging
/**
* Callback function invoked when a 401 authentication error occurs.
* Set via setAuthErrorHandler to allow AuthContext to handle session expiry.
*/
let onAuthError: (() => void) | null = null;
/**
* Registers a callback to handle authentication errors (401 responses).
* @param handler - Function to call when authentication fails
*/
export const setAuthErrorHandler = (handler: () => void) => {
onAuthError = handler;
};
// Global 401 error handling - triggers auth error callback for session expiry
client.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
console.warn('Authentication failed:', error.config?.url);
// Skip auth error handling for login/auth endpoints to avoid redirect loops
const url = error.config?.url || '';
const isAuthEndpoint = url.includes('/auth/login') || url.includes('/auth/me');
if (onAuthError && !isAuthEndpoint) {
onAuthError();
}
}
return Promise.reject(error);
}