Token call and new Token Generation on every route change

Every time I try to add the SDK to a new react project, I always get this issue. Previously, I would just use the react sample, which does not have this problem. But, now, I cannot use the sample anymore and really need to get this working.

I have a couple of pages with basic routing. brand new react project. Auth0 SDK added right after new project creation. Login, Logout works fine.

• Use Logs In.
• Page Reload - Network Token Call
• Visit another route/view which uses Token - Network Token Call
• Visit another route/view which does not use Token - Again, Network Token Call
• Return to Home Page - Network Token Call, again.

The SDK does not prompt a login. It knows that the user is already authenticated. But, it cannot stop itself from asking for a new token for every route change or page reload.

Now, with the exact same browser, same computer, the auth0 react sample, does not have this problem. It’s clearly something I am not including somewhere.

It’s similar to the issue reported here - https://github.com/auth0/auth0-react/issues/44 , I think.

Here is a photo of the network calls.

I have followed the discussion on the https://github.com/auth0/auth0-react/issues/44 and also at https://github.com/auth0/auth0-react#getting-started

Here is my index file, App being wrapped up as per instructions.

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience}
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
    scope={config.scope}
  >
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  </Auth0Provider>,
  document.getElementById('root')
);

Here is my App file.

function App() {

  const { isLoading, error } = useAuth0();

  if (error) {
    return <div>Oops... {error.message}</div>;
  }

  if (isLoading) {
    return <Loading />;
  }  
  return (
    <Router history={history}>
      <Container>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/userprofile" component={Profile} />
      </Switch>
      </Container>

    </Router>
  );
}

export default App;

Even, with a regular component which does not even need authentication , like this…

const About = () => (
    <div>
        <h4>About</h4>
        <p>React JS App that works in tandem with the Random Stuff Generator API Server</p>
    </div>
);

export default About;

The token endpoint gets called and I am provided with a new token.

What was the expected behavior?

The behavior should be similar to what I see in the sample app. route changes should not be triggering token calls.

[zhil]

By default tokens are cached in memory, and getTokenSilently still send request to …/oauth/token each time when you reload page.

its correct behavior because of security (it provide better protection against XSS), but… its annoying and it slow down my App page loading speed. So, I am also using localstorage cache

<Auth0Provider
....
      cacheLocation="localstorage"
    >

I hope it will save time for somebody 😃

[Jay-study-nildana]

@adamjmcgrath

aha! I knew i was making a mistake of my own making. I am an old .NET guy trying to pick up some front end skills.

thank you very much man. I will close this as resolved now.