Refactor config, auth, and storage modules with runtime validation and encryption
- Centralized and refactored configuration management (`config`) with runtime validation for environment variables. - Introduced utilities for secure token storage, including AES-GCM encryption and fallback handling. - Enhanced `authStore` state management with token validation, secure persistence, and initialization from storage. - Modularized authentication utilities and updated export structure for better maintainability. - Improved error handling, input validation, and added detailed comments for enhanced clarity.
This commit is contained in:
Felipe Cardoso
154
frontend/src/lib/api/client.old.ts
Executable file
154
frontend/src/lib/api/client.old.ts
Executable file
@@ -0,0 +1,154 @@
|
||||
import axios, { AxiosError, AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios';
|
||||
import { useAuthStore } from '@/stores/authStore';
|
||||
import { parseAPIError, type APIErrorResponse } from './errors';
|
||||
|
||||
// Create Axios instance
|
||||
export const apiClient = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1',
|
||||
timeout: parseInt(process.env.NEXT_PUBLIC_API_TIMEOUT || '30000'),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Request interceptor - Add authentication token
|
||||
apiClient.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
// Get access token from auth store
|
||||
const accessToken = useAuthStore.getState().accessToken;
|
||||
|
||||
// Add Authorization header if token exists
|
||||
if (accessToken) {
|
||||
config.headers.Authorization = `Bearer ${accessToken}`;
|
||||
}
|
||||
|
||||
// Log request in development
|
||||
if (process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_DEBUG_API === 'true') {
|
||||
console.log('🚀 API Request:', {
|
||||
method: config.method?.toUpperCase(),
|
||||
url: config.url,
|
||||
headers: config.headers,
|
||||
data: config.data,
|
||||
});
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.error('Request interceptor error:', error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Response interceptor - Handle errors and token refresh
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => {
|
||||
// Log response in development
|
||||
if (process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_DEBUG_API === 'true') {
|
||||
console.log('✅ API Response:', {
|
||||
status: response.status,
|
||||
url: response.config.url,
|
||||
data: response.data,
|
||||
});
|
||||
}
|
||||
|
||||
return response;
|
||||
},
|
||||
async (error: AxiosError<APIErrorResponse>) => {
|
||||
const originalRequest = error.config as AxiosRequestConfig & { _retry?: boolean };
|
||||
|
||||
// Log error in development
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('❌ API Error:', {
|
||||
status: error.response?.status,
|
||||
url: error.config?.url,
|
||||
message: error.message,
|
||||
data: error.response?.data,
|
||||
});
|
||||
}
|
||||
|
||||
// Handle 401 Unauthorized - Token refresh logic
|
||||
if (error.response?.status === 401 && originalRequest && !originalRequest._retry) {
|
||||
originalRequest._retry = true;
|
||||
|
||||
try {
|
||||
// Get refresh token
|
||||
const refreshToken = useAuthStore.getState().refreshToken;
|
||||
|
||||
if (!refreshToken) {
|
||||
// No refresh token - redirect to login
|
||||
useAuthStore.getState().clearAuth();
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
// Attempt to refresh tokens
|
||||
const response = await axios.post(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/refresh`,
|
||||
{ refresh_token: refreshToken },
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { access_token, refresh_token } = response.data;
|
||||
|
||||
// Update tokens in store
|
||||
useAuthStore.getState().setTokens(access_token, refresh_token);
|
||||
|
||||
// Retry original request with new token
|
||||
if (originalRequest.headers) {
|
||||
originalRequest.headers.Authorization = `Bearer ${access_token}`;
|
||||
}
|
||||
|
||||
return apiClient.request(originalRequest);
|
||||
} catch (refreshError) {
|
||||
// Refresh failed - clear auth and redirect to login
|
||||
console.error('Token refresh failed:', refreshError);
|
||||
useAuthStore.getState().clearAuth();
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(refreshError);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle 403 Forbidden
|
||||
if (error.response?.status === 403) {
|
||||
console.warn('Access forbidden - insufficient permissions');
|
||||
// You might want to show a toast here
|
||||
}
|
||||
|
||||
// Handle 429 Too Many Requests
|
||||
if (error.response?.status === 429) {
|
||||
console.warn('Rate limit exceeded');
|
||||
// You might want to show a toast with retry time
|
||||
const retryAfter = error.response.headers['retry-after'];
|
||||
if (retryAfter) {
|
||||
console.log(`Retry after ${retryAfter} seconds`);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle 500+ Server Errors
|
||||
if (error.response?.status && error.response.status >= 500) {
|
||||
console.error('Server error occurred');
|
||||
// You might want to show a generic error toast
|
||||
}
|
||||
|
||||
// Handle Network Errors
|
||||
if (!error.response) {
|
||||
console.error('Network error - check your connection');
|
||||
// You might want to show a network error toast
|
||||
}
|
||||
|
||||
// Parse and reject with structured error
|
||||
const parsedErrors = parseAPIError(error);
|
||||
return Promise.reject(parsedErrors);
|
||||
}
|
||||
);
|
||||
|
||||
export default apiClient;
|
||||
185
frontend/src/lib/api/client.ts
Executable file → Normal file
185
frontend/src/lib/api/client.ts
Executable file → Normal file
@@ -1,38 +1,129 @@
|
||||
/**
|
||||
* API Client with secure token refresh and error handling
|
||||
* Implements singleton refresh pattern to prevent race conditions
|
||||
*/
|
||||
|
||||
import axios, { AxiosError, AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios';
|
||||
import { useAuthStore } from '@/stores/authStore';
|
||||
import { parseAPIError, type APIErrorResponse } from './errors';
|
||||
import config from '@/config';
|
||||
|
||||
// Create Axios instance
|
||||
export const apiClient = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1',
|
||||
timeout: parseInt(process.env.NEXT_PUBLIC_API_TIMEOUT || '30000'),
|
||||
/**
|
||||
* Separate axios instance for auth endpoints
|
||||
* Prevents interceptor loops during token refresh
|
||||
*/
|
||||
const authClient = axios.create({
|
||||
baseURL: config.api.url,
|
||||
timeout: config.api.timeout,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Request interceptor - Add authentication token
|
||||
/**
|
||||
* Main API client instance
|
||||
*/
|
||||
export const apiClient = axios.create({
|
||||
baseURL: config.api.url,
|
||||
timeout: config.api.timeout,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Token refresh state
|
||||
* Singleton pattern prevents multiple simultaneous refresh requests
|
||||
*/
|
||||
let isRefreshing = false;
|
||||
let refreshPromise: Promise<string> | null = null;
|
||||
|
||||
/**
|
||||
* Refresh access token using refresh token
|
||||
* Implements singleton pattern to prevent race conditions
|
||||
* @returns Promise resolving to new access token
|
||||
*/
|
||||
async function refreshAccessToken(): Promise<string> {
|
||||
// If already refreshing, return existing promise
|
||||
if (isRefreshing && refreshPromise) {
|
||||
return refreshPromise;
|
||||
}
|
||||
|
||||
// Start new refresh
|
||||
isRefreshing = true;
|
||||
|
||||
refreshPromise = (async () => {
|
||||
try {
|
||||
const refreshToken = useAuthStore.getState().refreshToken;
|
||||
|
||||
if (!refreshToken) {
|
||||
throw new Error('No refresh token available');
|
||||
}
|
||||
|
||||
// Use separate auth client to avoid interceptor loop
|
||||
const response = await authClient.post<{
|
||||
access_token: string;
|
||||
refresh_token: string;
|
||||
expires_in?: number;
|
||||
token_type: string;
|
||||
}>('/auth/refresh', {
|
||||
refresh_token: refreshToken,
|
||||
});
|
||||
|
||||
// Validate response structure
|
||||
if (!response.data?.access_token || !response.data?.refresh_token) {
|
||||
throw new Error('Invalid refresh response format');
|
||||
}
|
||||
|
||||
const { access_token, refresh_token, expires_in } = response.data;
|
||||
|
||||
// Update tokens in store
|
||||
await useAuthStore.getState().setTokens(access_token, refresh_token, expires_in);
|
||||
|
||||
return access_token;
|
||||
} catch (error) {
|
||||
// Refresh failed - clear auth and redirect
|
||||
console.error('Token refresh failed:', error);
|
||||
await useAuthStore.getState().clearAuth();
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = config.routes.login;
|
||||
}
|
||||
|
||||
throw error;
|
||||
} finally {
|
||||
// Reset refresh state
|
||||
isRefreshing = false;
|
||||
refreshPromise = null;
|
||||
}
|
||||
})();
|
||||
|
||||
return refreshPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request interceptor - Add authentication token
|
||||
*/
|
||||
apiClient.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
(requestConfig: InternalAxiosRequestConfig) => {
|
||||
// Get access token from auth store
|
||||
const accessToken = useAuthStore.getState().accessToken;
|
||||
|
||||
// Add Authorization header if token exists
|
||||
if (accessToken) {
|
||||
config.headers.Authorization = `Bearer ${accessToken}`;
|
||||
requestConfig.headers.Authorization = `Bearer ${accessToken}`;
|
||||
}
|
||||
|
||||
// Log request in development
|
||||
if (process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_DEBUG_API === 'true') {
|
||||
// Debug logging in development
|
||||
if (config.debug.api) {
|
||||
console.log('🚀 API Request:', {
|
||||
method: config.method?.toUpperCase(),
|
||||
url: config.url,
|
||||
headers: config.headers,
|
||||
data: config.data,
|
||||
method: requestConfig.method?.toUpperCase(),
|
||||
url: requestConfig.url,
|
||||
hasAuth: !!accessToken,
|
||||
});
|
||||
}
|
||||
|
||||
return config;
|
||||
return requestConfig;
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.error('Request interceptor error:', error);
|
||||
@@ -40,15 +131,16 @@ apiClient.interceptors.request.use(
|
||||
}
|
||||
);
|
||||
|
||||
// Response interceptor - Handle errors and token refresh
|
||||
/**
|
||||
* Response interceptor - Handle errors and token refresh
|
||||
*/
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => {
|
||||
// Log response in development
|
||||
if (process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_DEBUG_API === 'true') {
|
||||
// Debug logging in development
|
||||
if (config.debug.api) {
|
||||
console.log('✅ API Response:', {
|
||||
status: response.status,
|
||||
url: response.config.url,
|
||||
data: response.data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -57,13 +149,12 @@ apiClient.interceptors.response.use(
|
||||
async (error: AxiosError<APIErrorResponse>) => {
|
||||
const originalRequest = error.config as AxiosRequestConfig & { _retry?: boolean };
|
||||
|
||||
// Log error in development
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// Debug logging in development
|
||||
if (config.env.isDevelopment) {
|
||||
console.error('❌ API Error:', {
|
||||
status: error.response?.status,
|
||||
url: error.config?.url,
|
||||
message: error.message,
|
||||
data: error.response?.data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -72,47 +163,17 @@ apiClient.interceptors.response.use(
|
||||
originalRequest._retry = true;
|
||||
|
||||
try {
|
||||
// Get refresh token
|
||||
const refreshToken = useAuthStore.getState().refreshToken;
|
||||
|
||||
if (!refreshToken) {
|
||||
// No refresh token - redirect to login
|
||||
useAuthStore.getState().clearAuth();
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
// Attempt to refresh tokens
|
||||
const response = await axios.post(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/refresh`,
|
||||
{ refresh_token: refreshToken },
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { access_token, refresh_token } = response.data;
|
||||
|
||||
// Update tokens in store
|
||||
useAuthStore.getState().setTokens(access_token, refresh_token);
|
||||
// Attempt to refresh token (singleton pattern)
|
||||
const newAccessToken = await refreshAccessToken();
|
||||
|
||||
// Retry original request with new token
|
||||
if (originalRequest.headers) {
|
||||
originalRequest.headers.Authorization = `Bearer ${access_token}`;
|
||||
originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
|
||||
}
|
||||
|
||||
return apiClient.request(originalRequest);
|
||||
} catch (refreshError) {
|
||||
// Refresh failed - clear auth and redirect to login
|
||||
console.error('Token refresh failed:', refreshError);
|
||||
useAuthStore.getState().clearAuth();
|
||||
if (typeof window !== 'undefined') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
// Refresh failed - error already logged, auth cleared
|
||||
return Promise.reject(refreshError);
|
||||
}
|
||||
}
|
||||
@@ -120,29 +181,26 @@ apiClient.interceptors.response.use(
|
||||
// Handle 403 Forbidden
|
||||
if (error.response?.status === 403) {
|
||||
console.warn('Access forbidden - insufficient permissions');
|
||||
// You might want to show a toast here
|
||||
// Toast notification would be added here in Phase 4
|
||||
}
|
||||
|
||||
// Handle 429 Too Many Requests
|
||||
if (error.response?.status === 429) {
|
||||
console.warn('Rate limit exceeded');
|
||||
// You might want to show a toast with retry time
|
||||
const retryAfter = error.response.headers['retry-after'];
|
||||
if (retryAfter) {
|
||||
console.log(`Retry after ${retryAfter} seconds`);
|
||||
}
|
||||
console.warn(`Rate limit exceeded${retryAfter ? `. Retry after ${retryAfter}s` : ''}`);
|
||||
// Toast notification would be added here in Phase 4
|
||||
}
|
||||
|
||||
// Handle 500+ Server Errors
|
||||
if (error.response?.status && error.response.status >= 500) {
|
||||
console.error('Server error occurred');
|
||||
// You might want to show a generic error toast
|
||||
// Toast notification would be added here in Phase 4
|
||||
}
|
||||
|
||||
// Handle Network Errors
|
||||
if (!error.response) {
|
||||
console.error('Network error - check your connection');
|
||||
// You might want to show a network error toast
|
||||
// Toast notification would be added here in Phase 4
|
||||
}
|
||||
|
||||
// Parse and reject with structured error
|
||||
@@ -151,4 +209,5 @@ apiClient.interceptors.response.use(
|
||||
}
|
||||
);
|
||||
|
||||
// Export default for convenience
|
||||
export default apiClient;
|
||||
|
||||
Reference in New Issue
Block a user