How to add refresh token function in react js redux

Question

I am working on an app that has refresh token functionality. For that, I tried to implement this function after learning about Axios interceptor online. But still, it is not resolved. this how I added this.

I don't know whether it is right or wrong. I just tried implementing refresh token. I had no idea of refresh token before.

Any help would be great.

index.js

axios.interceptors.request.use(
  (config) => {
    console.log("step-1", config);
    const token = localStorageService.getAccessToken();
    if (token) {
      config.headers["Authorization"] = "Bearer" + token;
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    console.log("step-2", response);
    return response;
  },
  function (error) {
    const originalRequest = error.config;

    // if (error.response && error.response.status === 401 && !originalRequest._retry) {
    //   history.push("/");
    //   return Promise.reject(error);
    // }

    if (
      error.response &&
      error.response.status === 401 &&
      !originalRequest._retry
    ) {
      originalRequest._retry = true;

      const token = UserServices.getOAuth2().createToken(
        "refresh_token",
        localStorageService.getRefreshToken(),
        { grant_type: "refresh_token" }
      );

      return token
        .refresh()
        .then((res) => {
          console.log("step3", res);
          if (res.status === 201) {
            // 1) put token to LocalStorage
            localStorageService.setToken(res.data);
            // 2) Change Authorization header
            axios.defaults.headers.common["Authorization"] =
              "Bearer " + localStorageService.getAccessToken();
            // 3) return originalRequest object with Axios.
            return axios(originalRequest);
          }
        })
        .catch((error) => {
          // Dispatch Logout Function here
          store.dispatch({
            type: LOGIN_ERROR,
          });
          localStorageService.clearToken();
        });
    }
  }
);

userServices.js

const localStorageService = LocalStorageService.getService();
class UserServices {
  getOAuth2 = () => {
    var ClientOAuth2 = require("client-oauth2");
    const OAuth2 = new ClientOAuth2({
      clientId: "development",
      clientSecret: "development",
      accessTokenUri: "https://api.xxxx.in/oauth/token",
      authorizationUri: "https://api.xxxx.in/oauth/authorize",
      redirectUri: "https://api.xxxx.in/oauth/callback",
      scopes: ["read", "write", "trust"],
    });
    return OAuth2;
  };

  logout() {
    localStorageService.clearToken();
  }
}

user_1177814 · Answer

I believe you need to call resolve in you error handler and it should fix it:

return token
  .refresh()
  .then((res) => {
    console.log("step3", res);
    if (res.status === 201) {
      // 1) put token to LocalStorage
      localStorageService.setToken(res.data);
      // 2) Change Authorization header
      axios.defaults.headers.common["Authorization"] =
        "Bearer " + localStorageService.getAccessToken();
      // 3) return originalRequest object with Axios.
      res(axios(originalRequest)); // <- call resolve here
    }
  })
  .catch((error) => {
    // Dispatch Logout Function here
    store.dispatch({
      type: LOGIN_ERROR,
    });
    localStorageService.clearToken();
  });

How to add refresh token function in react js redux

1 Answers