How to redirect after failed refresh token
I am using
react-queryreact-query along with axiosaxios to communicate with my API. This is the interceptor I have built, to refresh the Access Token when it expires:const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
const client = axios.create({
baseURL: BASE_URL,
withCredentials: true,
headers: { 'Content-Type': 'application/json' },
});
const onFulfilled = (response) => response;
const onRejected = async (error) => {
const originalRequest = error.config;
// Check if the error is due to an expired token
const is401 = error.response.status === 401;
const isExpired = error.response.data.code === 'ACCESS_TOKEN_EXPIRED';
const isRetry = originalRequest._retry;
if (is401 && isExpired && !isRetry) {
// If the error is due to an expired token and the request hasn't been retried yet
originalRequest._retry = true; // Mark this request as already tried
try {
// Attempt to refresh the token by calling the '/refresh-token' endpoint.
await client.post('/v1/auth/refresh-token');
// The browser will automatically handle the new token as it's stored in an HttpOnly cookie.
// Retry the original request. Axios will automatically include the refreshed token (stored in HttpOnly cookie) with this request.
return client(originalRequest);
} catch (refreshError) {
// If token refresh fails, handle accordingly (e.g., redirect to login)
console.log('Refresh token failed');
console.log(refreshError);
return Promise.reject(refreshError);
}
}
// For any other error, just return it
return Promise.reject(error);
};
client.interceptors.response.use(onFulfilled, onRejected);const BASE_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
const client = axios.create({
baseURL: BASE_URL,
withCredentials: true,
headers: { 'Content-Type': 'application/json' },
});
const onFulfilled = (response) => response;
const onRejected = async (error) => {
const originalRequest = error.config;
// Check if the error is due to an expired token
const is401 = error.response.status === 401;
const isExpired = error.response.data.code === 'ACCESS_TOKEN_EXPIRED';
const isRetry = originalRequest._retry;
if (is401 && isExpired && !isRetry) {
// If the error is due to an expired token and the request hasn't been retried yet
originalRequest._retry = true; // Mark this request as already tried
try {
// Attempt to refresh the token by calling the '/refresh-token' endpoint.
await client.post('/v1/auth/refresh-token');
// The browser will automatically handle the new token as it's stored in an HttpOnly cookie.
// Retry the original request. Axios will automatically include the refreshed token (stored in HttpOnly cookie) with this request.
return client(originalRequest);
} catch (refreshError) {
// If token refresh fails, handle accordingly (e.g., redirect to login)
console.log('Refresh token failed');
console.log(refreshError);
return Promise.reject(refreshError);
}
}
// For any other error, just return it
return Promise.reject(error);
};
client.interceptors.response.use(onFulfilled, onRejected);