Render a custom error page from Rule

Help
, ,
3

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:

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>
  );
};
1 Like