NextJs and Overriding Error Component

[mrige]

Issue and Steps to Reproduce

When i replace Authentication with custom component that has a button to reroute to the home page, once the button is clicked the url changes in the address bar but the page itself doesn't change .

AuthWrapper

const AuthenticatingError = (): JSX.Element => {
  const router = useRouter();
  const action = () => {
    router.push("/");
  };
  return <Error message="Auth Error" action={action} />;
};

const onEvent = (
  configurationName: string,
  eventName: string,
  data: unknown
): void => {
  console.log(`oidc:${configurationName}:${eventName}`);
};

const AuthWrapper = ({
  children,
}: {
  children: JSX.Element | JSX.Element[];
}): JSX.Element => {
  const router = useRouter();
  const withCustomHistory = (): CustomHistory => {
    return {
      replaceState: (url: string): void => {
        router
          .replace({
            pathname: url,
          })
          .then(() => {
            window.dispatchEvent(new Event("popstate"));
          });
      },
    };
  };
  return (
    <>
      <OidcProvider
        configuration={oidcConfig}
        withCustomHistory={withCustomHistory}
        onEvent={onEvent}
        authenticatingErrorComponent={AuthenticatingError}
      >
        <main>{children}</main>
      </OidcProvider>
    </>
  );
};

Error

interface ErrorProps {
  message: string;
  action: () => void;
}

const Error = ({ message, action }: ErrorProps): JSX.Element => {
  const router = useRouter();
  return (
    <PageLayout>
      <Container
        sx={{
          display: "flex",
          alignContent: "center",
          justifyContent: "center",
          verticalAlign: "middle",
          alignItems: "center",
          flexDirection: "column",
          height: "50rem",
        }}
      >
        <Alert
          severity="info"
          action={
            <Button color="inherit" size="small" onClick={action}>
              Home
            </Button>
          }
        >
          {message}
        </Alert>
      </Container>
    </PageLayout>
  );
};

the url at the end of the video i was talking about was

noticed that just after the callback its not a query string

Versions

"^6.13.3"

Video

https://user-images.githubusercontent.com/16493533/222004764-45c3f442-69d0-43b7-9fb4-f60bb97b6561.mp4

Expected

Actual

Additional Details

• Installed packages:

[guillaume-chervet]

Thank you @mrige for your issue and thank you for the video. I make a try to reproduce it.

[guillaume-chervet]

I'am sorry @mrige , I did not get the time to test it.

Do you have a sample of your configuration?

[mrige]

import { OidcConfiguration } from "@axa-fr/react-oidc";

export const configurationIdentityServer: OidcConfiguration = {
  client_id: process.env.NEXT_PUBLIC_OAUTH2_CLIENT_REGISTRATION_LOGIN_CLIENT_ID,
  redirect_uri:
    process.env.NEXT_PUBLIC_OAUTH2_CLIENT_REGISTRATION_LOGIN_REDIRECT_URI,
  silent_redirect_uri:
    process.env
      .NEXT_PUBLIC_OAUTH2_CLIENT_REGISTRATION_LOGIN_SILENT_REDIRECT_URI,
  scope: "openid profile email api offline_access",
  authority: process.env.NEXT_PUBLIC_OAUTH2_CLIENT_PROVIDER_OIDC_ISSUER,
  refresh_time_before_tokens_expiration_in_second: 120,
  silent_login_uri:
    process.env.NEXT_PUBLIC_OAUTH2_CLIENT_REGISTRATION_LOGIN_SILENT_LOGIN_URI,
  service_worker_relative_url: "/OidcServiceWorker.js",
  service_worker_only: false,
  token_request_extras: {
    //resource:"PUT RESOURCE HERE"
  },
  extras: {
    prompt: "consent",
  },
};

[guillaume-chervet]

hi @mrige thank you very much.

What is the path value of redirect_uri: process.env.NEXT_PUBLIC_OAUTH2_CLIENT_REGISTRATION_LOGIN_REDIRECT_URI, silent_redirect_uri: process.env .NEXT_PUBLIC_OAUTH2_CLIENT_REGISTRATION_LOGIN_SILENT_REDIRECT_URI, ?

Do you use # link or full path?