Azure B2C sign-up. Hide password fields until verification code entered?

Question

In Azure B2C Sign Up page, is there a way to have all the password and "display name" fields hidden until the verification code has been successfully entered and verified?

We've read this page on what customisations can be done: https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization and it states JavaScript is not allowed.

So wondering if there's another way to accomplish this task?

Thanks!

Answer 1

At this time there is no way to only show the password and user attributes fields after the verification code experience has complete.

You can request this specific feature in the Azure AD B2C feedback forum or vote for the more generic "Add support for JavaScript inside the custom UI branding page" feedback entry.

Answer 2

You can add your own JavaScript client-side code to your Azure Active Directory (Azure AD) B2C applications. Below article describes how you can change your user flow or custom policy to enable script execution.

https://docs.microsoft.com/en-us/azure/active-directory-b2c/javascript-samples#javascript-samples

Sample javascript code to show/hide password input item

function makePwdToggler(pwd){
  // Create show-password checkbox
  var checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  var id = pwd.id + 'toggler';
  checkbox.setAttribute('id', id);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.appendChild(document.createTextNode('show password'));

  var div = document.createElement('div');
  div.appendChild(checkbox);
  div.appendChild(label);

  // Add show-password checkbox under password input
  pwd.insertAdjacentElement('afterend', div);

  // Add toggle password callback
  function toggle(){
    if(pwd.type === 'password'){
      pwd.type = 'text';
    } else {
      pwd.type = 'password';
    }
  }
  checkbox.onclick = toggle;
  // For non-mouse usage
  checkbox.onkeydown = toggle;
}

function setupPwdTogglers(){
  var pwdInputs = document.querySelectorAll('input[type=password]');
  for (var i = 0; i < pwdInputs.length; i++) {
    makePwdToggler(pwdInputs[i]);
  }
}

setupPwdTogglers();

Hope it helps.