Show custom alert in Auth0 Login Page

Knowledge Articles
1

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.