Multiple Request Pause is not working

[erdemsusam]

First of all thanks for this library. Lib versions:

"axios": "^1.3.2",
"axios-auth-refresh": "^3.3.6",

First of all here is my configurationg:

 const refreshAuthLogic = async (failed) => {
    const tokenRefreshResponse = await HTTP.post('/auth/refresh', {
        refreshToken: authStore.refreshToken
    })
    try {
        console.log(failed);
        if (tokenRefreshResponse?.data?.accessToken) {
            console.log("Refresh successful")
            authStore.accessToken = tokenRefreshResponse.data.accessToken
            authStore.refreshToken = tokenRefreshResponse.data.refreshToken
            return Promise.resolve();
        } else {
            return Promise.reject("Token refresh failed")
        }

    } catch (error) {
        return Promise.reject(error);
    }
}

// Instantiate the interceptor
createAuthRefreshInterceptor(HTTP, refreshAuthLogic, {
    statusCodes: [401] // default: [ 401 ]
});

HTTP.interceptors.request.use(
    (config) => {
        const newDate = new Date();
        const dateString = newDate.toLocaleTimeString();
        console.log(dateString);
        const token = authStore.accessToken
        if (token && config.url !== "/auth/refresh") {
            config.headers["Authorization"] = 'Bearer ' + token;  // for Spring Boot back-end
        }

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

My problem is that library's request interceptor is not pausing active requests if 401 is taken. Also refresh is triggered again. This is how I call requests:

const flowReq = HTTP.get('/flows');
try {

  const response = await flowReq;
  this.flows = response.data
} catch (error) {
  console.log("error", error)
}

const projectReq = return HTTP.get('/projects/tree-select');
try {

  const response = await projectReq;
  this.projectsTree = response.data

  this.projects = this.projectsTree.map(p => ({
    projectName: p.label,
    projectCode: p.data
  }));
} catch (error) {
  console.log("error", error)
}

And axios instance is:

export const HTTP = axios.create({
    baseURL: 'http://localhost:8088/api',
    headers: {
        "Content-Type": "application/json",
    }
    //headers: authHeader()
});

As I review codes, my understanding is library pauses any request after first 401 reponse, then refresh is called. Then if refresh resolves, continues with paused requests, if refresh fail (with Pormise.reject) remaining requests canceled. I'm using Vue. Any help is appreciated, thanks.

[erdemsusam]

I have added 3 sec delay to refresh end point for debugging purposes, and Console log is like this:

[ValeriaVasilieva]

There is a special option in createAuthRefreshInterceptor

createAuthRefreshInterceptor(privateHttp, refreshAuthLogic, {
  statusCodes: [401, 403],
  **pauseInstanceWhileRefreshing: true**
})

[lekhnath]

That special option did not help @ValeriaVasilieva

[viktorkrepak]

Not sure whether we have the same problem or no, but I'm using this wonderful library in a combination with tanstack-query for managing server-side state. And when I open an IDLE tab of my app it performs a bunch of requests due to the expired queries to my API and in case the access token is expired of course every requests is 401 error and it produces the same number of refresh requests. The instance pause works for retry requests though. And after success refresh it continues performing requests

Here is the screen with some details.

Would be grateful for any help!