Can I add additional field with Hosted UI login page?

Help
, ,
1

I wanted to use the hosted login page for user login. I was wondering, is there a way to add additional field to the registration form in Hosted UI login page without a database login? I meant to have it directly in the hosted UI login page, and not collect later.

For example, if I want the user to provide the address when they register through Auth0 hosted UI, can I easily do that? I tried reading this online, but was a little confused by the answers.

1 Like
2

Yes, you can edit the hosted login page in your dashboard and add any additional fields you require. It would look something like:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
    (...)
    additionalSignUpFields: {
        name: "address",
        placeholder: "enter your address",
        // The following properties are optional
        icon: "https://example.com/assests/address_icon.png",
        prefill: "street 123",
        validator: function(address) {
            return {
                valid: address.length >= 10,
                hint: "Must have 10 or more chars" // optional
            };
        }
    },
    {
        name: "full_name",
        placeholder: "Enter your full name"
    }]
});
lock.show();

When your users sign up, the custom fields are sent as part of user_metadata. The limitations of this field are defined here: Custom Signup

You can read more about the customization of Lock and [custom signup] (https://auth0.com/docs/libraries/custom-signup) in these documents.

1 Like