Customizations for Signup and Login are Generally Available

Every company has unique user registration and login requirements. For example, needing to capture a first and a last name during signup or requiring users to agree to terms and conditions before they can create an account.

To meet those specific business needs and use cases, we have introduced pro-code customizations for signup and login to the Universal Login experience. This capability is available to customers on our Enterprise and Professional plans.

Using this capability, customers can insert additional form fields and custom content into the signup and login screens and include client and server-side validations to ensure that required data, such as TOS acceptance, are completed and validated before completing the authentication process.

Use cases include:

• Adding new fields to collect necessary customer data (name, phone number, email, preferences, consent, etc.)
• Adding new form elements for presenting and capturing TOS/privacy policy and opt-in before signup
• Adding custom content such as URLs, images, or marketing information
• Localizing custom elements in different languages

Getting started

The new Partials API allow developers to insert custom HTML, CSS, and Javascript into the Signup and Login screens. Developers can insert new form elements and custom content, perform asynchronous client-side validation via Javascript, and leverage Liquid syntax to perform conditional logic and insert dynamic variables. Here is an example of inserting custom code into the Signup screen:

# eg: PUT /api/v2/prompts/signup/partials

# Request Body
{
  "signup": {
    "form-content-start": "<div class='ulp-field'><label for='first-name'>Full Name</label><input type='text' name='ulp-full-name' id='full-name'></div>",
    "form-content-end": "<div class='ulp-field'><input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'><label for='terms-of-service'>I agree to the <a href='https://my.app/terms' target='_blank'>Terms of service</a></label></div>",
  }
}

Once the user submits the Signup form customers will have access to the data via Actions. Here is an example of saving user provided custom data to the user_metada for the end user

/**
* Given this code in the signup form:
* <div class="ulp-field">
*   <label for="full-name">Full Name</label>
*   <input type="text" name="ulp-full-name" id="full-name">
* </div>
* <div class="ulp-field">
*   <label for="terms-of-service">
*     I agree to the <a href='https://my.app/terms' target='_blank'>Terms of service</a>
*   </label>
*   <input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'>
* </div>
**/

exports.onExecutePreUserRegistration = async (event, api) => {
  const fullName = event.request.body['ulp-full-name'];
  const terms = event.request.body['ulp-terms-of-service'];
  
  if(!fullName) {
    api.validation.error("invalid_payload", "Missing Name");
    return;
  }
  
  if(!terms) {
    api.validation.error("invalid_payload", "Acceptance is Required");
    return; 
  }

  api.user.setUserMetadata("fullName", fullName);
  api.user.setUserMetadata("termsAcceptance", terms);
};

To learn more about how Signup and Login Prompt Customizations works and to view tutorials and examples, refer to the public documentation.

• Custom-facing Documentation: Customize Signup and Login Prompts
• Management API Documentation: Auth0 Management API v2: Manage Partials