Axios interceptors for token refreshing and more than 2 async requests available

axios-interceptors-refresh-token.js

let isRefreshing = false;
let refreshSubscribers = [];

const instance = axios.create({
  baseURL: Config.API_URL,
});

instance.interceptors.response.use(response => {
  return response;
}, error => {
  const { config, response: { status } } = error;
  const originalRequest = config;

  if (status === 498) {
    if (!isRefreshing) {
      isRefreshing = true;
      refreshAccessToken()
        .then(newToken => {
          isRefreshing = false;
          onRrefreshed(newToken);
        });
    }

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });
    return retryOrigReq;
  } else {
    return Promise.reject(error);
  }
});

subscribeTokenRefresh(cb) {
  refreshSubscribers.push(cb);
}

onRrefreshed(token) {
  refreshSubscribers.map(cb => cb(token));
}

@bionicvapourboy you can try to use a mutex for a promise creation.
https://www.npmjs.com/package/async-mutex

Hi @oceanicdev, I've solved checking if the auth token has already changed compared to the original request. The issue is related to the grey zone where a call has already failed, and a new access token has already been requested although not avaliable.

what happens to this if the refresh token call fails? Isn't that going to be an infinite loop of some sort?

@essram

what happens to this if the refresh token call fails? Isn't that going to be an infinite loop of some sort?

Failing refresh token calls respond usually with 400 (or other codes), not 401 :

401: The request has not been applied because it lacks valid authentication credentials for the target resource.

In this snippet the request is managed as long the response is 401. Otherwise no loop is involved.
Errors other than 401 must be managed based on the app logic. Eg: Logout the user and bring him to the login page

Ah that makes sense! Thank you very much! @bionic :)

Does any of above solution works for concurrent request ?

Does any of above solution works for concurrent request ?

Yes. If token is invalid, all requests goes to the queue -> refreshing token -> again same requests.

Thanks,

So we already have mechanism to send response back to source method?

@essramos

what happens to this if the refresh token call fails? Isn't that going to be an infinite loop of some sort?

As mentioned aboved, this technically would most likely not happen assuming you're using a token based authentication to where the browser can read the token and renew the token.

If however, you're using something like a corporate SSO that forces you to get tokens via an iframe (and http-only access) you would need to add an infinite loop guard.

You could easily do that by adding a property to the error.config itself, like retries... which iterates by 1 every attempt.
If the retries exceeds 3, return an error instead of returning the same request.

Use Semaphores instead of a variable

I really like this approach: khinkali/cockpit#3 (comment)

Hi, I'm pretty new to React. I am building a RN app, trying to persist the authentication and refresh the token when needed/at every request. Where should this code be added and called?

Have a look at this gist...

Thank you for this gist. There is mine update using redux action for token refresh.

let isAlreadyFetchingAccessToken = false
let subscribers = []

function onAccessTokenFetched(access_token) {
  subscribers = subscribers.filter(callback => callback(access_token))
}

function addSubscriber(callback) {
  subscribers.push(callback)
}

axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  const { config, response: { status } } = error
  const originalRequest = config

  if (status === 401) {
    if (!isAlreadyFetchingAccessToken) {
      isAlreadyFetchingAccessToken = true
      store.dispatch("Auth/refreshToken").then((access_token) => {
        isAlreadyFetchingAccessToken = false
        onAccessTokenFetched(access_token)
      })
    }

    const retryOriginalRequest = new Promise((resolve) => {
      addSubscriber(access_token => {
        originalRequest.headers.Authorization = 'Bearer ' + access_token
        resolve(axios(originalRequest))
      })
    })
    return retryOriginalRequest
  }
  return Promise.reject(error)
})

Thanx Bro, I managed to work with this code in my Vue Project using Vuex Store dispatch and Axios. @FilipBartos

retryOriginalRequest will never be resolved if refresh token request fails

Thanks for this.

How to redirect back to /login after any 401 occurred and clear the tokens? Where to place that logic? Can you help in this regard.Thanks

The codes documented here are all convoluted and hard to follow, and remind me of callback hell. Here is the my token refresh code based on async/await syntax. Like @Flyrell's version, my version doesn't rely on queue.

Also I added the logic to avoid infinite loops and handle redirect to /login.

export function installInterceptors (store) {
  request.interceptors.response.use(
    resp => resp.data,

    async error => {
      /* refresh token and retry request once more on 401
         else log user out
      */
      const {config: originalReq, response} = error

      // skip refresh token request, retry attempts to avoid infinite loops
      if (originalReq.url !== 'auth/jwt/refresh/' && !originalReq.isRetryAttempt && response && response.status === 401) {
        try {
          await store.dispatch('user/refreshToken')
          originalReq.isRetryAttempt = true
          originalReq.headers['Authorization'] = request.defaults.headers.common['Authorization']
          return await request.request(originalReq)
        } catch (e) {
          // log user out if fail to refresh (due to expired or missing token) or persistent 401 errors from original requests
          if (e === 'user has not logged in' || (e.response && e.response.status === 401)) {
            store.dispatch('user/logout', true)
          }
          // suppress original error to throw the new one to get new information
          throw e
        }
      } else {
        throw error
      }
    }
  )
}

action in your store:

async refreshToken ({ state, dispatch }) {
    let newTokenObj = null
    const refreshToken = state.tokens.refresh

    if (!refreshToken) {
      throw 'user has not logged in'
    }

    // use private variable to keep 1 active JWT refresh request at any time.
    this.refreshPromise = this.refreshPromise || authService.jwtRefresh({ refresh: refreshToken })

    // get new access token
    try {
      newTokenObj = await this.refreshPromise
    } finally {
      this.refreshPromise = null
    }

    dispatch('setTokens', newTokenObj)
}

setTokens action should save the token to store, and/or a persistent storage, and set the bearer token header of axios

The codes documented here are all convoluted and hard to follow, and remind me of callback hell. Here is the my token refresh code based on async/await syntax. Like @Flyrell's version, my version doesn't rely on queue.

Also I added the logic to avoid infinite loops and handle redirect to /login.

export function installInterceptors (store) {
  request.interceptors.response.use(
    resp => resp.data,

    async error => {
      /* refresh token and retry request once more on 401
         else log user out
      */
      const {config: originalReq, response} = error

      // skip refresh token request, retry attempts to avoid infinite loops
      if (originalReq.url !== 'auth/jwt/refresh/' && !originalReq.isRetryAttempt && response && response.status === 401) {
        try {
          await store.dispatch('user/refreshToken')
          originalReq.isRetryAttempt = true
          originalReq.headers['Authorization'] = request.defaults.headers.common['Authorization']
          return await request.request(originalReq)
        } catch (e) {
          // log user out if fail to refresh (due to expired or missing token) or persistent 401 errors from original requests
          if (e === 'user has not logged in' || (e.response && e.response.status === 401)) {
            store.dispatch('user/logout', true)
          }
          // suppress original error to throw the new one to get new information
          throw e
        }
      } else {
        throw error
      }
    }
  )
}

action in your store:

async refreshToken ({ state, dispatch }) {
    let newTokenObj = null
    const refreshToken = state.tokens.refresh

    if (!refreshToken) {
      throw 'user has not logged in'
    }

    // use private variable to keep 1 active JWT refresh request at any time.
    this.refreshPromise = this.refreshPromise || authService.jwtRefresh({ refresh: refreshToken })

    // get new access token
    try {
      newTokenObj = await this.refreshPromise
    } finally {
      this.refreshPromise = null
    }

    dispatch('setTokens', newTokenObj)
}

setTokens action should save the token to store, and/or a persistent storage, and set the bearer token header of axios

Hey , looks great . can you do full code with authService.jwtRefresh ?
Thanks

Hey , looks great . can you do full code with authService.jwtRefresh ?
Thanks

that function is just about firing a request to a backend server URL, it's different for every project, no point showing it.

@kakarukeys Thank you, I will try it

i need to reject the original err if refrest token failed, and some time the dead loop
also notice if you use nuxtjs and the nuxt axios module, use api.request replace api.$request, because api.$request only get the response data attribute.

we also need filte out the refresh request itself by url or other attribute
in store action dispatched i just use another axios instance so dont need it.

import _ from 'lodash'

let isRefreshing = false
let refreshQueue = []
const retries = 1

export default function ({ $axios, store }, inject) {
  const api = $axios._create()

  api.onResponseError((err) => {
    const {
      config: orgConfig,
      response: { status },
    } = err

    if (status !== 401) {
      return Promise.reject(err)
    }

    orgConfig._retry =
      typeof orgConfig._retry === 'undefined' ? 0 : ++orgConfig._retry

    if (orgConfig._retry === retries) {
      return Promise.reject(err)
    }

    if (!isRefreshing) {
      isRefreshing = true

      store
        .dispatch('user/refresh')
        .then((res) => {
          refreshQueue.forEach((v) => v.resolve(res))
          refreshQueue = []
        })
        .catch(() => {
          refreshQueue.forEach((v) => v.reject(err))
          refreshQueue = []
        })
        .finally(() => {
          isRefreshing = false
        })
    }

    return new Promise((resolve, reject) => {
      refreshQueue.push({
        resolve: (res) => {
          const config = _.merge(orgConfig, res)
          resolve(api.request(config))
        },
        reject: (err) => {
          reject(err)
        },
      })
    })
  })

  inject('api', api)
}

You just saved my day @garryshield

you da man @garryshield.

love u @garryshield

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });

this part of the code should be before the if (!isRefreshing) block . if not the first failed request won't be retried

@ifier Have you found a solution to the problem? I have the same thing now

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });

this part of the code should be before the if (!isRefreshing) block . if not the first failed request won't be retried

thanks, that's true

Can someone explain how to show message toast just once if for example we get from several requests 401 status at the same time ?
How to write correctly in interceptor it ? - with toggle it doesn't work - because it always jump to check by 401 status and change toggle every bad request that you get

const responseInterceptor = axiosAPI.interceptors.response.use(
            response => response,
            async (error) => {
                const {config: originalRequest, response: {status}} = error
                if (status === 401 || status === 403) {
                   if (!isFetchingToken) {
                       isFetchingToken = true
                       returnMessage(status).then(() => {
                           isFetchingToken = false
                       })
                }
                return Promise.reject(error)
            }
        )

I just want to one error message - and it doesn't matter how many requests I use
I would be grateful if someone could advise)

here is my axios instance file, all requests perform sequentially and if i get one 401 response, all other go to queue and relieve only after token refresh
so i don't get more then one 401

import axios, { AxiosError } from 'axios';
import { Store } from 'redux';
import axiosMiddlewareFactory from 'redux-axios-middleware';
import AppConfig from '~/config/appConfig';
import needError from '~/helpers/needError';
import { networkOffline, showError } from '~/modules/app/actions/AppActions';
import {
  IRefreshTokenData,
  logout,
  refreshToken,
  refreshTokenSuccess,
} from '~/modules/auth/actions/AuthActions';
import {
  getIsAuthenticated,
  getRefreshToken,
  getToken,
} from '~/modules/auth/AuthSelectors';
import { ErrorCodes } from '~/modules/auth/models';
import { getProfile } from '~/modules/settings/SettingsSelector';

type IRequestCb = (token: string) => void;

export const axiosClient = axios.create({
  baseURL: AppConfig.apiUrl,
  responseType: 'json',
});

let isRefreshing = false;
let refreshSubscribers: IRequestCb[] = [];
let refreshRetry = true;

const subscribeTokenRefresh = (cb: IRequestCb) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map(cb => cb(token));
};

const axiosMiddlewareOptions = {
  interceptors: {
    request: [
      ({ getState }: Store, request: any) => {
        const state = getState();
        const token = getToken(state);

        if (token) {
          request.headers.authorization = `Bearer ${token}`;
        }

        return request;
      },
    ],
    response: [
      {
        error: function ({ getState, dispatch }: Store, error: AxiosError) {
          const state = getState();
          const accessToken = getToken(state);
          const profile = getProfile(state);

          const { teamId, roleId } = profile || {};
          const isAuthenticated = getIsAuthenticated(state);

          if (error?.response?.status === 401) {
            const refresh = getRefreshToken(state);
            const originalRequest = error.config;

            const retryOrigReq = new Promise(resolve => {
              subscribeTokenRefresh((newToken: string) => {
                // replace the expired token and retry
                if (originalRequest.headers) {
                  originalRequest.headers.authorization = `Bearer ${newToken}`;
                }
                resolve(axios(originalRequest));
              });
            });

            if (!isRefreshing && accessToken && refresh && roleId && teamId) {
              isRefreshing = true;

              refreshToken({
                accessToken,
                refreshToken: refresh,
                roleId,
                teamId,
              })
                .then(
                  ({
                    accessToken: newAccessToken,
                    refreshToken: newRefreshToken,
                  }: IRefreshTokenData) => {
                    if (originalRequest.headers) {
                      originalRequest.headers.authorization = `Bearer ${newAccessToken}`;
                      dispatch(
                        refreshTokenSuccess({
                          accessToken: newAccessToken,
                          refreshToken: newRefreshToken,
                          roleId,
                          teamId,
                        }),
                      );
                      refreshRetry = true;

                      onRefreshed(newAccessToken);
                    }
                  },
                )
                .catch(e => {
                  Bugsnag.notify(e);
                  if (
                    e.response?.data?.error &&
                    needError(e.response?.config)
                  ) {
                    dispatch(showError(e.response?.data.error));
                  } else if (refreshRetry) {
                    refreshRetry = false;
                  } else {
                    dispatch(
                      showError(
                        'Unable to restore session. Please login again',
                      ),
                    );
                    dispatch(logout());
                  }
                  return Promise.reject(error);
                })
                .finally(() => {
                  isRefreshing = false;
                });
            }

            return retryOrigReq;
          } else if (error?.response?.status === 403) {
            // user deactivated
            dispatch(
              showError(
                'Your account has been locked. Contact your support person to unlock it, then try again.',
              ),
            );
            dispatch(logout());
          } else if (
            [
              ErrorCodes.passwordExpired,
              ErrorCodes.accountDeleted,
              ErrorCodes.accountLocked,
            ].includes(error?.code as ErrorCodes)
          ) {
            if (isAuthenticated) {
              // password expired, account deleted, locked
              dispatch(showError(error.message));
              dispatch(logout());
            }
          } else {
            if (error.code === ErrorCodes.network) {
              dispatch(networkOffline());
            } else if (
              ((error.response?.data as { error: string })?.error ||
                error.message) &&
              needError(error.response?.config)
            ) {
              dispatch(
                showError(
                  (error.response?.data as { error: string })?.error ||
                    error.message,
                ),
              );
            }

            return Promise.reject(error);
          }
        },
      },
    ],
  },
};

const axiosMiddleware = axiosMiddlewareFactory(
  axiosClient,
  axiosMiddlewareOptions,
);

export default axiosMiddleware;

FishManHell

here is my axios instance file, all requests perform sequentially and if i get one 401 response, all other go to queue and relieve only after token refresh so i don't get more then one 401

import axios, { AxiosError } from 'axios';
import { Store } from 'redux';
import axiosMiddlewareFactory from 'redux-axios-middleware';
import AppConfig from '~/config/appConfig';
import needError from '~/helpers/needError';
import { networkOffline, showError } from '~/modules/app/actions/AppActions';
import {
  IRefreshTokenData,
  logout,
  refreshToken,
  refreshTokenSuccess,
} from '~/modules/auth/actions/AuthActions';
import {
  getIsAuthenticated,
  getRefreshToken,
  getToken,
} from '~/modules/auth/AuthSelectors';
import { ErrorCodes } from '~/modules/auth/models';
import { getProfile } from '~/modules/settings/SettingsSelector';

type IRequestCb = (token: string) => void;

export const axiosClient = axios.create({
  baseURL: AppConfig.apiUrl,
  responseType: 'json',
});

let isRefreshing = false;
let refreshSubscribers: IRequestCb[] = [];
let refreshRetry = true;

const subscribeTokenRefresh = (cb: IRequestCb) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map(cb => cb(token));
};

const axiosMiddlewareOptions = {
  interceptors: {
    request: [
      ({ getState }: Store, request: any) => {
        const state = getState();
        const token = getToken(state);

        if (token) {
          request.headers.authorization = `Bearer ${token}`;
        }

        return request;
      },
    ],
    response: [
      {
        error: function ({ getState, dispatch }: Store, error: AxiosError) {
          const state = getState();
          const accessToken = getToken(state);
          const profile = getProfile(state);

          const { teamId, roleId } = profile || {};
          const isAuthenticated = getIsAuthenticated(state);

          if (error?.response?.status === 401) {
            const refresh = getRefreshToken(state);
            const originalRequest = error.config;

            const retryOrigReq = new Promise(resolve => {
              subscribeTokenRefresh((newToken: string) => {
                // replace the expired token and retry
                if (originalRequest.headers) {
                  originalRequest.headers.authorization = `Bearer ${newToken}`;
                }
                resolve(axios(originalRequest));
              });
            });

            if (!isRefreshing && accessToken && refresh && roleId && teamId) {
              isRefreshing = true;

              refreshToken({
                accessToken,
                refreshToken: refresh,
                roleId,
                teamId,
              })
                .then(
                  ({
                    accessToken: newAccessToken,
                    refreshToken: newRefreshToken,
                  }: IRefreshTokenData) => {
                    if (originalRequest.headers) {
                      originalRequest.headers.authorization = `Bearer ${newAccessToken}`;
                      dispatch(
                        refreshTokenSuccess({
                          accessToken: newAccessToken,
                          refreshToken: newRefreshToken,
                          roleId,
                          teamId,
                        }),
                      );
                      refreshRetry = true;

                      onRefreshed(newAccessToken);
                    }
                  },
                )
                .catch(e => {
                  Bugsnag.notify(e);
                  if (
                    e.response?.data?.error &&
                    needError(e.response?.config)
                  ) {
                    dispatch(showError(e.response?.data.error));
                  } else if (refreshRetry) {
                    refreshRetry = false;
                  } else {
                    dispatch(
                      showError(
                        'Unable to restore session. Please login again',
                      ),
                    );
                    dispatch(logout());
                  }
                  return Promise.reject(error);
                })
                .finally(() => {
                  isRefreshing = false;
                });
            }

            return retryOrigReq;
          } else if (error?.response?.status === 403) {
            // user deactivated
            dispatch(
              showError(
                'Your account has been locked. Contact your support person to unlock it, then try again.',
              ),
            );
            dispatch(logout());
          } else if (
            [
              ErrorCodes.passwordExpired,
              ErrorCodes.accountDeleted,
              ErrorCodes.accountLocked,
            ].includes(error?.code as ErrorCodes)
          ) {
            if (isAuthenticated) {
              // password expired, account deleted, locked
              dispatch(showError(error.message));
              dispatch(logout());
            }
          } else {
            if (error.code === ErrorCodes.network) {
              dispatch(networkOffline());
            } else if (
              ((error.response?.data as { error: string })?.error ||
                error.message) &&
              needError(error.response?.config)
            ) {
              dispatch(
                showError(
                  (error.response?.data as { error: string })?.error ||
                    error.message,
                ),
              );
            }

            return Promise.reject(error);
          }
        },
      },
    ],
  },
};

const axiosMiddleware = axiosMiddlewareFactory(
  axiosClient,
  axiosMiddlewareOptions,
);

export default axiosMiddleware;

FishManHell

Hi, I hope you're doing well.
can you please show an example that how to make a request?
could I just use axios client?

thanks