Skip to content

Instantly share code, notes, and snippets.

@Tanver-Hasan

Tanver-Hasan/hostedLoginPage.html

Created November 25, 2021 21:09
Show Gist options
  • Save Tanver-Hasan/df3ea8e5f64496fae9424d09d6295636 to your computer and use it in GitHub Desktop.
Save Tanver-Hasan/df3ea8e5f64496fae9424d09d6295636 to your computer and use it in GitHub Desktop.
Download ZIP
Auth0 Custom Login Form template (username/password, social, passwordless sms)
Raw
hostedLoginPage.html
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<style>
body, html {
height: 100%;
background-color: #f9f9f9;
}
.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;
}
.login-header {
text-align: center;
}
.login-header img {
width: 75px;
}
.iti { width: 100%; }
#error-message {
display: none;
white-space: break-spaces;
}
</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="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"/>
<h3>Welcome</h3>
<h5>PLEASE LOG IN</h5>
</div>
<div id="error-message" class="alert alert-danger"></div>
<form onsubmit="return false;" method="post">
<div id="login-section">
<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>
<div class="captcha-container form-group"></div>
<button type="submit" id="btn-login" class="btn btn-primary btn-block"> Log In </button>
<button type="button" id="btn-signup" class="btn btn-default btn-block"> Sign Up</button>
<button type="button" id="btn-google" class="btn btn-default btn-danger btn-block"> Log In with Google </button>
<hr />
<div class="form-group" id="send-otp">
<label for="phone_number">Phone Number</label>
<input type="tel" class="form-control" id="phone_number" placeholder="Enter phone number">
<br /> <br />
<button type="submit" id="btn-send-otp" class="btn btn-default btn-block"> Send OTP </button>
</div>
</div>
<div class="form-group" id="otp-verify">
<label for="otp">Enter OTP</label>
<input type="number" class="form-control" id="otp" placeholder="Enter OTP"> <br />
<button type="submit" id="btn-verify-otp" class="btn btn-default btn-block"> Verify OTP </button>
<button type="button" id="resend-otp" class="btn btn-primary btn-block"> Resend OTP </button>
</div>
</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.16/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
const phoneInputField = document.querySelector("#phone_number");
const phoneInput = window.intlTelInput(phoneInputField, {
initialCountry: "GB",
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
var errorMessage = document.getElementById('error-message');
var otpSendSection= document.querySelector('#send-otp');
var otpVerifySection= document.querySelector('#otp-verify');
var loginSection= document.querySelector('#login-section');
otpVerifySection.style.display = "none";
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;
button.disabled = true;
webAuth.redirect.signupAndLogin({
connection: databaseConnection,
email: email,
password: password,
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 sendOtp(e) {
e.preventDefault();
console.log("called");
var button = this;
const phoneNumber = phoneInput.getNumber();
if(phoneNumber && phoneInput.isValidNumber()){
webAuth.passwordlessStart(
{
connection: 'sms',
send: 'code',
phoneNumber: phoneNumber
},
(err) => {
if (err) displayError(err);
// otpSendSection.style.display= "none";
loginSection.style.display= "none";
otpVerifySection.style.display= "block";
errorMessage.style.display = 'none';
}
);
}else{
var err={
description: "Phone number is not valid"
}
displayError(err);
}
}
function verifyOtp() {
var verificationCode= document.getElementById("otp").value;
const phoneNumber = phoneInput.getNumber();
if(verificationCode){
webAuth.passwordlessLogin({
connection: 'sms',
verificationCode: verificationCode,
phoneNumber: phoneNumber
}, function(err) {
if (err) displayError(err);
});
}else{
var err={
description:"Please enter OTP"
}
displayError(err);
}
}
function resendOtp(){
errorMessage.style.display = 'none';
otpVerifySection.style.display= "none";
loginSection.style.display="block";
}
function displayError(err) {
captcha.reload();
errorMessage.innerHTML = 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);
document.getElementById('btn-send-otp').addEventListener('click', sendOtp);
document.getElementById('btn-verify-otp').addEventListener('click', verifyOtp);
document.getElementById('resend-otp').addEventListener('click', resendOtp);
});
</script>
</body>
</html>
@Tanver-Hasan
Copy link
Author

Login Page

Screenshot 2021-11-25 at 21 10 44

OTP Verification Page

Screenshot 2021-11-25 at 21 11 04

@Tanver-Hasan
Copy link
Author

https://auth0.com/docs/login/universal-login/passwordless-login/email-or-sms#universal-login-custom-ui-auth0-js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment