# Refetch access token after callback

**URL:** <https://community.auth0.com/t/refetch-access-token-after-callback/120327>\
**Category:** Get Help\
**Tags:** sdks-quickstarts, auth0-react\
**Created:** [November 6, 2023, 3:44pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327 "2023-11-06T15:44:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![DawnMD](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dawnmd/32/47318_2.png) [@DawnMD](https://community.auth0.com/u/DawnMD)\
**Post date:** [November 6, 2023, 3:44pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327/1 "2023-11-06T15:44:53Z")

</div>

I’m using auth-0/react SDK for the Gatsby app, as I need dynamic callback URLs I created a callback page stored the redirect URL in local storage, and forwarded the key to auth0 for authorization as mentioned [here](https://community.auth0.com/t/how-do-i-set-up-a-dynamic-allowed-callback-url/60268) (PS: I’m storing the access token to local storage for further usage). It’s working well, but now I’m facing an issue where if the token is expired there is no way to get a new token without calling `getAccessTokenSilently` from the code as my backend needs to verify the token. But doing that raises the issue where some of the backend calls are fired even before the new token is being set in local storage. Any possible way to improve in this part?

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [November 13, 2023, 3:34pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327/3 "2023-11-13T15:34:10Z")

</div>

Hi @DawnMD,

Welcome back to the Auth0 Community!

You shouldn’t be storing the access token in local storage. The `getAccessTokenSilently` method has an automatic caching mechanism. It will store the token and fetch a new one when needed.

Let me know if you have any questions.

---

<div class="post-metadata">

**Author:** ![DawnMD](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dawnmd/32/47318_2.png) [@DawnMD](https://community.auth0.com/u/DawnMD)\
**Post date:** [November 13, 2023, 5:02pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327/4 "2023-11-13T17:02:28Z")

</div>

In my particular scenario I’m using the token in a backend request with acxios. And I’m sending the token using axios interceptors where I cannot call any hooks or `getAccessTokenSilently`. So how can I deal with that situation?

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [November 13, 2023, 5:19pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327/5 "2023-11-13T17:19:25Z")

</div>

I think you should still be able to set up an interceptor to use a token. Do you have any code snippets you can share to see what you’re working on?

---

<div class="post-metadata">

**Author:** ![DawnMD](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dawnmd/32/47318_2.png) [@DawnMD](https://community.auth0.com/u/DawnMD)\
**Post date:** [November 13, 2023, 5:37pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327/6 "2023-11-13T17:37:40Z")

</div>

Sure. Currently I’m setting the token in `localStorage` then setting it in the interceptor:

```js
const instance = axios.create({
  baseURL: process.env.GATSBY_API_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

const getCurrentCurrency = () => loadState(CURRENCY) || IDR;

instance.interceptors.request.use(
  async function (config) {
    const jwt =
      isTokenValid(GUEST_SERVICE_TOKEN) && loadState(GUEST_SERVICE_TOKEN);
    if (jwt) {
      config.headers.Authorization = `Bearer ${jwt}`;
    }
    config.headers.AUTH_TOKEN = getOrSetSessionId();
    config.headers.LOCALE = getCurrentLanguage();
    config.headers.CURRENCY = getCurrentCurrency();
    config.headers.COOKIESENABLED = isCookieEnabled();
    config.headers.APPVERSION = process.env.GATSBY_COMMIT_REF;

    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

```

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [November 13, 2023, 6:20pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327/7 "2023-11-13T18:20:29Z")

</div>

Could you do something like this:

> [@How to get token from outside React components?](https://community.auth0.com/t/how-to-get-token-from-outside-react-components/68756/3):
>
> Create a Interceptor class, init and export a instance class AuthInterceptor { setAuthGetter(getToken) { this.getToken = getToken; } async intercept(config) { if (!this.getToken) { return config; } try { const token = await this.getToken(); config.headers['Authorization'] = `Bearer ${token}`; } catch (e) { console.log(e); } return config; } } export const authInterceptor = new AuthInterceptor() fetchClient.interceptors.request.use(a…

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [November 27, 2023, 6:20pm UTC](https://community.auth0.com/t/refetch-access-token-after-callback/120327/8 "2023-11-27T18:20:51Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.