Captcha with Auth0.js

Knowledge Articles
1

Overview

Customers who are Classic Universal Login Experience (CUL) with the Auth0.js library may want to use Captcha. If the customer started using the “Custom Login Form” template in September 2020, this should not be a problem as it is already implemented.

This KB article is for customers that have a pre-September 2020 template and have a lot of customizations.

Applies To

  • Captcha

Solution

The first thing to check is that the Auth0.js library version is v9.14 or above. For Enterprise ReCAPTCHA, it needs to be v9.16 or above.

  • Add an element to render the captcha below the password input and above the sign-up and login buttons:
    <div class="captcha-container form-group"></div>
  • Next, initialize the captcha component after the WebAuth constructor:
    var webAuth = new auth0.WebAuth(params); var captcha = webAuth.renderCaptcha( document.querySelector('.captcha-container') );
  • Append the value of the captcha with captcha: captcha.getValue() to the login and signup calls as follows:
  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);
  //....
});

webAuth.changePassword(
{
  email: email,
  connection: databaseConnection,
  captcha: captcha.getValue()
}, function (err, res) {
  displayError(err);
  //....
});
  • Finally, reload the captcha in the generic error-handling logic:
    function displayError(err) {
  captcha.reload();
  var errorMessage = document.getElementById('error-message');
  errorMessage.innerHTML = err.description;
  errorMessage.style.display = 'block';
}