additionalSignUpFields not working as expected

Help
1

Hello! I am trying to add an additional field to my Auth0 login page. But I am unable to get it to work as explained here in the docs. I have tried everything I can think of. Can anyone see what I am doing wrong? Other options, like allowForgotPassword: false work fine.

// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/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
  },
  /* additional configuration needed for custom domains */
  configurationBaseUrl: config.clientConfigurationBaseUrl,
  overrides: {
    __tenant: config.auth0Tenant,
    __token_issuer: ""
  },
  assetsUrl:  config.assetsUrl,
  allowedConnections: connection ? [connection] : null,
  rememberLastLogin: !prompt,
  language: language,
  languageDictionary: languageDictionary,
  theme: {
    logo: logoToUse,
    primaryColor:  colors.primary ? colors.primary : 'green'
  },
  prefill: loginHint ? { email: loginHint, username: loginHint } : null,
  closable: false,
  defaultADUsernameFromEmailPrefix: false,
  additionalSignUpFields: [{
    type: "checkbox",
    name: "patientprivacy",
    prefill: "true",
    placeholder: "I hereby agree that I want to receive marketing emails from your company"
  }]
});

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();
2

Hello, @suzette - welcome to the Auth0 Community!

I have tried the exact same code that you pasted and got it to work, except for one change:

Screen Shot 2020-09-23 at 4.47.39 PM
Screen Shot 2020-09-23 at 4.47.39 PM658×1038 56.5 KB

Under the theme object, there is no reference to logoToUse - you have to use an actual URL to an image there, or set the logoToUse variable/constant to that URL so that it works.

Can you please address that in your template or remove the line, and let me know if it works?

3

Thank you for your reply! The logoToUse variable is created outside of the lock function. But I did try using a hardcoded url string as well as removing the line but that did not change the output. Even if additionalSignUpFields is the only option passed I am not seeing any change.

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  additionalSignUpFields: [{
    type: "checkbox",
    name: "patientprivacy",
    prefill: "true",
    placeholder: "I hereby agree that I want to receive marketing emails from your company"
  }]
});

But if it is working for you then perhaps it has to do with some sort of cacheing or other settings in my Auth0 account?

This is the version of lock that I am using:
<script src="https://cdn.auth0.com/js/lock/11.21/lock.min.js"></script>

4

Hello, @suzette,

By only having that option, you are missing other options that are vital for Lock’s functionality. You should be following the instructions we provide in our documentation to add these to your setup.

There is no caching in tenants, so the only difference here would be the code that you modify.

I suggest that you reset your template and give this another try, from scratch.

5

Ah, I see my problem. I was expecting the field to show up on the Login tab, but clearly this is additionalSignUpSFields so it is showing up on the Login tab.

6

Hello, @suzette,

Indeed - this is only for the signup tab. The login tab will not contain this information. There is currently no way to edit that tab.