[Hacktoberfest] Feature Request: Implement Token Refreshing with `api/v1/auth/refresh-token`

[sanjaysah101]

Description:

Implement automatic token refreshing in the Next.js app using Redux for state management, Axios for API calls, and React Query for data management. This ensures that users remain authenticated seamlessly when their access token expires.

Tasks:

1. Set Up Redux for Auth State Management:

   • Create authSlice using Redux Toolkit to store accessToken, refreshToken, user, and isAuthenticated.
   • Use redux-persist to persist auth state in localStorage or HttpOnly cookies.

2. Create Token Refresh Logic with Axios Interceptors:

   • Set up a custom Axios instance with an interceptor to catch 401 Unauthorized responses.
   • In the interceptor, dispatch a refreshToken action from authSlice to call api/v1/auth/refresh-token.
   • Update the accessToken in the Redux store and retry the original request using the new token.

3. Integrate React Query for API Calls:

   • Use React Query’s useQuery for fetching data that depends on authentication (e.g., user profile).
   • Set up automatic refetching of queries when the accessToken changes.

Example of Token Refresh Logic

• In authSlice, define a refreshToken action using createAsyncThunk.
• On a 401 response, call the refreshToken action using dispatch.
• Update accessToken in the Redux store once a new token is received, and use it in subsequent API calls.

Acceptance Criteria:

• Users automatically receive a new access token when the current one expires.
• The refresh process is seamless and handled transparently through Axios interceptors.
• The authentication state is persisted across page reloads, using redux-persist.