Summary
Implement automatic access token refresh in the frontend using Axios response interceptors. When an access token expires, the client should transparently obtain a new access token using a refresh token and retry the original request without requiring the user to log in again.
Problem
Currently, when an access token expires, authenticated API requests fail with a 401 Unauthorized response, forcing users to log in again. This interrupts the user experience and requires individual components to handle authentication failures manually. Additionally, multiple simultaneous requests may each trigger redundant authentication logic.
Proposed solution
Introduce a centralized authentication flow using Axios interceptors that:
- Detects
401 Unauthorized responses caused by expired access tokens.
- Sends a request to the refresh endpoint to obtain a new access token.
- Updates the stored access token after a successful refresh.
- Retries the original failed request automatically.
- Queues concurrent requests while a token refresh is in progress to prevent multiple refresh requests.
- Clears authentication data and redirects the user to the login page if the refresh request fails.
This approach centralizes token management, simplifies API calls throughout the application, and improves maintainability.
Benefits
- Provides a seamless user experience by preventing unnecessary logouts.
- Reduces duplicate authentication logic across the codebase.
- Automatically retries failed requests after successful token renewal.
- Prevents multiple refresh requests during concurrent API calls.
- Improves the overall reliability and maintainability of the authentication flow.
Additional context
A typical implementation would use an Axios response interceptor with an isRefreshing flag and a request queue. While a refresh request is in progress, subsequent failed requests wait for the new access token before being retried. If the refresh operation fails, the user's authentication state is cleared and they are redirected to the login page.
Notes for contributors
- If you want to work on this, add a comment so maintainers can assign the issue.
- Please avoid submitting a PR before the issue is approved.
Summary
Implement automatic access token refresh in the frontend using Axios response interceptors. When an access token expires, the client should transparently obtain a new access token using a refresh token and retry the original request without requiring the user to log in again.
Problem
Currently, when an access token expires, authenticated API requests fail with a
401 Unauthorizedresponse, forcing users to log in again. This interrupts the user experience and requires individual components to handle authentication failures manually. Additionally, multiple simultaneous requests may each trigger redundant authentication logic.Proposed solution
Introduce a centralized authentication flow using Axios interceptors that:
401 Unauthorizedresponses caused by expired access tokens.This approach centralizes token management, simplifies API calls throughout the application, and improves maintainability.
Benefits
Additional context
A typical implementation would use an Axios response interceptor with an
isRefreshingflag and a request queue. While a refresh request is in progress, subsequent failed requests wait for the new access token before being retried. If the refresh operation fails, the user's authentication state is cleared and they are redirected to the login page.Notes for contributors