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));
}

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