Configure Additional Signup Fields on the Universal Login Page

Knowledge Articles
, , , ,
1

Last Updated: Jun 17, 2024

Overview

How to configure additional signup fields on the Universal Login page.

Applies To

  • Universal Login Page
  • Additional Signup Fields

Solution

There are a few requirements for this to work:

  • Tenant must use a Custom Domain.
  • A Custom Page Template should be configured.
  • Ensure the Customize Login Page toggle has been disabled for Login Prompts.

NOTE: Data capture is only available for users who use an email and password to sign up or login.

Prompt customization is now available out of the box. Refer to the Customize Signup and Login Prompts documentation for additional information.

Follow the video or steps below.

For example, if adding the Full Name field to the sign-up widget, follow these steps.

  1. On the Dashboard, navigate to Applications > APIs.
  2. Click on Auth0 Management API.
  3. Click API Explorer and copy the token.
  4. Go to the Management API Explorer.
  5. Click the Set API Token button and paste the API Token from step 3.
  6. Click the Set Token button.
  7. Select the prompt type - signup.
  8. In the body field, build the syntax that is needed.

Example Body:

> { 
> "signup": { 
> "form-content-start": "<div class='ulp-field'><label for='full-name'>Full Name</label> <input type='text' name='ulp-full-name' id='full-name'></div>" 
> }
>  }

NOTE: Object properties such as signup or from-content-start must be in double quotes, the same as the string value containing the HTML element. The HTML element properties must use single quotes.

  1. Click on Test Endpoint and confirm a 200 response code is received.

Example Pre-User Registration action:

exports.onExecutePreUserRegistration = async (event, api) => { 
  const fullName = event.request.body['ulp-full-name']; 
  if(!fullName) { 
    api.validation.error("invalid_payload", "Missing Name"); 
    return; 
  } 
  api.user.setUserMetadata("fullName", fullName); 
};
5 Likes