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

    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

you need to clear array after callbacks

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