The request does not return to its original promise and instance is not paused until refresh is complete

I was using this library with its previous versions (worked great by the way 👍 ) but I decided to update axios’s and its version because I was facing other problems. But now there is the problem that failed request due to 401 or 403 does not return to its original promise it just fires again and resolves.

Here is my logic for calling apis:

const refreshAuthLogic = (failedRequest) =>
  axios
    .post(`${process.env.API_BASE_URL}user/refresh/`, getFormData())
    .then((tokenRefreshResponse) => {
      console.log(tokenRefreshResponse.data.refresh_token)
      Cookies.set('token', tokenRefreshResponse.data.access_token, {
        expires: 1 / 24
      })
      Cookies.set('refreshToken', tokenRefreshResponse.data.refresh_token, {
        expires: 365
      })
      failedRequest.response.config.headers.Authorization = `Bearer ${
        tokenRefreshResponse.data.access_token
      }`
      return Promise.resolve()
    })
    .catch((error) => {
      // if(Cookies.get('refreshToken') == undefined && Cookies.get('token')) {
      Auth.signout()
      window.location.reload(false)
      // }
    })

const instance = axios.create({
  baseURL: process.env.API_BASE_URL
})
instance.interceptors.request.use((request) => {
  request.headers.Authorization = `Bearer ${Cookies.get('token')}`
  return request
})
createAuthRefreshInterceptor(instance, refreshAuthLogic, {
  statusCodes: [401, 403],
  pauseInstanceWhileRefreshing: true
})
export default instance

and I use the instance like:

const settingsPromise = API.get('user/settings/', {
      headers: { Authorization: `Bearer ${Cookies.get('token')}` }
    })

    const userDataPromise = API.get('user/profile/', {
      headers: { Authorization: `Bearer ${Cookies.get('token')}` }
    })

    Promise.all([settingsPromise, userDataPromise]).then((result) => {
      // other code
    })

and sometimes:

API.get('user/settings/', {
      headers: { Authorization: `Bearer ${Cookies.get('token')}` }
    }).then((result) => {
      // other code
    })

but for these calls it does not return to promise.

Also the instance is not paused until refresh is complete, even after refresh is called more requests are made and they also return 401 or 403 and there is another refresh call.

axios@0.21.1 axios-auth-refresh@3.1.0

[amcsi]

I’m also getting the same issue. Though I happened to come across a fairly simple workaround:

before:

createAuthRefreshInterceptor(
  api,
  error => {
    // Maybe the token just expired and we need to refresh it. Let's try that.
    return api
      .post('/refreshEndpoint', {refresh_token: refreshToken})
      .then(response => {
        // some success logic...
        return Promise.resolve();
      })
      .catch(() => {
        // some failure logic...
        return Promise.reject(error);
      });
  },
  // The following option doesn't seem to work.
  { pauseInstanceWhileRefreshing: true }

after (see

// Addition 1/3.
let refreshingPromise = null;

createAuthRefreshInterceptor(
  api,
  error => {
    // Addition 2/3.
    if (refreshingPromise) {
      return refreshingPromise;
    }

    // Maybe the token just expired and we need to refresh it. Let's try that.
    return api
      .post('/refreshEndpoint', {refresh_token: refreshToken})
      .then(response => {
        // some success logic...
        return Promise.resolve();
      })
      .catch(() => {
        // some failure logic...
        return Promise.reject(error);
      })
      // Addition 3/3.
      .finally(() => {
        // Clear the promise so that newer calls to this interceptor would initiate a fresh API call.
        refreshingPromise = null;
      });
  },
  // The following option doesn't seem to work.
  { pauseInstanceWhileRefreshing: true }

[ammarrush]

I tried what you said @Flyrell, it returns to the original promise now but the refresh logic is being run twice for three consecutive api calls. Also, I don’t think I need skipAuthRefresh flag because I actually don’t use the instance to call the api in refresh logic. I tried using instance in the refresh logic with skipAuthRefresh and that also didn’t work.

I changed my code a bit so here it is for reference:

const refreshAuthLogic = (failedRequest) =>
  axios.post(
    env_variables.url+'user/refresh/',
    getFormData()
  ).then((result)=>{
    logAmplitude('Token Refresh successful')
    localStorage.setItem("token", result.data.access_token);
    localStorage.setItem("refreshToken", result.data.refresh_token);
    failedRequest.response.config.headers['Authorization'] = 'Bearer ' + result.data.access_token;
    return Promise.resolve();
  })
  .catch((error)=>{
    logAmplitude('Token Refresh failed')
            
    const refreshTokVal = localStorage.getItem('refreshToken')
    ? localStorage.getItem('refreshToken')
    : 'No refresh token'
    
    logAmplitude(refreshTokVal)
    Auth.signout();
    window.location.reload(false);
  })

Create auth func:

createAuthRefreshInterceptor(instance, refreshAuthLogic, {
  statusCodes: [401, 403]
});

Example request scenario:

API.get("user/profile/")
      .then((result)=>{
          console.log("ONE SUCCESS")
          console.log(result)
          this.setState({userName: result.data.fullName})
      })

      API.get("user/profile/")
      .then((result)=>{
          console.log("TWO SUCCESS")
          console.log(result)
      })

      API.get("user/profile/")
      .then((result)=>{
          console.log("THREE SUCCESS")
          console.log(result)
    })

  What my network looks like :