Adding Field to Custom Login

[matthewyoung245]

How do I add an additional field in the Custom UI login? Where do I add that into the code?

  window.addEventListener('load', function() {

  var config = JSON.parse(
    decodeURIComponent(escape(window.atob('@@config@@')))
  );

  var leeway = config.internalOptions.leeway;
  if (leeway) {
    var convertedLeeway = parseInt(leeway);

    if (!isNaN(convertedLeeway)) {
      config.internalOptions.leeway = convertedLeeway;
    }
  }

  var params = Object.assign({
    overrides: {
      __tenant: config.auth0Tenant,
      __token_issuer: config.authorizationServer.issuer
    },
    domain: config.auth0Domain,
    clientID: config.clientID,
    redirectUri: config.callbackURL,
    responseType: 'code'
  }, config.internalOptions);

  var webAuth = new auth0.WebAuth(params);
  var databaseConnection = 'Username-Password-Authentication';
  var captcha = webAuth.renderCaptcha(
    document.querySelector('.captcha-container')
  );

  function login(e) {
    e.preventDefault();
    var button = this;
    var username = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    button.disabled = true;
    webAuth.login({
      realm: databaseConnection,
      username: username,
      password: password,
      captcha: captcha.getValue()
    }, function(err) {
      if (err) displayError(err);
      button.disabled = false;
    });
  }

  function signup() {
    var button = this;
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    var firstname = document.getElementById('firstname').value;

    button.disabled = true;
    webAuth.redirect.signupAndLogin({
      connection: databaseConnection,
      email: email,
      password: password,
      firstname: firstname,
      captcha: captcha.getValue()
    }, function(err) {
      if (err) displayError(err);
      button.disabled = false;
    });
  }

  function loginWithGoogle() {
    webAuth.authorize({
      connection: 'google-oauth2'
    }, function(err) {
      if (err) displayError(err);
    });
  }

  function displayError(err) {
    captcha.reload();
    var errorMessage = document.getElementById('error-message');
    errorMessage.innerText = err.policy || err.description;
    errorMessage.style.display = 'block';
  }

  document.getElementById('btn-login').addEventListener('click', login);
  document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
  document.getElementById('btn-signup').addEventListener('click', signup);
});

[dan.woda]

Hi @matthewyoung245,

This page is HTML and vanilla javascript, you can add a new field in the form by using html form elements (here’s a good reference).

For example:

        <div class="form-group">
          <label for="name">Favorite Color</label>
           <input
             type="string"
             class="form-control"
             id="color"
             placeholder="Enter your favorite color">
        </div>

Then, you can send them to Auth0 with the Auth0.js SDK in the user_medata field. There’s and example on this page:

https://auth0.com/docs/libraries/auth0js#signup

Keep in mind, you will likely need to implement separate login and signup pages to execute this, otherwise the additional field will show for all logins if you’re using the demo code.