Customize Universal Login (Lock) with additionalSignUpFields

Help
6

Hi @tony.wolsey,

You can use this code if you use the Classic login experience of the Universal Login. To customize the hosted login pages, navigate to Universal Login section in your dashboard.

There, you will find four tabs. Settings, Login, Password Reset, Multi-factor Authentication

Login tab allows you to customize the… Login page.

There, you can use use the toggle button Customize Login Page to enable the template so you can further customize it. There the magic happens.

There are pre-made Default Templates you can start with. Select Lock in this case. Inspect the code and around the line number 39, you can see it initializes the Lock.

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
    auth: {
        redirectUrl: config.callbackURL,
        // options object continues...

The third parameter passed to the Auth0Lock are the options object. You can pass additionalSignUpFields to that same object. Let me paste what I have in my own tenant’s customised login page here.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

  <!--[if IE 8]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
  <![endif]-->

  <!--[if lte IE 9]>
  <script src="https://cdn.auth0.com/js/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/11.20/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/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: 'YOUR_CUSTOM_DOMAIN'
      }, */
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
      additionalSignUpFields: [{
        name: "first_name",
        placeholder: "Enter your first name"
      }, {
      	type: "select",
        name: "location",
        placeholder: "Choose your location",
        options: [
          {value: "us", label: "United States"},
          {value: "fr", label: "France"},
          {value: "ar", label: "Argentina"}
        ],
        // The following properties are optional
        icon: "https://example.com/assests/location_icon.png",
        prefill: "us"
      }]
    });

    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>
</body>
</html>

Hope this helps!

4 Likes