HowTo: Integrate Google reCAPTCHA with AWS Cognito

index.js

const Auth = require('@aws-amplify/auth').default;

// Please replace the property values
const config = {
  aws: {
    region: '<Your aws region>',
    cognito: {
      userPoolId: '<Your Cognito user pool ID>',
      userPoolWebClientId: '<Your Cognito user pool web client ID>',
    },
  },
  recaptcha: {
    secretKey: '<Your reCAPTCHA secret key>',
  },
};

// Configure Amplify
Auth.configure({
  region: config.aws.region,
  userPoolId: config.aws.cognito.userPoolId,
  userPoolWebClientId: config.aws.cognito.userPoolWebClientId,
});

grecaptcha.ready(function() {
  document.getElementById("signup-form").addEventListener("submit", signUp);
});

async function signUp(event) {
  event.preventDefault();

  const form = event.target;
  const username = form.elements['username'].value;
  const password = form.elements['password'].value;

  try {
    const recaptchaToken = await grecaptcha.execute(config.recaptcha.siteKey, {action: 'signUp'});
    await Auth.signUp({
      username,
      password,
      validationData: [{
        Name: 'recaptchaToken',
        Value: recaptchaToken,
      }],
    });
    alert('You\'ve signed up');
  } catch (err) {
    alert(err.message || JSON.stringify(err));
  }
}