Render a custom error page from Rule

We have a custom rule setup that checks for the user’s email address against a predefined list of addresses. If a user is not available in that list, we are denying the login and throwing UnauthorizedError

We are using SSO + OAuth flow. Our main application redirects user to Auth0 login page with client id, callback URL and other required parameters.

The Rule is being executed correctly. But it redirects back to our callback URL with error and error_description query parameters. Instead of this, we want to render the default error page on Auth0 itself with custom error message.

Below is our sample rule code:

      if (!userHasAccess) {
        return callback(new UnauthorizedError('Email does not exist - Access denied.'));
      }

      callback(null, user, context);

How can we achieve the desired result?
Is it mandatory to have a custom error page on somewhere else outside the Auth0?
Can’t we render the default error page on Auth0 itself instead of redirect user back to callback URL?

Any help on this will be appreciated.

Thanks

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

Hello @stephanie.chamblee
Thank you for a quick response. Now this clarifies the things.

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.