2.2 KiB
2.2 KiB
Token Refresh Implementation
Overview
The API services now automatically handle token refresh when access tokens expire. This provides a seamless user experience without requiring manual re-authentication.
How It Works
1. userService.ts
The userService now includes:
refreshToken(): Automatically gets the refresh token from localStorage, calls the/api/user/refreshendpoint, and updates the access tokenfetchWithAuth(): A wrapper aroundfetch()that:- Automatically adds the Authorization header with the access token
- Detects 401 (Unauthorized) responses
- Automatically refreshes the token using the refresh token
- Retries the original request with the new access token
- Throws an error if refresh fails (e.g., refresh token expired)
2. conversationService.ts
Now uses userService.fetchWithAuth() for all API calls:
sendQuery()- No longer needs token parametergetMessages()- No longer needs token parameter
3. Components Updated
ChatScreen.tsx:
- Removed manual token handling
- Now simply calls
conversationService.sendQuery(query)andconversationService.getMessages()
Benefits
✅ Automatic token refresh - Users stay logged in longer ✅ Transparent retry logic - Failed requests due to expired tokens are automatically retried ✅ Cleaner code - Components don't need to manage tokens ✅ Better UX - No interruptions when access token expires ✅ Centralized auth logic - All auth handling in one place
Error Handling
- If refresh token is missing or invalid, the error is thrown
- Components can catch these errors and redirect to login
- LocalStorage is automatically cleared when refresh fails
Usage Example
// Old way (manual token management)
const token = localStorage.getItem("access_token");
const result = await conversationService.sendQuery(query, token);
// New way (automatic token refresh)
const result = await conversationService.sendQuery(query);
Token Storage
- Access Token:
localStorage.getItem("access_token") - Refresh Token:
localStorage.getItem("refresh_token")
Both are automatically managed by the services.