Render a custom error page from Rule

[narendravaghela]

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

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

[narendravaghela]

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