How to get a new access token by current access token or refresh token in auth0-react?

[leslie]

I’m using @auth0/@auth0-react SDK.
I want to get a new access token when I clicked a button. The current access token is not expired actually.
Here is my code.

const providerConfig = {
  domain: auth.domain,
  clientId: auth.clientId,
  audience: auth.audience,
  redirectUri: window.location.origin,
  useRefreshTokens: true,
  scope: auth.scope,
  cacheLocation: 'localstorage' as CacheLocation,
};

ReactDOM.render(
  <Auth0Provider {...providerConfig}>
    <Auth0Context.Consumer>
      {({ getAccessTokenSilently, loginWithRedirect }) => {
        // toLogin = loginWithRedirect;
        // deferred.resolve(getAccessTokenSilently);
        return (
          <Provider store={store}>
            <App />
          </Provider>
        );
      }}
    </Auth0Context.Consumer>
  </Auth0Provider>,
  document.getElementById('root') as HTMLElement
);

I can get the access token and refresh token since I set the cacheLocation: 'localstorage'.
I want something like this

const getNewToken = () => {
// generate a new access token and use it replace current access token
}
...
<Button onClick={getNewToken}>new token</Button>

I have tried to use the code below, but it return an error.

const options = {
  method: 'POST',
  url: `https://${auth.domain}/oauth/token`,
  headers: {
    'content-type': 'application/x-www-form-urlencoded',
    authorization: `Basic ${code}`,
  },
  data: new URLSearchParams({
    grant_type: 'refresh_token',
    client_id: auth.clientId,
    refresh_token: refresh_token,
  }),
};

export const getNewToken = () => {
  axios
    .request(options)
    .then(function (response) {
      console.log(response.data);
    })
    .catch(function (error) {
      console.error(error);
    });
};

The variable code is this field, I don’t know where to get the field code actually.

The error info.

[leslie]

I found there is an easy way to implement this.

 const getNewToken = async () => {
    const newAccessToken = await getAccessTokenSilently({ ignoreCache: true });
 }

[tyf]

Hey there @leslie thanks for following up with your findings, and welcome to the community!

That’s correct, silent authentication (getAccessTokenSilently in this case) is exactly the manner in which you should go about obtaining new access tokens. Setting ignoreCache: true forces the refresh regardless of if what’s in the cache.

Cheers!