bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new frontend - fix 8

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-07-22 13:46:05 +02:00
parent d04359eca5
commit 5959eb6e15
9 changed files with 873 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/api/auth/tokenManager.ts
View File

@@ -1,20 +1,22 @@
// File: frontend/src/api/auth/tokenManager.ts
// frontend/src/api/auth/tokenManager.ts - UPDATED TO HANDLE NEW TOKEN RESPONSE FORMAT
import { jwtDecode } from 'jwt-decode';
interface TokenPayload {
sub: string;
user_id: string;
email: string;
full_name: string;
is_verified: boolean;
exp: number;
iat: number;
}
interface TokenResponse {
access_token: string;
refresh_token: string;
refresh_token?: string;
token_type: string;
expires_in?: number;
user?: any; // User data from registration/login response
}
class TokenManager {
@@ -46,6 +48,7 @@ class TokenManager {
try {
await this.refreshAccessToken();
} catch (error) {
console.error('Failed to refresh token on init:', error);
// If refresh fails on init, clear tokens
this.clearTokens();
}
@@ -53,18 +56,16 @@ class TokenManager {
}
}
async storeTokens(response: TokenResponse | any): Promise<void> {
// Handle both direct TokenResponse and login response with nested tokens
if (response.access_token) {
this.accessToken = response.access_token;
this.refreshToken = response.refresh_token;
} else {
// Handle login response format
this.accessToken = response.access_token;
async storeTokens(response: TokenResponse): Promise<void> {
// Handle the new unified token response format
this.accessToken = response.access_token;
// Store refresh token if provided (it might be optional in some flows)
if (response.refresh_token) {
this.refreshToken = response.refresh_token;
}
// Calculate expiry time
// Calculate expiry time from expires_in or use default
const expiresIn = response.expires_in || 3600; // Default 1 hour
this.tokenExpiry = new Date(Date.now() + expiresIn * 1000);
@@ -78,17 +79,22 @@ class TokenManager {
async getAccessToken(): Promise<string | null> {
// Check if token is expired or will expire soon (5 min buffer)
if (this.shouldRefreshToken()) {
if (this.shouldRefreshToken() && this.refreshToken) {
try {
await this.refreshAccessToken();
} catch (error) {
console.error('Token refresh failed:', error);
return null;
// Return current token even if refresh failed (might still be valid)
return this.accessToken;
}
}
return this.accessToken;
}
getRefreshToken(): string | null {
return this.refreshToken;
}
async refreshAccessToken(): Promise<void> {
// Prevent multiple simultaneous refresh attempts
if (this.refreshPromise) {
@@ -123,11 +129,29 @@ class TokenManager {
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.detail || 'Token refresh failed');
throw new Error(errorData.detail || `HTTP ${response.status}: Token refresh failed`);
}
const data: TokenResponse = await response.json();
await this.storeTokens(data);
// Update only the access token from refresh response
// Refresh token typically stays the same unless using token rotation
this.accessToken = data.access_token;
if (data.refresh_token) {
this.refreshToken = data.refresh_token;
}
const expiresIn = data.expires_in || 3600;
this.tokenExpiry = new Date(Date.now() + expiresIn * 1000);
// Update storage
this.secureStore({
accessToken: this.accessToken,
refreshToken: this.refreshToken,
expiry: this.tokenExpiry.toISOString()
});
} catch (error) {
console.error('Token refresh error:', error);
// Clear tokens on refresh failure
@@ -153,7 +177,7 @@ class TokenManager {
}
private shouldRefreshToken(): boolean {
if (!this.tokenExpiry) return true;
if (!this.tokenExpiry || !this.refreshToken) return false;
// Refresh if token expires in less than 5 minutes
const bufferTime = 5 * 60 * 1000; // 5 minutes
return new Date(Date.now() + bufferTime) >= this.tokenExpiry;
@@ -178,6 +202,8 @@ class TokenManager {
return JSON.parse(decrypted);
} catch (error) {
console.error('Failed to retrieve stored tokens:', error);
// Clear corrupted storage
this.clearSecureStore();
return null;
}
}
@@ -205,10 +231,24 @@ class TokenManager {
try {
return jwtDecode<TokenPayload>(this.accessToken);
} catch {
} catch (error) {
console.error('Failed to decode token:', error);
return null;
}
}
// Get user information from token
getUserFromToken(): { user_id: string; email: string; full_name: string; is_verified: boolean } | null {
const payload = this.getTokenPayload();
if (!payload) return null;
return {
user_id: payload.user_id,
email: payload.email,
full_name: payload.full_name,
is_verified: payload.is_verified
};
}
}
export const tokenManager = TokenManager.getInstance();

132
frontend/src/api/base/apiClient.ts
View File

@@ -1,4 +1,5 @@
// src/api/base/apiClient.ts
// frontend/src/api/base/apiClient.ts - UPDATED WITH FIXED BASE URL AND ERROR HANDLING
import { tokenManager } from '../auth/tokenManager';
export interface ApiConfig {
@@ -67,7 +68,7 @@ class ApiClient {
return config;
});
// Response interceptor for error handling
// Response interceptor for error handling and token refresh
this.addResponseInterceptor(
(response) => response,
async (error) => {
@@ -75,10 +76,19 @@ class ApiClient {
// Try to refresh token
try {
await tokenManager.refreshAccessToken();
// Retry original request
return this.request(error.config);
// Retry original request with new token
const newToken = await tokenManager.getAccessToken();
if (newToken && error.config) {
error.config.headers = {
...error.config.headers,
'Authorization': `Bearer ${newToken}`
};
return this.request(error.config);
}
} catch (refreshError) {
// Redirect to login
console.error('Token refresh failed during request retry:', refreshError);
// Clear tokens and redirect to login
tokenManager.clearTokens();
window.location.href = '/login';
throw refreshError;
}
@@ -162,92 +172,82 @@ class ApiClient {
// Wait before retry
await new Promise(resolve => setTimeout(resolve, delay));
// Exponential backoff
return this.executeWithRetry(fn, attempts - 1, delay * 2);
return this.executeWithRetry(fn, attempts - 1, delay * 1.5);
}
}
private isRetryableError(error: any): boolean {
// Network errors or 5xx server errors are retryable
if (!error.response) return true;
return error.response.status >= 500;
// Retry on network errors or 5xx server errors
return !error.response || (error.response.status >= 500 && error.response.status < 600);
}
private transformError(error: any): ApiError {
if (error.response) {
// Server responded with error
return {
message: error.response.data?.detail || error.response.statusText,
code: error.response.data?.code,
message: error.response.data?.detail || error.response.data?.message || 'Request failed',
status: error.response.status,
code: error.response.data?.code,
details: error.response.data
};
} else if (error.request) {
// Request made but no response
return {
message: 'Network error - no response from server',
code: 'NETWORK_ERROR'
};
} else {
// Something else happened
return {
message: error.message || 'An unexpected error occurred',
code: 'UNKNOWN_ERROR'
};
}
return {
message: error.message || 'Network error',
code: 'NETWORK_ERROR'
};
}
async request<T = any>(endpoint: string, config: RequestConfig = {}): Promise<T> {
const processedConfig = await this.applyRequestInterceptors({
...config,
headers: {
'X-Request-ID': this.generateRequestId(),
...config.headers
}
});
const processedConfig = await this.applyRequestInterceptors(config);
const url = this.buildURL(endpoint, processedConfig.params);
const timeout = processedConfig.timeout || this.config.timeout;
const shouldRetry = processedConfig.retry !== false;
const retryAttempts = processedConfig.retryAttempts || this.config.retryAttempts;
const timeout = processedConfig.timeout || this.config.timeout!;
const executeRequest = async () => {
const fetchPromise = fetch(url, {
const makeRequest = async (): Promise<Response> => {
const requestPromise = fetch(url, {
...processedConfig,
signal: processedConfig.signal
signal: AbortSignal.timeout(timeout)
});
const timeoutPromise = this.createTimeoutPromise(timeout);
const response = await Promise.race([fetchPromise, timeoutPromise]);
if (!response.ok) {
throw { response, config: { endpoint, ...processedConfig } };
}
return response;
return Promise.race([
requestPromise,
this.createTimeoutPromise(timeout)
]);
};
try {
const response = shouldRetry
? await this.executeWithRetry(
executeRequest,
retryAttempts,
this.config.retryDelay!
)
: await executeRequest();
const processedResponse = await this.applyResponseInterceptors(response);
let response: Response;
// Parse response
const contentType = processedResponse.headers.get('content-type');
if (contentType?.includes('application/json')) {
return await processedResponse.json();
if (config.retry !== false) {
response = await this.executeWithRetry(
makeRequest,
this.config.retryAttempts!,
this.config.retryDelay!
);
} else {
return await processedResponse.text() as any;
response = await makeRequest();
}
response = await this.applyResponseInterceptors(response);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw {
response: {
status: response.status,
statusText: response.statusText,
data: errorData
}
};
}
// Handle empty responses (like 204 No Content)
if (response.status === 204 || response.headers.get('content-length') === '0') {
return {} as T;
}
return await response.json();
} catch (error) {
throw await this.applyResponseInterceptors(Promise.reject(error));
throw this.transformError(error);
}
}
@@ -318,7 +318,7 @@ class ApiClient {
}
}
// Create default instance
// FIXED: Create default instance with correct base URL (removed /api suffix)
export const apiClient = new ApiClient({
baseURL: process.env.FRONTEND_API_URL || 'http://localhost:8000'
});
baseURL: process.env.REACT_APP_API_URL || 'http://localhost:8000'
});

76
frontend/src/api/services/authService.ts
View File

@@ -1,5 +1,4 @@
// File: frontend/src/api/services/authService.ts
// frontend/src/api/services/authService.ts - UPDATED TO HANDLE TOKENS FROM REGISTRATION
import { tokenManager } from '../auth/tokenManager';
import { apiClient } from '../base/apiClient';
@@ -19,45 +18,66 @@ export interface UserProfile {
id: string;
email: string;
full_name: string;
tenant_id: string;
role: string;
tenant_id?: string;
role?: string;
is_active: boolean;
is_verified?: boolean;
created_at: string;
}
class AuthService {
async login(credentials: LoginCredentials): Promise<UserProfile> {
// FIXED: Use correct endpoint and method
const response = await apiClient.post('/api/v1/auth/login', credentials);
// Store tokens from login response
await tokenManager.storeTokens(response);
export interface TokenResponse {
access_token: string;
refresh_token?: string;
token_type: string;
expires_in?: number;
user?: UserProfile;
}
// Get user profile from the response or make separate call
class AuthService {
async register(data: RegisterData): Promise<UserProfile> {
// NEW: Registration now returns tokens directly - no auto-login needed!
const response: TokenResponse = await apiClient.post('/api/v1/auth/register', data);
// Store tokens immediately from registration response
await tokenManager.storeTokens(response);
// Return user profile from registration response
if (response.user) {
return response.user;
} else {
// Fallback: get user profile if not included in response
return this.getCurrentUser();
}
}
async register(data: RegisterData): Promise<UserProfile> {
// FIXED: Use correct endpoint path
const response = await apiClient.post('/api/v1/auth/register', data);
async login(credentials: LoginCredentials): Promise<UserProfile> {
// UPDATED: Use correct endpoint and unified response handling
const response: TokenResponse = await apiClient.post('/api/v1/auth/login', credentials);
// Registration only returns user data, NOT tokens
// So we need to login separately to get tokens
await this.login({
email: data.email,
password: data.password
});
// Store tokens from login response
await tokenManager.storeTokens(response);
return response; // This is the user profile from registration
// Return user profile from login response
if (response.user) {
return response.user;
} else {
// Fallback: get user profile if not included in response
return this.getCurrentUser();
}
}
async logout(): Promise<void> {
try {
await apiClient.post('/api/v1/auth/logout');
// Get refresh token for logout request
const refreshToken = tokenManager.getRefreshToken();
if (refreshToken) {
await apiClient.post('/api/v1/auth/logout', {
refresh_token: refreshToken
});
}
} catch (error) {
console.error('Logout API call failed:', error);
// Continue with local cleanup even if API fails
} finally {
tokenManager.clearTokens();
window.location.href = '/login';
@@ -79,9 +99,19 @@ class AuthService {
});
}
async refreshToken(): Promise<void> {
await tokenManager.refreshAccessToken();
}
isAuthenticated(): boolean {
return tokenManager.isAuthenticated();
}
getUser(): UserProfile | null {
// This method would need to be implemented to return cached user data
// For now, it returns null and components should use getCurrentUser()
return null;
}
}
export const authService = new AuthService();