It seems that when a user signs up with an unauthorized email domain, they are still sent to the callback page with the error returned in the header rather than stopping them at the modal. Is there some way to display an error similar to “This user already exists”, but for users who are using an unauthorized domain?
Take a look at the flashMessage options in Lock:
This would be really nice if it were easier to implement out of the box and using the hosted login page.
We have a rather straight-forward requirement to:
- Use hosted login page
- only allow signups for whitelisted domains
- If someone signs up with a domain that is not whitelisted: show error using lock, the same way other errors (e.g. user exists) are shown.
This does not seem easy to do. It looks like flashMessage is not intended to be used with hosted login pages (Lock still not showing rule errors in redirect mode · Issue #692 · auth0/lock · GitHub). It could probably be done, but would take effort and might break other things.
It would be nice if there were a way to invoke flashMessage after lock.show() is called with something like lock.flashMessage(). That way, we could build some validation ourselves, e.g.
lock.show();
lock.once('signin ready', function(options) {
// Try to match a domain every time the users leaves the username field.
var emailField = $(lock.$container).find('input[name=email]').change(function() {
var username = $(this).val();
var getDomain = function(email) { return email.match(/@(?:[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})|(?:(?:[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,})$/i);};
if (getDomain(username) != 'fabrikamcorp.com') {
lock.flashMessage({
type: 'error',
text: 'Please make sure you're using an approved email address'
});
}
});
});
For anyone not using hosted login page, recommend looking at that linked github issue (Lock still not showing rule errors in redirect mode · Issue #692 · auth0/lock · GitHub) to get going in the right direction.
Update in case it’s helpful for anyone… simple working example (without jquery) to show an alert on custom hosted login page when email domain does not meet condition (easily modified). Add this after lock.show();
It would still be good if auth0 lock exposed a way to show a flashMessage outside of lock.show for better user experience.
lock.once('signin ready', function() {
// Try to match a domain every time the users leaves the username field.
document.querySelector("div.auth0-lock-container input[name='email']").addEventListener('change',function(event){
var username = this.value;
var getDomain = function(email) { return email.match(/@(?:[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})|(?:(?:[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,})$/i);};
if (getDomain(username) != 'test.com') {
window.alert("Please make sure you're using an approved email address");
}
});
});