Captcha with Auth0.js

• Captcha

• 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';
}