How to create a "Forgot Password"/"Reset Password" link when using Universal Login BUT with Customize Login Page

[dcapsysadmin]

Hi There.

I’m using New Universal Login experience, although I have selected to Customize Login Page.

The HTML in the Customize Login Page does NOT contain any “password reset/forgot password” section, and no password reset/forgot password link or button appears in the resultant login screen.

How to I give users a password reset/forgot password link/button in a New Universal Login experience screen when I’ve chosen Customize Login Page?

Happy to follow a document, but all the documents I’ve read so far presume the existence of a password reset/forgot password link that I don’t currently have on my login form!!

For example:
Change Users' Passwords states:

If your application is using Universal Login, the user will be able to trigger a password reset from the login page. With the New Universal Login Experience, the user will click the Don’t remember your password? link and then enter their email address.

I’m using Universal Login / New Universal Login Experience - but there’s no Don’t remember your password link!!

Confused, pls help!

---

Note: what I’d like to do I guess is to add a “Don’t remember password” link onto that page which when clicked will go to the “Password Reset” page (where again, I’ll be customizing the HTML).

---

Note: I’ve now figured out that the “Password Reset” page is where you go AFTER receiving an email, not the page where you go to enter the email whose password you want to reset.

I’ve also figured out that if I GET https://mytenant.auth0.com/dbconnections/change_password?email=my@email.com&connection=Username-Password-Authentication&client_id=myclientId then I receive an email in my inbox.

Am I right in assuming then that what I have to do is:

1. Create a new “Forgot Password” page in my web site.
2. Have the text box to enter an email in that page, and then a button in that page to perform a GET against the change_password endpoint above?

Or does Auth0 provide such a page that somehow I can activate and utilize? (how?)

[Guangjie]

Hi dcapsysadmin,

Welcome to the Auth0 community.

I can see you’ve almost figured out the solution, but let me add some background/context here.

1 - Classic/New experience of universal login applies to the default, non-customized pages:

Auth0 Universal Login

2 - Once you customized a page in Universal Login, e.g. the login page, neither Classic nor New experience applies – you are on your own style.
People often get confused on this because the Classic experience uses Lock SDK, and the default SDK of customized login page is also Lock, which makes them look the same style. So many people (including me) thinks that “I can customize the Classic Universal Login, so how can I customize the New Universal Login?” It doesn’t work that way.

3 - When you customize the login page, you may have noticed there are 3 options for Default Templates: Lock, Lock(Passwordless), Custom login form.
Lock SDK has provided the reset password ability, if you choose this template, you will find the Don’t remember your password? link on the login UI.
Custom login form uses auth0.js SDK, which has the changePassword method as well. However the default template doesn’t included it in the UI, you will need to add this function by yourself. Here is an example code: Auth0.js v9 Reference

So back to your question/solution:

1. Create a new “Forgot Password” page in my web site.
2. Have the text box to enter an email in that page, and then a button in that page to perform a GET against the change_password endpoint above?

It will work. As mentioned above, if you use auth0.js SDK, you could just add a Reset Password link/button, and bind the changePassword method to it. Or you could consider using Lock.

[mohangovindasamy1331]

Hi @dcapsysadmin, @Guangjie. I’m also having the same need of forgot password button in custom login form. But I’m not a experienced programmer in using auth0.js SDK. So if any one could provide me a working example of the html code with reset password button. I can integrate it into my custom login form. I can use Lock but I need to change my background to an custom image which is not possible with Lock so I chose to go with custom login form.
This is what I came up with so far

function changePassword() {
webAuth.changePassword({
connection: ‘db-conn’,
email: ‘foo@bar.com’
}, function (err, resp) {
if(err){
console.log(err.message);
}else{
console.log(resp);
});
}

I’m intended to use this function similar to log in with Google button. But I want to know whether this works and what goes inside connection and email.

[dcapsysadmin]

Thanks to @Guangjie I was able to implement this:
    
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign Up/In to SITENAME</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
  <style>
    body, html {
      height: 100%;
      background-color: #f9f9f9;
      background-size:cover;
      background-image: url('LINK TO MY BACKGROUND IMAGE');
    }

    .login-container {
      position: relative;
      height: 100%;
    }

    .login-box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 15px;
      background-color: #fff;
      box-shadow: 0px 5px 5px #ccc;
      border-radius: 5px;
      border-top: 1px solid #e9e9e9;
      border: 1px solid grey;
    }

    .login-header {
      text-align: center;
    }

    .login-header img {
      width: 200px;
    }
    
    .forgot-password {
      text-align: right;
      float: right;
      font-size: 10px
    }

    #error-message {
      display: none;
    }
  </style>
<body>
  <div class="login-container">
    <div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
      <div class="login-header">
      	<img src="LINK TO MY LOGO"/>
      </div>
      <div id="error-message" class="alert alert-danger"></div>
      <form onsubmit="return false;" method="post">
        <div class="form-group">
         <label for="name">Email</label>
          <input
            type="email"
            class="form-control"
            id="email"
            placeholder="Enter your email">
        </div>
        <div class="form-group">
          <label for="name">Password</label>
          <input
            type="password"
            class="form-control"
            id="password"
            placeholder="Enter your password">
        </div>
        <button
          type="submit"
          id="btn-login"
          class="btn btn-primary btn-block">
            Sign In
        </button>
        <span class="forgot-password">
          <a href="no-javascript1.html" title="Forgot Password" id="link-reset">Forgot Password?</a>
        </span>
        <button
          type="button"
          id="btn-signup"
          class="btn btn-default btn-block">
            No account yet?  Sign Up
        </button>
        <hr>
        <button
          type="button"
          id="btn-google"
          class="btn btn-default btn-danger btn-block">
            Sign In with Google
        </button>
      </form>
    </div>
  </div>

  <!--[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/polyfills/1.0/base64.min.js"></script>
  <script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/auth0/9.11.2/auth0.min.js"></script>
  <script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
  <script>
    window.addEventListener('load', function() {

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

      var params = Object.assign({
        /* additional configuration needed for use of custom domains*/
        overrides: {
          __tenant: config.auth0Tenant,
          __token_issuer: 'login.mycustomdomain.com'
        }, 
        domain: config.auth0Domain,
        clientID: config.clientID,
        redirectUri: config.callbackURL,
        responseType: 'code'
      }, config.internalOptions);

      var webAuth = new auth0.WebAuth(params);

      var databaseConnection = 'Username-Password-Authentication';

      function login(e) {
        e.preventDefault();
        var username = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        webAuth.login({
          realm: databaseConnection,
          username: username,
          password: password
        }, function(err) {
          if (err) displayError(err);
        });
      }

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

        webAuth.redirect.signupAndLogin({
          connection: databaseConnection,
          email: email,
          password: password
        }, function(err) {
          if (err) displayError(err);
        });
      }

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

      function displayError(err) {
        var errorMessage = document.getElementById('error-message');
        errorMessage.innerHTML = err.description;
        errorMessage.style.display = 'block';
      }
      
      function resetPassword (e) {
        e.preventDefault();
				var email = document.getElementById('email').value;
        if(!email)
        {
          alert("Please enter your email.");
          return;
        }
    		webAuth.changePassword({
      		connection: databaseConnection ,
      		email:   email
    			}, function (err, resp) {
      		if(err){
        		console.log(err.message);
            alert(err.message);
      			}else{
        		console.log(resp);
            alert(resp);
      		}});
      }

      document.getElementById('btn-login').addEventListener('click', login);
      document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
      document.getElementById('btn-signup').addEventListener('click', signup);
      document.getElementById('link-reset').addEventListener('click', resetPassword);
    });
  </script>
</body>
</html>

[mohangovindasamy1331]

Thanks @dcapsysadmin. That worked like a charm. Only one thing, when we press log in without entering neither email nor password, it gives an empty error box without any message. Is it something we can change?

[konrad.sopala]

Thanks a lot for sharing it with the rest of community @dcapsysadmin!