Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A workaround to configure Passwordless Lock with an enterprise connection.
<!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" />
</head>
<body>
<!--[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/base64.js"></script>
<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/lock/11.15/lock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.auth0.com/js/auth0/9.2/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
// Decode utf8 characters properly
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
config.extraParams = config.extraParams || {};
var connection = config.connection;
var prompt = config.prompt;
var languageDictionary;
var language;
if (config.dict && config.dict.signin && config.dict.signin.title) {
languageDictionary = { title: config.dict.signin.title };
} else if (typeof config.dict === 'string') {
language = config.dict;
}
var loginHint = config.extraParams.login_hint;
var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
auth: {
redirectUrl: config.callbackURL,
responseType: (config.internalOptions || {}).response_type ||
(config.callbackOnLocationHash ? 'token' : 'code'),
params: config.internalOptions
},
/* additional config needed to use custom domains
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.auth0Domain
}, */
assetsUrl: config.assetsUrl,
allowedConnections: connection ? [connection] : null,
rememberLastLogin: !prompt,
language: language,
languageDictionary: languageDictionary,
theme: {
//logo: 'YOUR LOGO HERE',
//primaryColor: 'green'
},
closable: false,
// uncomment if you want small buttons for social providers
// socialButtonStyle: 'small'
});
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);
lock.show();
/* This function enables to capture the entered emails.
* Once the email domain matches any of the whitelisted ones,
* the user will be redirected to the configured connection.
* In this example it is TestSAML.
*
* If for specific domains, you would want to prevent passwordless
* login, it is mandatory to add an Auth0 rule which will prevent
* those users to authenticate. Frontend check isn't enough
* to ensure this.
*/
lock.on("socialOrEmail ready", function(authResult) {
$("input[name='email']")[0].addEventListener('input', e => {
const email = $("input[name='email']").val()
const whitelist = ['gmail.com', 'hotmail.com']; //authorized domains
const useConnection = whitelist.some(
function (domain) {
const emailSplit = email.split('@');
return emailSplit[emailSplit.length - 1].toLowerCase() === domain
&& emailSplit.length === 2;
});
if (useConnection) {
$(".auth0-lock-submit").attr("disabled", true);
webAuth.authorize({
connection: 'TestSAML'
}, function(err) {
if (err) alert(err);
});
} else {
$(".auth0-lock-submit").attr("disabled", false);
}
})
});
</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.