axios-auth-refresh: refreshAuthLogic is not recalled on a second failure

I had the same problem, and solution provided by @CteixeiraPW seems to work; In my code I made this change.

Before

 createAuthRefreshInterceptor(api.axiosInstance, refreshAuthLogic(api));

After

  createAuthRefreshInterceptor(api.axiosInstance, refreshAuthLogic(api), {
    pauseInstanceWhileRefreshing: true,
  });

  api.axiosInstance.interceptors.response.use(
    (response) => response,
    async (error) => {
      const request = error.config;
      if (request.skipAuthRefresh) return error;

      if (
        error &&
        error.response &&
        error.response.status === 401 &&
        error.response.headers['www-authenticate'] === 'Bearer'
      ) {
        // let's retry
        return api.axiosInstance(request);
      }

      throw error;
    }
  );

I think it was because I set pauseInstanceWhileRefreshing to true but if I remove it, the second request is sent with the old token

same problem.

1. there is failed request.
2. and another one
3. auth request (refresh access token)
4. repeated first one failed request, but not second one.

that’s the problem is.

Hello @Flyrell,

I have in my app an interceptor to add the token.

const requestNewToken = async () => {
  const action = "/token/refresh";
  const data = JSON.stringify(getToken());

  try {
    const response = await instance.post(action, data, { skipAuthRefresh: true } as AxiosAuthRefreshRequestConfig);
    return response.data;
  } catch (error: any) {
    XXXX
  }
};

//  Function that will be called to refresh authorization
const refreshAuthLogic = async (failedRequest: any) => {
  //token-expired - inactivity - refresh
  if (failedRequest && failedRequest.response && failedRequest.response.headers["token-has-expired"]) {
    const token = await requestNewToken();

    if (token) {
      setToken(token);

      failedRequest.response.config.headers["Authorization"] = `Bearer ${token}`;
    } else {
      setUserAuth(false);
    }
  } else {
    setUserAuth(false);
  }
};

createAuthRefreshInterceptor(instance, refreshAuthLogic, {
  pauseInstanceWhileRefreshing: true,
});

//this is to retry calls that were not included into the retry stack of the createAuthRefreshInterceptor
instance.interceptors.response.use(
  (response) => response,
  async (error) => {

    const request = error.config;

    if ((request as AxiosAuthRefreshRequestConfig) && (request as AxiosAuthRefreshRequestConfig).skipAuthRefresh)
      throw error;

    if (error && error.response && error.response.status === 401 && error.response.headers["token-expired"]) {
      //let's retry
      return await instance(request);
    }

    throw error;
  }
);

// Use interceptor to inject the token to requests
instance.interceptors.request.use((request) => {
  if ((request as AxiosAuthRefreshRequestConfig) && (request as AxiosAuthRefreshRequestConfig).skipAuthRefresh)
    return request;
  request.headers.Authorization = `Bearer ${getToken()}`;
  return request;
});

If I remember well, I think in your code you are intercepting every response with a 401 and the first one triggers the refreshing of the token and create an interceptor to bind all the following requests, but the problem is that by the time that you create this “createRequestQueueInterceptor” more that one request have already been sent.

 // Create interceptor that will bind all the others requests until refreshAuthCall is resolved
        createRequestQueueInterceptor(instance, cache, options);

This means you may have two or more responses with 401, the first one gets a retry with the new token but not the second one.

The first response will add the instance to the “skipInstances” list

 if (options.pauseInstanceWhileRefreshing) {
            cache.skipInstances.push(instance);
        }

But the “shouldInterceptError” will reject the second response with 401 because the instance is already in the “skipInstances” list.

if (!shouldInterceptError(error, options, instance, cache)) {
            return Promise.reject(error);
        }

This is why I think this error is happening. Please, let me know if any of my assumptions is wrong. I am not an expert in JS or React.

I was having the exact same problem. After checking the source code and understanding how it works, I did a few tests. On the first test, I have a function with 3 calls to my API using an expired token and same Axios instance. This first test showed that the execution for these request happened sequentially. This first test did not produce any error.

const getInitialData = useCallback(async () => {
    
      await dispatch(getRequest("5dff213d-f7e3-4f34-9abe-0518b0e25786"));
      await dispatch(getRequest("71412802-6a6c-4696-831f-c902560204a7"));
      await dispatch(getRequest("18279f99-1f07-418f-9c6b-d1c304eb89b3"));
    
  }, [dispatch]);

  useEffect(() => {
    getInitialData();
    //getInitialData();
    //getInitialData();
  }, [getInitialData]);

Then, I did a second test where I called the function three times. The first call to the function was executed in parallel with the execution of the second call and the third call.

const getInitialData = useCallback(async () => {
    
      await dispatch(getRequest("5dff213d-f7e3-4f34-9abe-0518b0e25786"));
      await dispatch(getRequest("71412802-6a6c-4696-831f-c902560204a7"));
      await dispatch(getRequest("18279f99-1f07-418f-9c6b-d1c304eb89b3"));
    
  }, [dispatch]);

  useEffect(() => {
    getInitialData();
    getInitialData();
    getInitialData();
  }, [getInitialData]);

Something like this.

This second test gave me the same errors like @israelKusayev (with pauseInstanceWhileRefreshing in true or false)

I am not an expert in JavaScript or Typescript. I think the responses are coming almost at the same time using the same Axios instance. Like using a different thread. The first response gets into the “refreshAuthLogic” and it creates the request interceptor that stalls any other request (when we have pauseInstanceWhileRefreshing in true). By the time when this happens, there are two more responses coming, and they will not execute the “refreshAuthLogic”.

I solved this situation adding an extra interceptor to resend those requests that where not handle by the “refreshAuthLogic” and that are not stalled by the request interceptor, to add them to the stalled requests.

//this is to retry calls that are being executed using different threads
instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const request = error.config;

    if ((request as AxiosAuthRefreshRequestConfig) && (request as AxiosAuthRefreshRequestConfig).skipAuthRefresh)
      return error;
    
    if (error && error.response && error.response.status === 401 && error.response.headers["token-expired"]) {
      //let's retry
      return await instance(request);
    }

    throw error;
  }
);

Please let me know if you get same errors and if you have a better/cleaner solution.

here is my implemention

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken && !config.headers.Authorization) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});

// Function that will be called to refresh authorization
const refreshAuthLogic = (failedRequest: any) =>
  AuthService.refreshToken(AuthService.getRefreshToken()!)
    .then(data => {
      AuthService.storeTokens(data);
      failedRequest.response.config.headers['Authorization'] = 'Bearer ' + data.accessToken;
      return Promise.resolve();
    })
    .catch(() => {
      AuthService.removeTokens();
      history.push(routes.login);
    });

createAuthRefreshInterceptor(axios, refreshAuthLogic);

my refresh token is simple POST request with no special arguments

I also see only one request after refreshToken success I’m using axios-auth-refresh 3.0.0 and axios version 0.21.0