withAuthenticationRequired - When I refresh the page it doesn't redirect

Get Help
,
1

Please include the following information in your post:

  • Which SDK this is regarding: auth0-react
  • SDK Version: 1.5.0
  • Platform Version: e.g. Node 14

I’m following this example - auth0-react/EXAMPLES.md at master · auth0/auth0-react · GitHub

I’ve created a page called ACCOUNT. If a user is authenticated I want them to see the account information, if they are not authenticated I was to redirect them to the login.

Im using the HOC on that page…

export default withAuthenticationRequired(Account, {
  // Show a message while the user waits to be redirected to the login page.
  onRedirecting: () => <div>Redirecting you to the login page...</div>,
});

and in gatsby browser…


import * as React from 'react'
import { PreviewStoreProvider } from 'gatsby-source-prismic'
import { Auth0Provider } from '@auth0/auth0-react'
import { navigate } from 'gatsby'
import './src/styles/default.css'

const onRedirectCallback = (appState) => navigate(appState?.returnTo || '/');

export const wrapRootElement = ({ element }) => (
  <Auth0Provider
      domain={process.env.GATSBY_AUTH0_DOMAIN}
      clientId={process.env.GATSBY_AUTH0_CLIENTID}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}

    >
    <PreviewStoreProvider>{element}</PreviewStoreProvider>
  </Auth0Provider>
)

everything seems to work great, but if i log in and i’m on the accountpage and i click refresh in the browser the page just sits on Redirecting you to the login page…

Checking the console I see…
Failed to load resource: the server responded with a status of 400 () - authorize…

I must be doing something wrong, something silly but I can’t for the life of me get the page to refresh and to either show me the page (because I’m logged in) or send me to the login page.