Signup page error on adding additional fields

[Aafreen_Khan]

Since I have added additional fields to the signup page through universal branding i am getting an error as shown in the attached picture on clicking Signup/Login button.

Below is my code please suggest something that can mitigate this error.

 <script src="https://cdn.auth0.com/js/lock/12.1/lock.min.js"></script>
  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;

    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;
    var colors = config.colors || {};

    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/lock-configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageBaseUrl: config.languageBaseUrl,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false
    });
    
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
    additionalSignUpFields: [
          {
            name: "given_name",
            placeholder: "first name",
            storage: "root"
          },
          {
            name: "family_name",
            placeholder: "last name",
            storage: "root"
          },
   {
    name: "address",
    placeholder: "enter your address",
    // The following properties are optional
    validator: function(address) {
      return {
         valid: address.length >= 10,
         hint: "Must have 10 or more chars" // optional
      };
    }
  }]
});

    if(colors.page_background) {
      var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
                  colors.page_background +
                ' }';
      var style = document.createElement('style');

      style.appendChild(document.createTextNode(css));

      document.body.appendChild(style);
    }
    
    lock.show();
  </script>`Preformatted text`

[dawid.matuszczyk]

Hi @Aafreen_Khan

Welcome to the Auth0 Community!

It looks like there is an error in your Lock code. You’re initializing the Auth0Lock twice. Once without the additional fields:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, { ... });

And then a second time with the additional fields:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
    additionalSignUpFields: [ ... ]
});

This would likely cause the first lock instance (without the additional fields) to be overwritten by the second one, which could be the cause of your error.

You should only initialize Auth0Lock once, and include the additionalSignUpFields in the initial configuration. Here’s how:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  // ... your other options ...
  
  additionalSignUpFields: [
    {
      name: "given_name",
      placeholder: "first name",
      storage: "root"
    },
    {
      name: "family_name",
      placeholder: "last name",
      storage: "root"
    },
  ]
});

Make this change, and your issue should be resolved. Let me know if you have any further questions or issues!

Have a great day!

Dawid

[Aafreen_Khan]

Hi @dawid.matuszczyk

Thanks a lot for your help.
It worked! Thanks again.

Best wishes,
Aafreen