saltukalakus/hosted_email_verification.html

## hosted_email_verification.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">
</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>
	<!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>