Automatically set auth header and refresh tokens with Axios

This will be a quickie. Every time I have a frontend project with authentication, I use an Axios interceptor to automatically set the Authorization header on every request and refresh the access token when it expires.

Here’s the code that I keep reusing for my Axios interceptor:

axios.interceptors.request.use(
  async function (config) {
    if (config.__skipAuth) {
      return config;
    }
    let state = store.getState();
    if (state.auth.authenticated) {
      let access = state.auth.tokens.access;
      let expires = moment(access.expires);
      if (expires.diff(moment()) > 0) {
        config.headers["Authorization"] = `Bearer ${access.token}`;
      } else {
        let refresh = state.auth.tokens.refresh;
        expires = moment(refresh.expires);
        if (expires.diff(moment()) > 0) {
          let res = await axios.post(
            api + "/v1/auth/refresh-tokens",
            {
              refreshToken: refresh.token,
            },
            {
              __skipAuth: true,
            }
          );
          if (res.status === 200) {
            store.dispatch({
              type: ACTION_TOKENS_UPDATED_SUCCESS,
              payload: res.data,
            });
            access = res.data.access;
            config.headers["Authorization"] = `Bearer ${access.token}`;
            return config;
          } else {
            store.dispatch(forceLogoutAction());
            throw new Error(
              "access token is expired and couldnt get it refreshed"
            );
          }
        } else {
          store.dispatch(forceLogoutAction());
          throw new Error("both access token and refresh token are expired");
        }
      }
    }
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

I hope it comes in handy, until next time!