Hi Abdul-Razak Issah, 

I ran your code on my system and noticed an issue. When the refresh token expires, the server enters an infinite loop.

Typically, we don't change the refresh token's expiration time, but if you have changed it and are facing this infinite loop error, you can fix it by modifying your axiosInstance code. Specifically, in your axiosinstance.js file at line 46, you need to use the normal axios request instead of axiosInstance.

Here’s an example:

Your old code:

const response = await axiosInstance.post("/token/refresh/", { refresh: refreshToken, });

The corrected code:

const response = await axios.post(`${baseURL}/token/refresh/`, { refresh: refreshToken, });

Additionally, I noticed another issue in login.jsx where you're using the normal axios for your login API request. Because of this, after the access token expires, you won’t be able to get a new access token since you're not using axiosInstance in your handleFormSubmit function when requesting the token.

Instead, you should import axiosInstance and use it when making post requests to your backend for protected data.

For example, in login.jsx at line 31, update the code to:

const response = await axiosInstance.post

This should resolve the error. If you encounter any more issues, feel free to ask!

Abdul-Razak Issah, you're most welcome! Feel free to ask if you need any more help.