Refresh token with a Rest request in Apollo Client

21 Views Asked by At

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

0

There are 0 best solutions below