Axios interceptors token refresh for few async requests. ES6

axios-interceptors-refresh-token.js

import axios from "axios";
import { settings } from "../settings";
import { authAPI } from ".";

const request = axios.create({
  baseURL: settings.apiV1,
});

request.interceptors.request.use(
  (config) => {
    // Get token and add it to header "Authorization"
    const token = authAPI.getAccessToken();
    if (token) {
      config.headers.Authorization = token;
    }

    return config;
  },
  (error) => Promise.reject(error)
);

let loop = 0;
let isRefreshing = false;
let subscribers = [];

function subscribeTokenRefresh(cb) {
  subscribers.push(cb);
}

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

request.interceptors.response.use(undefined, (err) => {
  const {
    config,
    response: { status },
  } = err;
  const originalRequest = config;

  if (status === 401 && loop < 1) {
    loop++;
    if (!isRefreshing) {
      isRefreshing = true;
      authAPI.refreshToken().then((respaonse) => {
        const { data } = respaonse;
        isRefreshing = false;
        onRrefreshed(data.access_token);
        authAPI.setAccessToken(data.access_token);
        authAPI.setRefreshToken(data.refresh_token);
        subscribers = [];
      });
    }

    return new Promise((resolve) => {
      subscribeTokenRefresh((token) => {
        originalRequest.headers.Authorization = `Bearer ${token}`;
        resolve(axios(originalRequest));
      });
    });
  }
  return Promise.reject(err);
});

export default request;

Here's a small package I created for this one -> axios-auth-refresh.
I'd be more than glad to get your contributions, as it's pretty simple right now (it'd probably need to react on more status codes, queue the requests while the token obtaining process is running, etc.).

Thanks men you save my day.

👍

Thank you, it works perfectly with my case. It saves my f*cking ass. :)))

Tks you so much!

Why we store promise to requestSubscribers? Can't we just return it diretcly, like return new Promise(resolve => {...

Why we store promise to requestSubscribers? Can't we just return it diretcly, like return new Promise(resolve => {...

Hi Herbert 😊,

Sure. I will fix it soon)

Congrats!

Thanks a lot, Saved my day :)

Can't this end up in an infinite loop if the refresh endpoint returns a 401?

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

not working to me

For everyone, I recommended using this library instead https://www.npmjs.com/package/axios-auth-refresh