feat: Implement token renewal service and integrate with authenticati… #14
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements a comprehensive token renewal mechanism for MSAL authentication to maintain active user sessions through automatic background token refresh. It enhances authentication reliability by adding fallback popup authentication and improves session persistence.
Key changes:
- Added a token renewal service with automatic background refresh every 30 minutes
- Enhanced authentication error handling with recoverable error detection and popup fallback
- Enabled cookie-based session persistence for better cross-session reliability
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/utils/authErrorHandler.ts | Added isRecoverableAuthError utility to identify errors that can be resolved through interactive authentication |
| frontend/services/userDataService.ts | Enhanced getAccessToken with popup fallback when silent token acquisition fails |
| frontend/services/tokenRenewalService.ts | New token renewal service implementing background token refresh with 30-minute intervals |
| frontend/hooks/useTokenRenewal.ts | React hook to automatically manage token renewal service based on authentication state |
| frontend/authConfig.ts | Enabled cookie storage for authentication state to improve session persistence |
| frontend/App.tsx | Integrated token renewal hook into main app component |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| private isTokenNearExpiry(_account: any): boolean { | ||
| // Always attempt renewal for proactive refreshing | ||
| // MSAL handles token expiry checks internally, so we'll rely on forceRefresh | ||
| return true; | ||
| } |
There was a problem hiding this comment.
The isTokenNearExpiry method always returns true, making it redundant. Consider removing this method and directly calling the renewal logic, or implement actual token expiry checking logic if needed.
| } catch (popupError) { | ||
| console.error('Popup token refresh also failed:', popupError); | ||
| // Only after both silent and popup fail, throw the user-friendly error | ||
| throw new Error(getAuthErrorMessage(error)); |
There was a problem hiding this comment.
The error message is generated from the original error instead of popupError. This could provide misleading error information to the user when popup authentication fails. Consider using getAuthErrorMessage(popupError) or combining both error contexts.
| throw new Error(getAuthErrorMessage(error)); | |
| throw new Error(getAuthErrorMessage(popupError)); |
|
🎉 This PR is included in version 2.3.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This pull request introduces a robust token renewal mechanism for MSAL authentication, ensuring users maintain an active session by automatically refreshing tokens in the background. It also improves session persistence and error handling for authentication flows. The most important changes are grouped below:
Token Renewal Mechanism:
tokenRenewalServicesingleton to manage background token refresh, including logic for periodic silent renewal and fallback handling when user interaction is required (frontend/services/tokenRenewalService.ts).useTokenRenewalReact hook, which automatically starts or stops the renewal service based on the user's authentication status (frontend/hooks/useTokenRenewal.ts).Appcomponent to ensure the service is initialized for authenticated users (frontend/App.tsx).Authentication Error Handling Improvements:
isRecoverableAuthErrorutility to detect when interactive authentication (e.g., popup) can recover from token acquisition failures (frontend/utils/authErrorHandler.ts).getAccessTokenlogic to attempt a popup-based token refresh if silent acquisition fails and the error is recoverable, improving user experience and reliability (frontend/services/userDataService.ts).Session Persistence:
frontend/authConfig.ts).…on flow