Apollo refresh auth token link. It tries to refresh the user access token on the fly when API throws out an UNAUTHENTICATED error. If multiple requests fail at the same time, it queues them to re-try them later if we are able to get a new access token, otherwise we log out the user and redirect him to the login page.

apollo-refreshToken-link.js

import { onError } from 'apollo-link-error';
import { Observable } from 'apollo-link';

import { buildAuthHeader } from 'utils/requests';
import { getProvider as getGlobalProvider } from 'GlobalState';

let isFetchingToken = false;
let tokenSubscribers = [];
function subscribeTokenRefresh(cb) {
  tokenSubscribers.push(cb);
}
function onTokenRefreshed(err) {
  tokenSubscribers.map(cb => cb(err));
}

/* eslint-disable consistent-return */
const refreshAuthTokenLink = () =>
  onError(
    ({ graphQLErrors, networkError, operation, response, forward }) =>
      new Observable(async observer => {
        if (graphQLErrors) {
          graphQLErrors.map(async ({ extensions }, index) => {
            switch (extensions.code) {
              case 'UNAUTHENTICATED': {
                const retryRequest = () => {
                  operation.setContext({
                    headers: {
                      ...headers,
                      Authorization: buildAuthHeader(
                        globalProvider.authAccessToken(),
                      ).Authorization,
                    },
                  });

                  const subscriber = {
                    next: observer.next.bind(observer),
                    error: observer.error.bind(observer),
                    complete: observer.complete.bind(observer),
                  };

                  return forward(operation).subscribe(subscriber);
                };

                const { headers } = operation.getContext();
                const globalProvider = await getGlobalProvider();

                if (!isFetchingToken) {
                  isFetchingToken = true;

                  try {
                    await globalProvider.refreshAccessTokenReq();

                    isFetchingToken = false;
                    onTokenRefreshed(null);
                    tokenSubscribers = [];

                    return retryRequest();
                  } catch (e) {
                    onTokenRefreshed(
                      new Error('Unable to refresh access token'),
                    );

                    tokenSubscribers = [];
                    isFetchingToken = false;

                    await globalProvider.logOut({ isForced: true });
                    return observer.error(graphQLErrors[index]);
                  }
                }

                const tokenSubscriber = new Promise(resolve => {
                  subscribeTokenRefresh(errRefreshing => {
                    if (!errRefreshing) return resolve(retryRequest());
                  });
                });

                return tokenSubscriber;
              }
              default:
                return observer.next(response);
            }
          });
        }

        if (networkError) {
          return observer.error(networkError);
        }
      }),
  );

export default refreshAuthTokenLink;

I tripped over this so badly my face still hurts: If you want to skip the operation, don't do return null but run observer.error(networkError) instead. Otherwise it'll get stuck and the client.query Promise will never get resolved.

@d4rky-pl oh my bad, thank you. I updated it.

Hey please can you explain what is, or maybe to include those files/functions too: buildAuthHeader, getProvider.
I presume that utils/requests is fetch to auth server to get new access token or?? But I really can't tell what is globalProvider ..

@grgurev

Hey please can you explain what is, or maybe to include those files/functions too: buildAuthHeader, getProvider.
I presume that utils/requests is fetch to auth server to get new access token or?? But I really can't tell what is globalProvider ..

buildAuthHeader is just a simple function I use to build the authorization header: https://github.com/AMGAVentures/saas-boilerplate/blob/develop/packages/app/src/utils/requests.js

getProvider is where I keep my global application state (user authentication/profile state..etc) check out more about it here: https://github.com/AMGAVentures/saas-boilerplate/blob/develop/packages/app/src/GlobalState.js.

You don't need them to make it works.. you can refactor/tweak those part as you need.

I've been struggling to get my refresh token logic to work for multiple failed request for a couple days now, and this finally solved it for me. Thank you for sharing this!