When to use refresh token

[fn017]

I am struggling with refresh token and its use. I know what refresh token and its purpose to update access token but when do I hit the refresh token endpoint ?

Do I hit the refresh token on app load?

Should I write a setInterval func and call refresh-token api ?

[mfahad017]

I also have this question and since no one bother to answer Ill make a guess.

you save access and refresh tokens in your localstorage.
on every page load you check the expiry of the accesstoken and if the token is expiered you refetch it using refreshtoken endpoint/

[kallyas]

Two ways I can think of

1. When the token expires and the endpoint returns an unauthorised response, refresh the token and continue the original request with a new access token.
2. Decode the token and check if the token has expired, if so refresh it and continue with the original request

[kallyas]

Two ways I can think of

1. When the token expires and the endpoint returns an unauthorised response, refresh the token and continue the original request with a new access token.
2. Decode the token and check if the token has expired, if so refresh it and continue with the original request

const BASE_URL = process.env.REACT_APP_API_URL;

let originalRequest = async (url, config) => {
  url = `${BASE_URL}${url}`;
  return fetch(url, config);
};

let refreshToken = async (refresh_token) => {
  let res = await fetch(BASE_URL + "/auth/refresh", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ refreshToken: refresh_token }),
  });
  let data = await res.json();
  console.log(data)
  localStorage.setItem("access_token", JSON.stringify(data.access));
  localStorage.setItem("refresh_token", JSON.stringify(data.refresh));
  return data;
};

let customFetch = async (url, config = {}) => {
  let access_token = JSON.parse(localStorage.getItem("access_token"));
  let refresh_token = JSON.parse(localStorage.getItem("refresh_token")).token;

  let newAccessToken;

  let expired = new Date() > new Date(access_token.expires);
  if (expired) {
    let { tokens } = await refreshToken(refresh_token);
    newAccessToken = tokens.access;
  }

  config.headers = {
    ...config.headers,
    Authorization: `Bearer ${newAccessToken || access_token.token}`,
  };

  // proceed with the request after refreshing the token
  const res = await originalRequest(url, config);
  return res;
};

export default customFetch;

This is my approach since we get the time at which the token will expire