I am trying to update the access token of my application based on the refresh token but the trick is that I am using Apollo Client. And I keep getting 401 as unauthorized every time the backend expires the token.
I'd like to know what I can do here to make it work.
const isAuthError = (statusCode: number) => [401, 403].includes(statusCode);
async function refreshToken() {
const newToken = await axiosInstance.post<{ accessToken: string }>(
'/token/refresh',
{},
{
headers: {
Authorization: `Bearer ${localStorage.getItem(refreshTokenKey)}`
}
}
);
localStorage.setItem(accessTokenKey, newToken.data.accessToken);
return newToken.data.accessToken;
}
const logoutLink = onError(({ networkError, operation, forward }) => {
if (
networkError &&
(networkError as NetworkErrorOverwrite).statusCode === 401
) {
return new Observable(observer => {
console.log('Logging out');
const subscriber = {
next: observer.next.bind(observer),
error: async (err: { statusCode: number }) => {
if (isAuthError(err.statusCode)) {
try {
await refreshToken();
observer.error(err);
} catch (refreshError) {
console.error('Failed to refresh token:', refreshError);
}
} else {
observer.error(err);
}
},
complete: observer.complete.bind(observer)
};
forward(operation).subscribe(subscriber);
});
}
});
Basically I am making a post request and setting the local storage to update the access token but it probably is something related to my logic there. I am not sure