Axios Interceptors for Access Token and Refresh Tokens in React

Question

I am trying to debug an issue I am having with interceptors in a access token and refresh token reqwuirement. I tried to follow debugging procedures from: Axios interceptors and asynchronous login and also follow the axios interceptor format and procedure from: https://shinework.io/post/handle-oauth2-authentication-with-react-and-flux

However, I can't seem to figure out why my application is not working. I'm new to interceptors and I think it may be an issue with how they are being ejected? I run into an issue during my axios request where I try to run the initial request with an updated access token received from a refresh endpoint. I have this code within my root index.js file

When I debug after the access token has expired, the console.log of 'Rejecting' during the catch block of the initial request call utilizing the new access token renders. Again the purpose is to utilize the refresh token to grab a new sets of access_token and refresh_token, then make the initial request call utilizing the new access_token.

Request and Response Interceptors:

axios.interceptors.request.use(
      config => {
        const token = localStorage.getItem('access_token');
        config.headers.authorization = `Bearer ${token}`;
        return config;
      },
      error => {
        return Promise.reject(error);
      },
    );

axios.interceptors.response.use(
      response => {
        return response;
      },
      error => {
        const errorMessage = error.message;
        const substring = '401';
        const errorCheck = errorMessage.includes(substring);

        return new Promise((resolve, reject) => {
          if (errorCheck) {
            onRefreshToken({
              initialRequest: error.config,
              resolve,
              reject,
            });
          } else {
            refreshFailLogout(store);
            reject(error);
          }
        });
      },
    );

onRefreshToken() and saveTokens()

const onRefreshToken = params => {
  let refreshToken = store.getState().auth.refresh_token;
  if (refreshToken) {
    axios.interceptors.request.eject(InterceptorUtil.getInterceptor());

    const dataSet = {
      refresh_token: `${refreshToken}`,
    };
    axios
      .post('https://localhost:3469/api/Login/$refresh', dataSet)
      .then(response => {
        saveTokens(response.data);

        // Replay request
        axios(params.initialRequest)
          .then(response => {
            params.resolve(response);
            store.dispatch({ type: AUTHENTICATED, payload: response.data });
          })
          .catch(response => {
            console.log('Rejecting')
            params.reject(response);
          })
          .catch(() => {
            refreshFailLogout();
          });
      });
  }
};

const saveTokens = response => {
  const {
    access_token,
    refresh_token,
    scope,
    id_token,
    token_type,
  } = response;

  // ...local storage save of variables
  let token = localStorage.getItem('access_token');

  let interceptor = axios.interceptors.request.use(config => {
    config.headers.authorization = `Bearer ${token}`;
    return config;
  });

  InterceptorUtil.setInterceptor(interceptor);
};

InterceptorUtil Class

class InterceptorUtil {
  constuctor() {
    this.interceptor = null;
  }

  setInterceptor(interceptor) {
    this.interceptor = interceptor;
  }

  getInterceptor() {
    return this.interceptor;
  }
}

export default new InterceptorUtil();

Axios Interceptors for Access Token and Refresh Tokens in React

0 Answers0