Axios Interceptor is not working in React JS

Question

I am using the below code as an interceptor in my React JS app for getting token back but unfortunately, it is not working. Refresh token returns new idToken and updates local storage data correctly. The same code I'm using some other application which works fine. One main difference is that I currently use React 18 and the previous 16 . I struggled to identify the problem but failed. Your help will be appreciable.

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      // console.log(error.response.data.code)
      let usersData = JSON.parse(localStorage.getItem("userData"));
      const refreshToken = usersData.refreshToken;
      return axios
        .post(
          `${api_base_url}/auth/authentication/refresh_token`,
          JSON.stringify({
            refresh_token: refreshToken,
          })
        )
        .then((response) => {
          usersData["accessToken"] = response.data.data.accessToken;
          usersData["idToken"] = response.data.data.idToken;

          setSessionStorage("userData", usersData);

          error.response.config.headers[
            "Authorization"
          ] = `Bearer ${response.data.data.idToken}`;

          return axios(error.response.config);
        })
        .catch((error) => {
          if (error.response.data.code !== "TOKEN_EXPIRED") {
            return;
          }
          localStorage.clear();
          window.location = "/login";
        });
    }
    return Promise.reject(error);
  }
);

function getIRequestProp(severType, isMultipart, isSocial) {
    const serverUrl = severType ? social_api_base_url : api_base_url;
    let userData = JSON.parse(localStorage.getItem('userData'));
    let idToken;
    idToken = userData !== null ? userData['idToken'] : '';
    let content_type;
    if (isSocial) {
        content_type = 'application/x-www-form-urlencoded'
    } else {
        content_type = isMultipart ? 'multipart/form-data' : 'application/json'
    }

    return {
        serverUrl: serverUrl,
        requestHeader: {
            'Content-Type': content_type,
            'Accept-Language': DEFAULT_LANGUAGE,
            Authorization: `Bearer ${idToken}`
        }
    };
}

async function post(url, body, isSocialServer, isMultipart) {
    const {serverUrl, requestHeader} = getIRequestProp(isSocialServer, isMultipart);
    return axios.post(serverUrl + url, body, {
        headers: requestHeader
    });
}

So, I call API like this:

   AxiosServices.post(ApiUrlServices.SOCIALS_UPDATE_LINKS(UserInfo.userId), payload, false)
        .then(response => {})

What i figured out that return axios(error.response.config); is not sending authorization token in API request headers and trying request infinitely. But consoling error.response.config shows token sets in the config correctly.

Answer 1

Adding an additional modification of axios request, I solved my problem.

axios.interceptors.request.use(request => {
    // Edit request config
    let usersData = JSON.parse(localStorage.getItem('userData'));
    request.headers['Authorization'] = `${usersData.idToken}`;
    return request;
}, error => {
    return Promise.reject(error);
});