Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A workaround to check the user email verification state for the Auth0 DB on the hosted page
<!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>
<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;
}
#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="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 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">
Log In
</button>
<button
type="button"
id="btn-signup"
class="btn btn-default btn-block">
Sign Up
</button>
<hr>
<button
type="button"
id="btn-test"
class="btn btn-default btn-danger btn-block">
Check if Email verified.
</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.10/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
var myUserPassRes;
var jQDoc;
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);
console.log(config);
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 displayError(err) {
var errorMessage = document.getElementById('error-message');
errorMessage.innerHTML = err.description;
errorMessage.style.display = 'block';
}
function parseJwt (token) {
if (!token || token.split('.').length !== 3)
return {err:"InvalidToken"};
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
return JSON.parse(window.atob(base64));
};
function checkEmailVerified() {
fetch('https://' + config.auth0Domain + '/usernamepassword/login', {
method: 'POST',
body: JSON.stringify({
client_id: config.clientID,
connection: databaseConnection,
nonce: config.internalOptions.nonce,
password: document.getElementById('password').value,
redirect_uri: config.callbackURL,
response_type: 'code',
scope: 'openid profile',
state: config.internalOptions.state,
tenant: config.auth0Tenant,
username: document.getElementById('email').value,
_csrf: config.internalOptions._csrf,
_intstate: config.internalOptions._intstate
}),
headers: {
'Content-type': 'application/json'
}
})
.then(res => res.text())
.then(function (res) {
var getToken = res.match(/ey([^"]+)/) && res.match(/ey([^"]+)/)[0];
console.log(getToken);
var tokenContent = parseJwt(getToken);
if (!tokenContent.email_verified) {
alert("Unverified email : " + tokenContent.email)
} else {
alert("Email verified for : " + tokenContent.email)
}
});
}
document.getElementById('btn-login').addEventListener('click', login);
document.getElementById('btn-signup').addEventListener('click', signup);
document.getElementById('btn-test').addEventListener('click', checkEmailVerified);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.