Show custom alert in Auth0 Login Page

Problem statement

We are using Auth0Lock for signup and login. We need to show an alert in login screen, while user is signing up.

Solution

A good way of doing this is by building an action that runs on registration. This action would perform logic to determine if the email domain is on a block list. Here is an example action that blocks a single email address as a starting point:

/**
 * Handler that will be called during the execution of a PreUserRegistration flow.
 *
 * @param {Event} event - Details about the context and user that is attempting to register.
 * @param {PreUserRegistrationAPI} api - Interface whose methods can be used to change the behavior of the signup.
 */
exports.onExecutePreUserRegistration = async (event, api) => {
  const actionResultsKey = 'Validate email for registration:';
  let actionResults = event?.user?.user_metadata?.action_results || [];

  const blockedEmail = [
    "blocked@gmail.com"
  ];

  const currentEmail = event?.user?.email ?? "";

  if ( blockedEmail.includes(currentEmail) ) {
    const errorMessage = "Email is blocked!";

    actionResults.push(`${actionResultsKey} Failed - user registration blocked: ${errorMessage}`);
    api.user.setUserMetadata('action_results', actionResults);
    api.access.deny('Email validation failed for ${event?.user?.email}: ${errorMessage}', errorMessage);
  }
  else {
    actionResults.push(`${actionResultsKey} Success - user email OK`);
    api.user.setUserMetadata('action_results', actionResults);
  }
}

If this action error is triggered than it will display an error on the signup page.