Having issues with protected route in Gatsby with Auth0 redirect

General
, ,
#1

I’m having issue with implementing protected pages(routes) in Gatsby with Auth0

Currently, when I point the browser to localhost:8000/user/protectedpage, it goes to the login screen, and after a successful login, it comes back to that route, and the browser seems to be stuck on a loop loading between two routes

redirectUri in Auth0Provider is set to redirectUri={window.location.origin + '/user'}

Allowed Callback URLs in the auth0 admin page, is set to, http://localhost:8000/user

If I change these routes to window.location.origin and http://localhost:8000/, then after a successful login, it’ll redirect to that page and stay there.

I need it to redirect to where it was trying to go to instead.
As in, if I navigate to localhost:8000/user/protectedpage, then after logging in, it should redirect to that route and load that page successfully, instead of being stuck in a loop like mentioned earlier.

Here are some codes:

// File structure
src
  > pages
       > user
          > index.js
          > protectedpage
       index.js
  gatsby-browser.js
       

// gatsby-browser.js
import React from 'react';
import { Auth0Provider } from '@auth0/auth0-react';
import { navigate } from 'gatsby';

const onRedirectCallback = (appState) => {
  navigate(appState?.returnTo || '/', { replace: true });
};

export const wrapRootElement = ({ element }) => {
  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN}
      clientId={process.env.AUTH0_CLIENTID}
      redirectUri={window.location.origin + '/user'}
      onRedirectCallback={onRedirectCallback}
    >
      {element}
    </Auth0Provider>
  );
};

// protectedpage.js
import React from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';

const ProtectedPage = () => {
  return (
    <div>
      Protected Page
    </div>
  );
};

export default withAuthenticationRequired(ProtectedPage);


// auth0 Application URIs

Allowed Callback URLs
http://localhost:8000/user