withAuthenticationRequired not working properly on production

[nguyenthientam.2206]

Hi there,
I’m having an issue with the withAuthenticationRequired HOC. It seems not working as expected on production.
I have a protected route (ex: /testpage). I tried to send the appState on: 'test page' and want to see it on console.log in function onRedirectCallback()

import { withAuthenticationRequired } from '@auth0/auth0-react';
import PageLoader from '../layouts/PageLoader';

const TestPage: React.FC = () => {
  return <div>This is a test auth0 page</div>;
};

export default withAuthenticationRequired(TestPage, {
  loginOptions: {
    appState: {
      on: 'test page',
    },
  },
  returnTo: () => window.location.href,
  onRedirecting: () => (
    <div className="page-layout">
      <PageLoader />
    </div>
  ),
});

const onRedirectCallback = (appState: any) => {
    console.log('appState', appState);
    router.replace(
      appState && appState.returnTo
        ? appState.returnTo
        : window.location.pathname
    );
  };

Here is the steps on localhost:

• Enter directly domain/testpage on address bar and hit enter (still not logged in)
• App will redirect to auth0 login page, then log in
• App redirect exactly to /testpage, I can see the result

appState {on: 'test page', returnTo: 'http://localhost:3000/testpage'}

But here is the steps on production:

• Enter directly domain/testpage on address bar and hit enter (still not logged in)
• App will redirect to my login page (/) same as Auth0Provider redirectUri prop (I think so) and stay there instead of redirect to auth0 login page

Here is my configuration

//Libs
 "@auth0/auth0-react": "^1.12.0",
 "next": "12.2.5",

//Auth0Provider config
 domain: process.env.NX_AUTH0_DOMAIN || '',
 audience: process.env.NX_AUTH0_AUDIENCE || '',
 clientId: process.env.NX_AUTH0_CLIENT_ID || '',
 redirectUri: process.env.NX_BASE_URI,
 connection: process.env.NX_AUTH0_CONNECTION || '',
 useRefreshTokens: true,
 advancedOptions: {
  defaultScope: 'openid profile email offline_access',
 },
 onRedirectCallback,

Please let my know your opinions. Thank you very much.

[nguyenthientam.2206]

Something is wrong with the router (I found out the difference between localhost and production).

There are two pages at my end:

1. Login page (the page has a login button that user will redirect to auth0 login page when click). Its path is /
2. Protected page (the page I enter url directly on address bar for testing). Its path is /shares

How to:

• Enter domain/shares directly on address bar of browser end hit enter without log in before.

Result:

Localhost: Everything happened as expectation.
(Redirect to auth0 login page, then can be received appState from protected route, router work normally)
Here is my console.log router.

Production: Stuck at / page
(Can’t redirect to auth0 login page)
My url after I hit enter is domain/shares but router.pathname, router.route still are /
Here is my console.log router

Current url : domain/shares, but it seems stuck at /

Thank you and looking forward to hearing from you.