Adding Field to Custom Login

Help
,
1

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);
});
3

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.

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

5

Hey team!

This topic seems related to our new EA feature, Forms for Actions, which rolled out of the beta stage on May 7th. Our Product team prepared the whole Documentation page with examples of Use cases. Forms for Actions. If you find yourself having questions regarding this new feature for the next two weeks, we are hosting an Ask Me Anything session. Our Product Expert will provide comprehensive written answers on May 21st from 8 AM to 10 AM PST.
Find out more about Forms for Actions and learn more about AMA.

Thanks!
Dawid