How to configure additional signup fields on the Universal Login Page

Problem Statement

Trouble configuring additional sign-up fields on the Universal Login Page.

Solution

When using the Universal Login Page, there are two scenarios to consider, namely the New Universal Login experience and the Classic Universal Login Experience.

At the moment, the New Universal Login Experience does not support configuring additional signup fields. The New Universal Login Experience only supports progressive profiling to enrich the users’ profile, and the Signup Prompt only has the option to modify the Signup Text Prompt.

See:

In this case, you must use the Classic Universal Login Experience to configure additional signup fields.

Begin by making sure you have selected the Classic Universal Login Experience in your Universal Login settings. Navigate to your Auth0 Dashboard > Branding > Universal Login > Settings and select the Classic Universal Login Experience. Don’t forget to save your changes at the bottom of the page.

Next, proceed to your custom Universal Login page and configure Lock to use the additionalSignupFields to collect additional fields from the user during signup.

For example:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
    additionalSignUpFields: [{
    name: "favorite_color",
    placeholder: "Enter your favorite color (optional)",
    validator: function() { 
        return true;
    }
    }],
    //...code redacted for brevity
});

Resulting page:

Please see the additionalSignupFields documentation reference for the full guide and examples on using the additionalSignupFields.

Reference Materials

1 Like