Add Bot Detection to Custom Login Pages

If you build a custom login page using the auth0.js library, you can enable Bot Detection to render a CAPTCHA step in scenarios when a request is determined to be high risk by Auth0.

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.

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

1. Go to Dashboard > Branding > Universal Login and select Classic.

2. Click the Login tab and enable the Customize Login Page switch if it is not already enabled.

3. Locate the Default Templates drop-down menu and select Custom Login Form.

   

4. Copy the template to use for your custom login page. Use the steps below to customize the form.

5. Customize the login form (see below), and replace you new form in the Login tab.

6. Click Preview to see your new form.

7. Click Save Changes.

If you'd like to support Bot Detection, you must use version 9.24 or higher of the auth0.js library.

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

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

2. 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?

   Yes /No

3. 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?

   Yes /No

   To learn more about the login cb parameter, read auth0.js login documentation.

4. 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?

   Yes /No

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

If you'd like to support Bot Detection for passwordless flows, you must use version 9.24 or higher of the auth0.js library.

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

1. Add an element to render the CAPTCHA above the submit button. If you also support a username/password login, a separate element should be created for the passwordless CAPTCHA. For example: <div class="passwordless-captcha-container"></div>

2. Initialize the CAPTCHA component for passwordless flows after the WebAuth constructor.

   var passwordlessCaptcha = webAuth.renderPasswordlessCaptcha(
     document.querySelector('.passwordless-captcha-container')
   );

   Was this helpful?

   Yes /No

3. Add the captcha property to the Passwordless call, and reload the CAPTCHA component upon errors.

   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: 'foo@bar.com',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // handle errors
     }
     // continue
   });

   Was this helpful?

   Yes /No

• Add Bot Detection to Native Applications