Use Actions to Validate and Store End-user Data Gathered By Sign-Up Prompt Customizations

This tutorial shows how to use Sign-Up Prompt Customization along with the pre-user-registration trigger to add end-user supplied data from the Sign Up Prompt to user_metadata. Optionally, this data can be validated, and a validation error can be shown in the prompt.

• Tenant has a custom domain verified

• Tenant has a Page Template set

Use the Management API to insert a custom field into a prompt using one of the Entry Points. For this demo, we’re adding the following content to the ulp-container-form-content-start insertion point:

<div class="ulp-field">
  <label for="first-name">First Name</label>
  <input type="text" name="ulp-first-name" id="first-name">
</div>

Build a custom Pre user Registration action by going to Actions > Library > Build Custom.

Inside the code editor, update the onExecutePreUserRegistration handler:

exports.onExecutePreUserRegistration = async (event, api) => {
  const firstName = event.request.body['ulp-first-name'];
  api.user.setUserMetadata("firstName", firstName);
};

Optionally, you can validate the user input and send a validation error by calling the api.validation.error method:

exports.onExecutePreUserRegistration = async (event, api) => {
  const firstName = event.request.body['ulp-first-name'];
  if(!firstName) {
    api.validation.error("invalid_payload", "Missing first name");
    return;
  }

  api.user.setUserMetadata("firstName", firstName);
};

Deploy the action.

Navigate to Actions > Flows > Pre User Registration > Add Action > Custom, then drag and drop your new action into the registration flow and click Apply.

Sign up for an account and leave the “First Name” field blank. You see an error on submit:

Now, enter a name in the First Name field and you are able to submit successfully:

Check User Management > Users to ensure the data has been saved: