An Option to see password on the Change Password page (Lock.js)

rueben.tiow · August 17, 2023, 12:27am

Problem statement

The Lock.js allows configuring an option for the user to show their password when typing it.

The option is allowShowPassword: true, and it’s documented here:

https://auth0.com/docs/libraries/lock/lock-configuration#allowshowpassword-boolean-

Unfortunately, this doesn’t apply to the Password Reset template.

Solution

As a workaround, you can implement a custom javascript:

const showHideButton = document.createElement(`a`);
showHideButton.href = `#`;
showHideButton.innerText = `show/hide password`;
showHideButton.addEventListener("click", function () {
  const passwordInputs = document.querySelectorAll(`input[name="password"]`);
  for (const passwordInput of passwordInputs) {
    if (passwordInput.type === `password`) {
      passwordInput.type = `text`;
    } else {
      passwordInput.type = `password`;
    }
  }
});
const formEle = document.querySelector(`.auth0-lock-form`);
formEle.appendChild(showHideButton);