Logic recommendation for React refreshing token - reactjs

Question

Can anyone suggest me a good logic to automatically refresh my accessToken?
At the moment, I have an OpenAPI generated class, where the accessToken is a promise in all the requests. In this promise, I check if the token is expired and I fetch the new one, based on a refresh token.
I also have an AuthContext, that I use to manage my authtentication, user details, etc. (saving to localstorage, etc)
The problem is that I need somehow to access my AuthContext and to give it the new token or to logout if the token could not be refreshed, in my API class.
I do receive an error on the following code, but this is expected:
Invalid hook call. Hooks can only be called inside of the body of a function component.
My access token as promise (inside the API class)
accessToken: new Promise<string>(async (resolve, reject) => {
const tokenExpiresAt = Date.parse(model.tokenExpiration);
const {saveAuth, logout} = useAuth() // Here is the problem
// if token is expired, refresh it
if (tokenExpiresAt < Date.now()) {
this.Auth.refresh({accessToken: model.token, refreshToken: model.refreshToken})
.then((response) => {
// save new auth
saveAuth(response.data)
resolve(response.data.token);
})
.catch((error) => {
// error refreshing token, logout
logout()
reject("Token expired");
});
}
resolve(model.token);
})

Answer 1

I faced a similar problem a while ago, yes you cannot call a hook inside a hook so another approach to solve this issue is to intercept the axios response interceptor.
axiosApiInstance.interceptors.response.use((response) => {
return response
}, async function (error) {
const originalRequest = error.config;
if (error.response.status === 403 && !originalRequest._retry) {
originalRequest._retry = true;
const refreshToken = localStorage.getItem('refreshToken');
const access_token = await refreshAccessToken(refreshToken);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + access_token;
return axiosApiInstance(originalRequest);
}
return Promise.reject(error);
});
And you can implement your own refreshAccessToken function according to your usecase.