Add Bot Detection to Custom Login Pages

If you build a custom login page using auth0.js, you can enable Bot Detection to render a CAPTCHA step in scenarios when a login request is determined by Auth0 to be high risk. Your custom login form code must handle scenarios where the user is asked to pass a CAPTCHA step. If you don't account for this scenario, your application may cause an error.

Bot detection is only supported for custom login pages hosted by Auth0. You may need to contact your account representative to enable this feature for your tenant.

Auth0 provides a template for you to use with code to handle high-risk logins.

Go to Dashboard > Universal Login and click Classic.
Go to the Login tab and enable the Customize Login Page toggle.
Under Default Templates, select Custom Login Form.
Copy the template to use for your custom login page. Use the steps below to customize the form.

Your code must use auth0.js version 9.14 or higher.

<script src="https://cdn.auth0.com/js/auth0/9.14/auth0.min.js"></script>

Add an element to render the CAPTCHA below yuor password input and above your sign-up and login buttons. For example: <div class="captcha-container"></div>

Initialize the CAPTCHA component after the WebAuth constructor.

var webAuth = new auth0.WebAuth(params);
var captcha = webAuth.renderCaptcha(
  document.querySelector('.captcha-container')
);

Was this helpful?/

Append the value of the CAPTCHA with captcha: captcha.getValue() to the login and signup calls as follows:

webAuth.login({
  realm: connection,
  username: username,
  password: password,
  captcha: captcha.getValue()
}, function(err) {
  displayError(err);
  //....
});

webAuth.redirect.signupAndLogin({
  connection: databaseConnection,
  email: email,
  password: password,
  captcha: captcha.getValue()
}, function(err) {
  displayError(err);
  //....
});

Was this helpful?/

See the auth0.js documentation for more details about the login cb parameter.

Reload the CAPTCHA in your generic error handling logic.

function displayError(err) {
  captcha.reload();
  var errorMessage = document.getElementById('error-message');
  errorMessage.innerHTML = err.description;
  errorMessage.style.display = 'block';
}

Was this helpful?/

The render method supports an optional parameter that allows you to change the default templates. The default values can be found here: https://github.com/auth0/auth0.js/blob/master/src/web-auth/captcha.js#L7.

Add Bot Detection to Native Applications

Docs