React/GraphQL app calls /authorize on every single page load, and takes > 1 second each time

[yusuf1]

I’ve built a React app running against a GraphQL/NodeJS API. I’m using the @auth0/auth0-react package.

In my App.js file I verify that the Auth0 SDK has been initialized before rendering the app. But on each refresh my app makes a call to the /authorize endpoint, which usually takes ~1.8 seconds.

Is there a reason why this call needs to be made on every single page load? Should it be faster?

App.js code shown below. Let me know if you need more info. Any help is appreciated

import { useAuth0 } from '@auth0/auth0-react';
...
const App = () => {
  const { isLoading } = useAuth0();
  console.log('in App! Loading: ', isLoading);

// Only render the app once the Auth0 SDK has finished loading
// *** This is where the latency comes. It is in a 'loading' state for 1.8 seconds while /authorize is called, which happens on every page load ***
  if (isLoading) {
    return <LoadingIndicator />;
  }

  return (
    <ApolloProviderWithToken>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={Styles}>
          <Routes>
            <Route
              path='/'
              element={
                <Navigate
                  to={Paths.home}
                  replace
                />
              }
            />
            <Route
              exact
              path={Paths.profile}
              element={<AuthenticationGuard component={Profile} />}
            />
          </Routes>
        </ThemeProvider>
      </StyledEngineProvider>
    </ApolloProviderWithToken>
  );
};

[yusuf1]

Edit: I fixed this issue. I needed to add the following flag to my <Auth0Provider> instance:

cacheLocation='localstorage'

Now it doesn’t call /authorize on every load, and its lightning quick!

[konrad.sopala]

Wohoooo! Glad you made it! Thanks for sharing it with the rest of community!