85802a75fc
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
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import axios from 'axios';
|
|
|
|
/**
|
|
* Pre-configured Axios instance for API communication.
|
|
* Includes base URL, credentials, and timeout settings.
|
|
*/
|
|
const client = axios.create({
|
|
baseURL: '/api/v1',
|
|
withCredentials: true, // Required for HttpOnly cookie transmission
|
|
timeout: 30000, // 30 second timeout
|
|
});
|
|
|
|
/**
|
|
* Sets or clears the Authorization header for API requests.
|
|
* @param token - JWT token to set, or null to clear authentication
|
|
*/
|
|
export const setAuthToken = (token: string | null) => {
|
|
if (token) {
|
|
client.defaults.headers.common.Authorization = `Bearer ${token}`;
|
|
} else {
|
|
delete client.defaults.headers.common.Authorization;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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);
|
|
}
|
|
);
|
|
|
|
export default client;
|