Render a custom error page from Rule

[stephanie.chamblee]

Hi @narendravaghela,

Welcome to the Community!

Unfortunately, because of the way that the OpenID Connect prescribes the login flow, Auth0 redirects the user to the callback URL with the error so that the application can display the error to the user.

The answer in this topic provides more info on the reason behind this behavior:

Handling authorization_error with hosted pages

Hi, The way OIDC works is by redirecting users to a page where they are authenticated, and in case there is an unexpected error in the authentication process, forward it to the callback URL so the application can handle it. In the Auth0 server, rules are run after the user is authenticated, so it’s not possible for us to display errors in the login dialog itself (e.g. you could enter username/password, get prompted MFA, and then get an error from a rule), so those errors are sent to the applic…

There are some examples of how to implement the error handling in the quickstart apps. For example, the React quickstart handles the error using:

const App = () => {
  const { isLoading, error } = useAuth0();

  if (error) {
    return <div>Oops... {error.message}</div>; // <-- This is where you'd render the custom error component/page
  }

  if (isLoading) {
    return <Loading />;
  }

  return (
    <Router history={history}>
      <div id="app" className="d-flex flex-column h-100">
        <NavBar />
        <Container className="flex-grow-1 mt-5">
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/profile" component={Profile} />
            <Route path="/external-api" component={ExternalApi} />
          </Switch>
        </Container>
        <Footer />
      </div>
    </Router>
  );
};