Lock: Additional Signup Fields do not render

[dharness]

When adding additional fields with:

additionalSignUpFields: [{
  name: "address",
  icon: "https://example.com/assests/address_icon.png",
  placeholder: "enter your address",
  validator: function(address) {
    return address.length > 10;
  }
}]

as per the example, nothing is shown.

[gnandretta]

Hi @dharness, the options are provided to the constructor in the new version:

var lock = new Auth0Lock(clientId, domain, options);
lock.show();

We also renamed some options you are using (hoping to make their meaning clearer):

• allowSignUpAction was renamed allowSignUp.
• socialBigButtons was replaced by socialButtonStyle which takes either "big" or "small".

[dharness]

@gnandretta tremendous help! Thank you!

[rafaeljcuevas]

I'm having the same problem. I can't get the custom signup fields to show. Here is the code I am using:

    var options = {
        'theme': {
            'logo': 'img/Icons-big.png'
        },
        'container': 'auth0_form',
        'auth': {
            'redirectUrl': '<omitted>'
        },
        'additionalSignupFields': [{
            name: "address",
            icon: "img/address_icon.png",
            placeholder: "enter your address",
            validator: function(address) {
                return address.length > 10;
            }
        }]
    };

var lock = new Auth0Lock('', '.auth0.com', options);
lock.show();

[gnandretta]

Hi @protege527,

Option names are case sensitive, try with additionalSignUpFields (capital U)

[rafaeljcuevas]

That was it. It's works great. The property was added to the user metadata as expected. Thanks!

[talent3310]

Can I add other types such as radio and number,,,,
I tried but it doesn't work.
'additionalSignUpFields': [{
type: 'radio',
name: "gender",
icon: "img/address_icon.png",
placeholder: "your gender",
options: [
{value: "male", label: "Male"},
{value: "female", label: "FeMale"},
],
}]