馃攳 Problem Statement
When JWT tokens expire, API requests fail silently with 401 Unauthorized responses. Because there is currently no global handling for these responses, the frontend leaves the user in a broken UI state (e.g., empty dashboards, unresponsive action elements, or persistent loading states) without any feedback or session recovery.
馃専 Feature Description
We need to implement automatic and graceful handling of 401 responses on the frontend to improve the Auth UX. This can be achieved by adding a global Axios response interceptor that intercepts 401 Unauthorized errors from API requests.
馃幆 Proposed Solution & Implementation Details
- Axios Interceptor: Add/update a global Axios response interceptor that catches any response with a status code of
401.
- Clear Client-Side Credentials: Upon detecting a
401, clear all relevant auth storage (e.g., JWT tokens, user profiles from localStorage/sessionStorage or cookies) to reset the client session state.
- Automatic Redirect: Trigger a clean, router-based redirect to
/login so the user can easily re-authenticate and restore their session.
馃攳 Problem Statement
When JWT tokens expire, API requests fail silently with 401 Unauthorized responses. Because there is currently no global handling for these responses, the frontend leaves the user in a broken UI state (e.g., empty dashboards, unresponsive action elements, or persistent loading states) without any feedback or session recovery.
馃専 Feature Description
We need to implement automatic and graceful handling of 401 responses on the frontend to improve the Auth UX. This can be achieved by adding a global Axios response interceptor that intercepts 401 Unauthorized errors from API requests.
馃幆 Proposed Solution & Implementation Details
401.401, clear all relevant auth storage (e.g., JWT tokens, user profiles fromlocalStorage/sessionStorageor cookies) to reset the client session state./loginso the user can easily re-authenticate and restore their session.