Кстати, если мы используем шаблон блокировки, это уже встроенная функция, Я хочу реализовать тот же самый в пользовательском логине в форме, ниже мой текущий код FYI. Что касается этого, я ознакомился с некоторыми статьями, перечисленными по ссылкам ниже, может кто-нибудь помочь мне в этом, очень признателен. * 
Справочные ссылки:
https://community.auth0.com/t/how-to-create-a-forgot-password-reset-password-link-when-using-universal-login-but-with-customize-login-page/33992/2
https://community.auth0.com/t/how-do-you-reset-the-password-with-custom-ui/6758
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: 'YOUR_CUSTOM_DOMAIN'
}, */
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 loginWithFacebook() {
webAuth.authorize({
connection: 'facebook'
}, function(err) {
if (err) displayError(err);
});
}
function displayError(err) {
var errorMessage = document.getElementById('error-message');
errorMessage.innerHTML = err.description;
errorMessage.style.display = 'block';
}
document.getElementById('btn-login').addEventListener('click', login);
document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
document.getElementById('btn-facebook-signup').addEventListener('click', loginWithFacebook);
document.getElementById('btn-signup').addEventListener('click', signup);
});
body, html {height: 100%; background-color: #ffffff; font: 300 14px Roboto, sans-serif;}
input[type='checkbox']{position:relative;margin:0 4px 0 0;cursor:pointer;box-shadow:none;border:0;display:inline-block;width:16px;top:0px;}
input[type='checkbox']:before{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;content:"";position:absolute;left:0;z-index:1;width:16px;height:16px;border:2px solid #d7d7e4;}
input[type='checkbox']:checked:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);height:9px;width:16px;border-color:#00AFF0;border-top-style:none;border-right-style:none;}
input[type='checkbox']:after{content:"";position:absolute;top:-3px;left:0;width:18px;height:21px;background:#fff;cursor:pointer;}
.form-control{border-radius:0;box-shadow:none;}
h1,h2{font-family:Roboto, sans-serif;color:rgba(0, 0, 0, 0.87);font-weight:300;}
.label--checkbox{position:relative;margin:0px 0 6px;font-family:'roboto';font-weight:400;cursor:pointer;}
/*Icons*/
@font-face{font-family:'Material-Design-Iconic-Font';font-display:swap;src:url('https://securemedia.newjobs.com/global/fonts/materialdesigniconicfont/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'), url('https://securemedia.newjobs.com/global/fonts/materialdesigniconicfont/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'), url('https://securemedia.newjobs.com/global/fonts/materialdesigniconicfont/Material-Design-Iconic-Font.ttf?v=2.2.0') format('truetype');font-weight:normal;font-style:normal;}
.zmdi{display:inline-block;font:normal normal normal 14px/1 'Material-Design-Iconic-Font';font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.zmdi-lock:before{content:'\f191';}
.zmdi-account:before{content:'\f207';}
.zmdi-facebook:before{content:'\f343';}
.zmdi-lock:before{content:'\f191';}
.zmdi-account:before{content:'\f207';}
.zmdi-facebook:before{content:'\f343';}
/*Buttons*/
.btn.btn-md{height:48px;padding:15px 12px;}
.btn:active,.btn:focus{box-shadow:none;}
.btn-purple-fill{background:#642891;border-color:transparent;border-radius:0;color:#ffffff;font:400 14px 'Roboto', sans-serif;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.btn-purple-fill:hover,.btn-purple-fill:active,.btn-purple-fill:focus{background:#78449f;color:#ffffff;box-shadow:none;}
.btn-facebook{background:#3b5998;border-color:transparent;border-radius:0;color:#ffffff;font:400 14px 'Roboto', sans-serif;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.btn-facebook:hover,.btn-facebook:active,.btn-facebook:focus{background:#5778be;color:#ffffff;}
.btn-facebook .zmdi-facebook{background-color:#fff;color:#3b5998;font-size:24px;font-weight:normal;left:12px;position:absolute;top:11px;padding:2px 6px;border-radius:2px;}
/*Form, input, checkbox etc spacing..*/
.form-control{-webkit-appearance:none;color:#333;font-weight:400;}
form a{color:#642891;font-weight:400;}
form a:hover,form a:active,form a:focus{color:#642891;text-decoration:underline;}
form label{font-size:12px;font-weight:500;line-height:16px;margin-bottom:4px;}
form .form-group{margin-bottom:12px;}
form .form-control{color:#212121;color:rgba(0, 0, 0, 0.87);border-width:1px;border-style:solid;border-color:#bdbdbd;border-color:rgba(0, 0, 0, 0.26);border-radius:0;font-size:14px;padding:8px 12px;margin:0;height:40px;background-color:transparent!important;}
.form-control:focus{border-color:#00AFF0;box-shadow:none;}
.login-form h2{font-weight:400;font-size:14px;line-height:18px;font-family:Roboto, sans-serif;color:rgba(0, 0, 0, 0.87);}
.has-feedback .form-control{padding-right:34px;}
.has-feedback-left .form-control{padding-right:12px;padding-left:40px;}
.has-feedback-left .form-control-feedback{left:0;}
.form-control-feedback{line-height:34px!important;}
.has-feedback .form-control-feedback{color:#757575;color:rgba(0, 0, 0, 0.54);font-size:27px;position:absolute;top:24px;left:8px;right:0;display:block;width:24px;height:28px;line-height:34px;text-align:center;}
.form-container-login-page .label--checkbox input{margin-right:12px;}
form .btn{margin:0 0 16px;}
form #btn-login{margin:24px 0 17px;}
.login-form-options{padding-top:2px;}
.btn-block + .btn-block{margin-top:8px;}
input[type=checkbox]{width:18px;}
.label--checkbox{position:relative;margin:0;font-size:14px;font-weight:400;line-height:20px;cursor:pointer;}
input[type=checkbox]{position:relative;margin:0;cursor:pointer;box-shadow:none;border:0;display:inline-block;width:18px;height:20px;vertical-align:text-top;}
input[type='checkbox']:after{content:"";position:absolute;top:-3px;left:0;width:20px;height:23px;background:#ffffff;border:1px solid #e0e0e0;border:1px solid rgba(0, 0, 0, 0.12);cursor:pointer;}
input[type='checkbox']:before{border:2px solid transparent;left:4px;top:4px;width:13px;height:8px;transition:0s;}
input[type='checkbox']:checked:before{height:5px;width:13px;}
.btn-signup{font-size:12px;line-height:20px;font-weight:500;padding:7px 16px;color:#642891;border:1px solid #642891;transition:all .2s ease-in;display:inline-block;}
.btn-signup:active,.btn-signup:focus,.btn-signup:hover{font-size:12px;font-weight:500;color:#fff;background:#642891;text-decoration:none;transition:all .2s ease-in;}
.googleSignin{color:#fff;font-weight:500;background-color:#0073e9;border:none;position:relative;height:40px;margin-bottom:12px;font-size:14px;padding:0 0 0 0px;line-height:22px;}
.googleSignin:disabled{cursor:not-allowed;background-color:rgb(229, 229, 229);}
.googleSignin:hover,.googleSignin:focus{-webkit-box-shadow:0 0 3px 3px rgba(66,133,244,.3);box-shadow:0 0 3px 3px rgba(66,133,244,.3);}
.googleSignin span{padding:10px 14px;display:inline-block;}
.googleSignin img{display:inline-block;position:absolute;left:-3px;top:-3px;}
/*-----Or|Divider| Stytling---- */
.or-divider{margin:24px 0;text-align:center;border-top:1px solid #ebebeb;height:0;position:relative;}
.or-divider .or-divider-text{color:#757575;color:rgba(0, 0, 0, 0.54);font-size:14px;font-weight:400;line-height:20px;text-align:center;display:inline-block;padding:8px;background:#fff;border-radius:20px;margin:0 auto;position:relative;top:-19px;}
.login-header {margin-top: 50px; margin-bottom: 20px;}
.login-header h1 {font-size: 24px; line-height: 32px;}
#error-message {display: none;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign In with Auth0</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>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-4 form-container-login-page">
<div class="login-header">
<h1>Sign In With Auth0 Testing Form</h1>
</div>
<div id="error-message" class="alert alert-danger"></div>
<form onsubmit="return false;" method="post">
<div class="form-group has-feedback has-feedback-left">
<label for="name">Email</label>
<input
type="email"
class="form-control"
id="email"
placeholder="Enter your email">
<i class="form-control-feedback zmdi zmdi-account"></i>
</div>
<div class="form-group has-feedback has-feedback-left">
<label for="name">Password</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
<i class="form-control-feedback zmdi zmdi-lock"></i>
</div>
<div class="login-form-options">
<label for="PersistLogin" class="label--checkbox">
<input name="PersistLogin" id="PersistLogin" value="true" type="checkbox">
<input name="PersistLogin" type="hidden" value="false" />Keep me logged in
</label>
<span class="pull-right"><a class="m-link" href="javascript:void(0)">Forgot password?</a> </span>
</div>
<button
type="submit"
id="btn-login"
class="btn btn-md btn-block btn-purple-fill">
Sign In
</button>
<div class="or-divider">
<span class="or-divider-text">OR</span>
</div>
<div class="btn-group btn-block" id="facebookDiv">
<a id="btn-facebook-signup" class="btn btn-md btn-block btn-facebook">
<i class="zmdi zmdi-facebook"></i>
Sign In with Facebook
</a>
</div>
<div class="btn-group btn-block" id="googleDiv">
<button id="btn-google" class="googleSignin btn-block" type="button">
<img src="https://securemedia.newjobs.com/global/img/icons/btn_google_dark_normal_ios.svg" alt="Google logo">
<span>Sign in with Google</span>
</button>
</div>
<div class="form-group login-form">
<h2>Don't have a Company account?</h2>
<a id="btn-signup" class="btn-signup" role="button">Sign Up</a>
</div>
</form>
</div>
</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.12/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
</body>
</html>