title: How to handle refresh token in reactjs
body: <p>I am working on reactjs app in which <code>access_token</code> expires after every 5 min. I do have a <code>refresh_token</code>. I want to know a way to handle this in reactjs. I tried to do that with some online search But its not working. This is my code below. I am using redux for state management. </p>
  
  <blockquote>
    <p>login/action/login.js</p>
  </blockquote>
  
  <pre><code>export const getAccessToken = (dataToSend) =&gt; async (dispatch) =&gt; {
    try {
      var formData = ConvertToFormData(dataToSend);
      const authResponse = await Authentication(formData);   &lt;---- This function here gets token from backend api
  
      const response = await fetch("http://api.xxxx.com/userType", {   &lt;-- endpoint here verify token
        method: "GET",
        cache: "no-cache",
        headers: {
          Authorization: `Bearer ${authResponse.access_token}`,
        },
      });
      const payload = await response.json();
  
      if (payload.status === "admin") {
        SaveToLocalStorage("access_token", authResponse.access_token);
        SaveToLocalStorage("refresh_token", authResponse.refresh_token);
        dispatch({
          type: GET_ACCESS_TOKEN,              &lt;--- after getting this dispatch login actions.
          payload: {
            access_token: authResponse.access_token,
            refresh_token: authResponse.refresh_token,
          },
        });
      } else {
        dispatch({
          type: ERROR_ACCESS_TOKEN,
          buttonPressed: true,
        });
      }
    } catch (exception) {
      console.log("Log In again");
    }
  };
  </code></pre>
  
  <blockquote>
    <p>App.js</p>
  </blockquote>
  
  <pre><code>const middleware = [thunk];
  if (process.env.NODE_ENV !== "production") {
    middleware.push(createLogger());
  }
  
  const store = createStore(
    reducers,
    composeWithDevTools(applyMiddleware(...middleware))
  );
  
  axios.interceptors.request.use((config) =&gt; {
    if (getAccessToken("access_token") === false) {
      return config;
    } else {
      config.headers["Authorization"] = `Bearer ${getAccessToken(
        "access_token"
      )}`;
      return config;
    }
  });
  
  axios.interceptors.response.use(
    (response) =&gt; {
      return response;
    },
    (error) =&gt; {
      const {
        config,
        response: { status },
      } = error;
      const originalRequest = config;
      if (status === 401 &amp;&amp; !originalRequest._retry) {
        originalRequest._retry = true;
        const token = userServices
          .getOAuth2()
          .createToken(
            getAccessToken("access_token"),
            getAccessToken("refresh_token"),
            { grant_type: "refresh_token" }
          );
  
        return token
          .refresh()
          .then((response) =&gt; {
            return new Promise((resolve, reject) =&gt; {
              const { access_token } = response.data;
              const { refresh_token } = response.data;
              SaveToLocalStorage("access_token", access_token);
              SaveToLocalStorage("refresh_token", refresh_token);
              return resolve(axios.request(originalRequest));
            });
          })
          .catch((error) =&gt; {
            store.dispatch({
              type: "LOGOUT_USER",
            });
            return Promise.reject();
          });
      } else {
        //here remover every thing and go home and show login modal
      }
    }
  );
  
  render(
    &lt;Provider store={store}&gt;
      &lt;MuiThemeProvider theme={muiTheme}&gt;
        &lt;CssBaseline /&gt;
        &lt;App /&gt;
      &lt;/MuiThemeProvider&gt;
    &lt;/Provider&gt;,
    document.getElementById("root")
  );
  </code></pre>