Request is not being re-triggered after re-auth

[rota-rossi]

Symptom: after receiving a 401 error, the refresh endpoint is called, and the following requests properly use the new access token - but the original request is never re-triggered, and the auth action returns TypeError: undefined is not a function.

Code:

// use axios-case-converter to convert snake case (e.g. created_time) to camel case (e.g. createdTime)
const axiosInstance = applyCaseConverters(
  axios.create({
    baseURL: Config.BASE_URL + 'api/',
  }),
  {
    ignoreHeaders: true,
  }
);

// few other interceptors omitted - but tried to disable all of them and the error still persists

// add JWT access token to all request header if present
axiosInstance.interceptors.request.use(request => {
  request.headers!.Authorization = `Bearer ${getToken('access')}`;
  return request;
});

const refreshAuthLogic = (failedRequest: any) =>
  axiosInstance
    .post(`/auth/token/refresh/`, { refresh: getToken('refresh') })
    .then(result => {
      setToken('access', result.data.access);
      failedRequest.response.config.headers.Authorization =
        'Bearer ' + result.data.access;
      return Promise.resolve();
    });

createAuthRefreshInterceptor(axiosInstance, refreshAuthLogic, {
  pauseInstanceWhileRefreshing: true,
});

Can someone point me what I might be doing wrong?

[DovahBrownies]

Have you tried removing pauseInstanceWhileRefreshing?

[Flyrell]

See request interceptor example in the docs. Basically for other requests you should have an interceptor that binds that token when they're triggered (as the token might have changed if the first request is caught in the refreshAuthLogic callback adn you re-authorize the user).