The art of using Axios interceptors for seamless asynchronous logins

Question

The art of using Axios interceptors for seamless asynchronous logins

Token authentication is being implemented in my application. The access token expires after a certain time and is then refreshed using a refresh token.

Axios is used for API calls, with an interceptor set up to handle 401 responses:

axios.interceptors.response.use(undefined, function (err) {
  if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
    serviceRefreshLogin(
      getRefreshToken(),
      success => { setTokens(success.access_token, success.refresh_token) },
      error => { console.log('Refresh login error: ', error) }
    )
    err.config.__isRetryRequest = true
    err.config.headers.Authorization = 'Bearer ' + getAccessToken()
    return axios(err.config);
  }
  throw err
})

When a 401 response is intercepted, a login is performed along with retrying the original failed request using the fresh tokens. However, there seems to be an issue where the retry happens with the old expired credentials as the then block of serviceRefreshLogin executes later than the getAccessToken() in the interceptor.

The functions getAccessToken() and getRefreshToken() retrieve the stored tokens from the browser's storage mechanisms such as localStorage or cookies.

What steps can be taken to ensure that statements are executed only after a promise returns successfully?

(For more context, refer to this Github issue: https://github.com/mzabriskie/axios/issues/266)

javascript ajax authentication promise axios

Answer 1

Answer №1

Simply use a different promise approach :D

axios.interceptors.response.use(undefined, function (err) {
    return new Promise(function (resolve, reject) {
        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            serviceRefreshLogin(
                getRefreshToken(),
                success => { 
                        setTokens(success.access_token, success.refresh_token) 
                        err.config.__isRetryRequest = true
                        err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                        axios(err.config).then(resolve, reject);
                },
                error => { 
                    console.log('Refresh login error: ', error);
                    reject(error); 
                }
            );
        }
        throw err;
    });
});

If your environment does not support promises, consider using a polyfill like https://github.com/stefanpenner/es6-promise

Alternatively, you could simplify the code by rewriting getRefreshToken to return a promise

axios.interceptors.response.use(undefined, function (err) {

        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            return getRefreshToken()
            .then(function (success) {
                setTokens(success.access_token, success.refresh_token);                   
                err.config.__isRetryRequest = true;
                err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                return axios(err.config);
            })
            .catch(function (error) {
                console.log('Refresh login error: ', error);
                throw error;
            });
        }
        throw err;
});

See a demo here: https://plnkr.co/edit/0ZLpc8jgKI18w4c0f905?p=preview

Answer 2

Simply use a different promise approach :D

axios.interceptors.response.use(undefined, function (err) {
    return new Promise(function (resolve, reject) {
        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            serviceRefreshLogin(
                getRefreshToken(),
                success => { 
                        setTokens(success.access_token, success.refresh_token) 
                        err.config.__isRetryRequest = true
                        err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                        axios(err.config).then(resolve, reject);
                },
                error => { 
                    console.log('Refresh login error: ', error);
                    reject(error); 
                }
            );
        }
        throw err;
    });
});

If your environment does not support promises, consider using a polyfill like https://github.com/stefanpenner/es6-promise

Alternatively, you could simplify the code by rewriting getRefreshToken to return a promise

axios.interceptors.response.use(undefined, function (err) {

        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            return getRefreshToken()
            .then(function (success) {
                setTokens(success.access_token, success.refresh_token);                   
                err.config.__isRetryRequest = true;
                err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                return axios(err.config);
            })
            .catch(function (error) {
                console.log('Refresh login error: ', error);
                throw error;
            });
        }
        throw err;
});

See a demo here: https://plnkr.co/edit/0ZLpc8jgKI18w4c0f905?p=preview

Answer 3

Answer №2

A more efficient approach would be to handle the token issuance within the request rather than the response. This can prevent unnecessary server calls when the access token has expired. You can refer to this insightful article for more details:

function manageToken() {
  return new Promise((resolve, reject) => {
    return client({
      ...
    }).then((response) => {
      resolve(response);
    }).catch((err) => {
      reject(err);
    });
  });
}

client.interceptors.request.use((config) => {
  let originalRequest = config;
  if (tokenIsExpired && path_is_not_login) {
    return manageToken().then((token) => {
      originalRequest['Authorization'] = 'Bearer ' + token;
      return Promise.resolve(originalRequest);
    });
  }
  return config;
}, (err) => {
  return Promise.reject(err);
});

Answer 4

A more efficient approach would be to handle the token issuance within the request rather than the response. This can prevent unnecessary server calls when the access token has expired. You can refer to this insightful article for more details:

function manageToken() {
  return new Promise((resolve, reject) => {
    return client({
      ...
    }).then((response) => {
      resolve(response);
    }).catch((err) => {
      reject(err);
    });
  });
}

client.interceptors.request.use((config) => {
  let originalRequest = config;
  if (tokenIsExpired && path_is_not_login) {
    return manageToken().then((token) => {
      originalRequest['Authorization'] = 'Bearer ' + token;
      return Promise.resolve(originalRequest);
    });
  }
  return config;
}, (err) => {
  return Promise.reject(err);
});

The art of using Axios interceptors for seamless asynchronous logins

Answer №1

Answer №2

Similar questions

Display a Popup at 5PM without the need for a page refresh, updating in real-time

Typescript version 2 is facing difficulties in resolving an external node module

Is there a way to customize the directory that BABYLON.SceneLoader scans for textures?

in node.js, virtual machine scripts can import modules using the require function

Error in JavaScript: addition of all numbers not functioning properly within a loop

Leveraging Javascript to access the Google Distance Matrix API

Exploring revisions within the MongoDB database

Utilize Angular.js or JavaScript to swap out one string with another

Tips for extracting the team member field value, which is a classification in Sitefinity 12 web services, through the use of OData and JavaScript

The div remains unchanged when the button is clicked

More efficient methods for handling dates in JavaScript

Response from the AJAX server

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

Verify whether the element is capable of being scrolled sideways

How is it that when a function is called with just one parameter, it ends up receiving the entire element?

Sharing Global Variables in Node.js: What's the Best Way to Pass Them into Required Files?

Javascript: Accessing a shared variable within the class

Tips for minimizing typing lag in text fields using react-redux

Creating the property 'label' on a string may lead to an error, especially on objects

Unlock the power of Angular pipes in window.open with URL parameters!