Search code examples
reactjsauth0

Auth0 React JS Token EndPoint Gets Called On Every Route Change and Page Reload

Every time I try and use Auth0 SDK in a new react js project, it gives me this issue. In the past, I usually circumvent this problem by using their ready to use react js sample. This time I cannot use that sample, so trying to get some help.

After successful login, on every route change, there is a network call to the token endpoint, and a new token is generated and received by the app. Every time. The app does not prompt a log in. It already knows that the user is logged in. It simply goes ahead and asks for new token.

Here is a photo of how it looks. All this activity in less then a minute.

enter image description here

I have raised a issue on the SDK Github Repo here - https://github.com/auth0/auth0-react/issues/181

Further, I have configured the SDK, as per the steps, available here. https://github.com/auth0/auth0-react#getting-started

As per the getting started, all I need to do is wrap my App inside their component. This is my index file, with the wrapping.

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')
);

The bizarre part is the React sample runs just fine, and I have compared every possible setting of that sample with my project, but nothing stands out. the react sample is configured to use the exact same server, and running on the same computer and browser.

Solution

  • The pull request I raised, one of the auth0 developers provided me the solution.

    quoting the Auth0 developer from the pull request,

    "The issue is that you're bypassing react-router and loading a new page when you click <Button href="/about". "

    So, that was the problem. I had accidentally (being new to react js) written code that was invoking the token call.

    solution, also quoting the Auth0 developer,

    import { Link } from 'react-router-dom';

const Home = () => {
  //...
  <Button tag={Link} to="/about" color="primary" size="sm">about</Button>
  // ...
}

    more details here - https://github.com/auth0/auth0-react/issues/181