How to handle 401 (Authentication Error) in axios and react?

Question

I have one file request.js which contains wrapper for axios ajax request. I am calling request function from multiple react components and when one of the request fails I want to refresh the token and retry all the failed requests again. I can use intercepters, but I don't know how to implement it. Please help.

request.js

 var client = axios.create({
   baseURL: 'http://192.168.1.3:3000',
     headers: {
     appID: 8,
     version: "1.1.0",
     empID: localStorage.getItem('empID'),
     token: localStorage.getItem('accessToken')
    }
 });

 const request = function(options) {
     const onSuccess = function(response) {
         console.debug('Request Successful!', response);
         return response.data;
     } 
     const onError = function(error) {
         console.error('Request Failed:', error.config);
         if (error.response) {
             console.error('Status:',  error.response.status);
             console.error('Data:',    error.response.data);
             console.error('Headers:', error.response.headers);
         } else {
             console.error('Error Message:', error.message);
         }

         return Promise.reject(error.response || error.message);
     }

     return client(options)
         .then(onSuccess)
         .catch(onError);
         options
 }

 export default request;

I catch 401 using this method: axios.post('/endpoint').then(...).catch(function (error) { console.log(error.response.status) //401 console.log(error.response.data.error) // Please Authenticate }) — Muhammad Shahzad
– Muhammad Shahzad, Commented Dec 31, 2020 at 6:24
Not sure when this became available but for today every axios api method has AxiosRequestConfig. So you can post with the following status validator axios.post('https://google.com/auth', {login: '[email protected]', pswd:'hundredfrogssingatnight'}, {validateStatus: (status) => status >= 200 && status < 300}). This prevents axios from throwing an error. — kolyaseg
– kolyaseg, Commented Oct 15, 2024 at 17:09

Pram · Accepted Answer · 2019-12-23 11:24:31Z

148

If you want to use interceptors to handle 401 error here is code snippet.

axios.interceptors.response.use(response => {
   return response;
}, error => {
  if (error.response.status === 401) {
   //place your reentry code
  }
  return error;
});

edited Dec 23, 2019 at 11:24

answered Nov 10, 2017 at 6:29

Pram

2,5092 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

estani Over a year ago

Did this change? response is always undefined for 401, I get a Network Error in Axios instead...

LittleTiger Over a year ago

@estani Did you figure it out? Same for me, due to 403 i'm getting Network Error and Axios error contains no response nor status.

Pram Over a year ago

@LittleTiger from server side if you don't get any response other than status, then this approach won't work. If you want to use the above approach then please send response with status. ie. res.status(401).send("message") or res.status(401).json({})

Taras Kryvko Over a year ago

@estani Did you find a solution?

Ronald Coarite Over a year ago

I am change return error to return Promise.reject(error);

|

estani · Accepted Answer · 2020-03-27 11:19:56Z

22

This works:

// Add a 401 response interceptor
window.axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    if (401 === error.response.status) {
        // handle error: inform user, go to login, etc
    } else {
        return Promise.reject(error);
    }
});

Extracted from: https://gist.github.com/yajra/5f5551649b20c8f668aec48549ef5c1f

I had this extra issue:

"Network Error" without any response

tl;dr - It was a problem with CORS and how it was setup, so axios never got the information back from the browser. You have to sort it out from the server side.

Description

if you have a similar problem, you'll see it in the browser console. The browser will prevent you from accessing a different url over ajax.

In my particular case (node.js - express) was the order of the filter, the CORS filter (dev environment) was added after the handler for this particular request, so the server wasn't sending the proper CORS headers at the time and thus the browser wasn't even allowing the request to take place (there was no call to the server whatsoever, thus no error object got returned).

answered Mar 27, 2020 at 11:19

estani

27.1k2 gold badges106 silver badges85 bronze badges

2 Comments

Jason Jun Ge Over a year ago

Thanks for the notes about the "Network Error" without any response issue. I got the same problem and your explanation helped!

AlxVallejo Over a year ago

Where do you put this code?

Dmitriy Popov · Accepted Answer · 2023-07-03 09:54:07Z

I got it working with the following code:

import axios from 'axios';
import config from '../../configuration.json';
import qs from 'qs';

const baseURL = config['baseUrl_local'];
let authTokenRequest;

/**
  * @description axios instance for ajax requests
*/ 

var client = axios.create({
    baseURL: baseURL,
    headers: {
        appID: 8,
        version: "1.1.0",
        empID: localStorage.getItem('empID'),
        token: localStorage.getItem('accessToken')
    }
});

/**
 * @description this method calls a requestNewToken method to issue a 
 new token to the client
*/ 

 function getAuthToken() {
   if (!authTokenRequest) {
     authTokenRequest = requestNewToken();
     authTokenRequest.then(resetAuthTokenRequest, resetAuthTokenRequest);
   }

   return authTokenRequest;
 }

/**
  * @description this method requests the server to issue a new token, 
  the server response is updated in local storage accessToken
*/ 

function requestNewToken() {
  var newToken = request({
  method: "post",
  url: '/sign-in',
  data:  qs.stringify({
         "userName":localStorage.getItem('userName'),
         "password":localStorage.getItem('password')
         })  
  }).then((res)=>{
  if(res.status == "success"){
    localStorage.setItem('accessToken',res.data.accessToken);
    //if featureArray is present in response object, update the 
    featureArray in local storage
    if(res.data.features){
      localStorage.setItem(
      'featureArray',
     JSON.stringify(res.data.features));
    }
    client = axios.create({
     baseURL: baseURL,
     headers: {
          appID: 8,
          version: "1.1.0",
          empID: localStorage.getItem('empID'),
          token: localStorage.getItem('accessToken')
      }
   });
 } else {
  window.location = "/logout";
 }
});

 return newToken;
}

function resetAuthTokenRequest() {
  authTokenRequest = null;
 }

/**
  * @description if any of the API gets 401 status code, this method 
   calls getAuthToken method to renew accessToken
  * updates the error configuration and retries all failed requests 
  again
*/ 

client.interceptors.response.use(undefined, err => {
  const error = err.response;
  // if error is 401 
  if (error.status===401 && error.config && 
  !error.config.__isRetryRequest) {
  // request for a new token
  return getAuthToken().then(response => {
   // update the error config with new token
   error.config.__isRetryRequest = true;
   error.config.headers.token= localStorage.getItem("accessToken");
   return client(error.config);
  });
 } 
});

/**
 * @description wrapper for making ajax requests
 * @param {object} object with method,url,data etc.
*/ 

const request = function(options) {
  const onSuccess = function(response) {
    return response.data;
  }
 const onError = function(error) {
  //console.error('Request Failed:', error.config);
   if (error.response) {
  //console.error('Status:',  error.response.status);
  //console.error('Data:',    error.response.data);
  //console.error('Headers:', error.response.headers);
  } else {
  console.error('Error Message:', error.message);
  }
 return Promise.reject(error.response || error.message);
 }

return client(options)
        .then(onSuccess)
        .catch(onError);
        options
}

export default request;

[EDIT] Its 2019, Here is yet another implementation for the same. The above solution is great but does not work well with multiple failed request, in turn it calls getToken with the updated token as well.

 import axios from "axios";

 /* @internal */
 import config from "../config";
 import TokenService from "./token_service"; // Could You please provide code from this file too?

class Request {
    constructor() {
        this.baseURL = config.baseUrl;
        this.isRefreshing = false;
        this.failedRequests = [];
        this.tokenService = new TokenService();
        this.client = axios.create({
            baseURL: config.apiServerBaseUrl,
            headers: {
               clientSecret: this.clientSecret,
            },
        });
        this.beforeRequest = this.beforeRequest.bind(this);
        this.onRequestFailure = this.onRequestFailure.bind(this);
        this.processQueue = this.processQueue.bind(this);
        this.client.interceptors.request.use(this.beforeRequest);
        this.client.interceptors.response.use(this.onRequestSuccess, 
this.onRequestFailure);
}

beforeRequest(request) {
    const token = TokenService.getAccessToken();
    request.headers.Authorization = `Token ${token}`;
    return request;
}

static onRequestSuccess(response) {
    return response.data;
}

async onRequestFailure(err) {
    const { response } = err;
    if (response.status === 401 && err && err.config && !err.config.__isRetryRequest) {
        if (this.isRefreshing) {
            try {
                const token = await new Promise((resolve, reject) => {
                    this.failedRequests.push({ resolve, reject });
                });
                err.config.headers.Authorization = `Bearer ${token}`;
                return this.client(err.config);
            }
            catch (e) {
                return e;
            }
        }
        this.isRefreshing = true;
        err.config.__isRetryRequest = true;
        return new Promise((resolve, reject) => {
            this.tokenService.refreshAccessToken().then((token) => {
                this.tokenService.setAccessToken(token);
                err.config.headers.Authorization = `Bearer ${token}`;
                this.isRefreshing = false;
                this.processQueue(null, token);
                resolve(this.client(err.config));
            }).catch((e) => {
                this.processQueue(e, null);
                reject(err.response);
            });
        });
    }
    throw response;
}

processQueue(error, token = null) {
    this.failedRequests.forEach((prom) => {
        if (error) {
            prom.reject(error);
        } else {
            prom.resolve(token);
        }
       });
        this.failedRequests = [];
    }

}

const request = new Request();

export default request.client;

Muhammad Shahzad · Accepted Answer · 2021-01-05 10:43:52Z

11

We can catch axios 401 using this method.

 axios.post('/add')
 .then(function (response) {...})
 .catch(function (error) {
     console.log(error.response.status) // 401
     console.log(error.response.data.error) //Please Authenticate or whatever returned from server
   if(error.response.status==401){
     //redirect to login
   }
 })

edited Jan 5, 2021 at 10:43

answered Dec 31, 2020 at 6:47

Muhammad Shahzad

9,68022 gold badges90 silver badges130 bronze badges

2 Comments

Ali Radmanesh Over a year ago

When I get 401, there is no response in error! also it doesn't go into catch block

Mark Ezberg Over a year ago

The problem is we do not add error catching to every api call and better way of doing would be manipulating response with interceptors

Thanh Nguyen · Accepted Answer · 2022-05-10 03:26:08Z

6

I consulted some other questions and here is my code

import axios from 'axios';

const instance = axios.create({
    baseURL: window.location.hostname === 'localhost' ? 'http://localhost:5001/api/v1' : 'https://api.mysite.com/api/v1'
});
instance.defaults.headers.common['Content-Type'] = 'multipart/form-data';

//validate response
instance.interceptors.response.use((response) => {
    return response;
}, (error) => {
        if (error.response.status === 401) {

            return window.location.href = '/login'
        }
    return Promise.reject(error);
});

// Set the AUTH token for any request
instance.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem('token');
        config.headers.Authorization =  token ? `Bearer ${token}` : '';
        return config;
    }
)

export default instance;

answered May 10, 2022 at 3:26

Thanh Nguyen

3195 silver badges17 bronze badges

2 Comments

Mark Ezberg Over a year ago

It is just to redirect the login page rather than updating the token and letting user use the service.

Thanh Nguyen Over a year ago

yes. It is my bussiness logic ! You can custom it base on your requirements !

James Westgate · Accepted Answer · 2022-01-28 15:33:00Z

I haven't found a clear concise answer when using Axios in a module. You need to add the interceptors to the instance of axios you are using.

api.js

import axios from 'axios'
import store from '../state'

//Defaults will be combined with the instance
axios.defaults.baseURL = '/some/page.aspx';

//Create Axios Instance
const axiosInstance = axios.create({
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json; charset=UTF-8'
    }
});

//Add interceptors to instance
axiosInstance.interceptors.response.use(
    response => response,
    error => {
        if (!error.response) {
            store.commit('setServiceAvailable', false);
        }
        else if (error.response.status === 401) {
            store.commit('setUserAuthorised', false);
        }
        return error;
    });

export default axiosInstance;

Then use as normal

component.js

import api from '../api'
...
async getServersJson() {
    try {
        var response = await api.post('GetReportAsServers', {name: 'get-servers', args: null});
        this.serversJson = this.prettifyJson(response.data.d);
    }
    catch (error) {
        console.error(`Exception getting servers. ${error}`);
    }
},

Collectives™ on Stack Overflow

How to handle 401 (Authentication Error) in axios and react?

6 Answers 6

8 Comments

"Network Error" without any response

2 Comments

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

"Network Error" without any response

2 Comments

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related