Ability to Prompt Users for First and Last Name when using the New Universal Login Experience Signup Flow

Knowledge Solutions
, , ,
1

Problem Statement

This article explains whether it is possible to prompt users for first and last name when using the New Universal Login Experience signup flow.

Solution

PUT api/v2/prompts/signup/partials
{
  "signup": {
    "form-content-start": "<script>function validateName(element, formSubmitted) {if (!formSubmitted) {return true;}return element.value.length > 0;}</script><div class='ulp-field'><label for='first-name'>First Name</label><input type='text' name='ulp-first-name' id='first-name'><div class='ulp-error-info' data-ulp-validation-function='validateName' data-ulp-validation-event-listeners='blur,change,input,focus'>First Name is Required</div></div><div class='ulp-field'><label for='last-name'>Last Name</label><input type='text' name='ulp-last-name' id='last-name'><div class='ulp-error-info' data-ulp-validation-function='validateName' data-ulp-validation-event-listeners='blur,change,input,focus'>Last Name is Required</div></div>"
  }
}

The sample script above checks the length of fields and, if they have zero length, prevents the click event on the client side. The logic can be customized by updating the validateName function. This sample adds the fields above the username and password fields. To move them to the bottom, form-content-start can be replaced with form-content-end. A full list of options is available in the documentation.

Updating the user profile needs a custom Pre-User registration Action. Here is a sample of how to store these fields in the user’s user metadata;

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