Add Recaptcha/Verification to User Sign Up - Cognito

Add reCAPTCHA to your sign-up form. For this, you can use libraries like react-google-recaptcha if you're using React. This library provides an easy way to integrate Google's reCAPTCHA into your forms.

Hi guys,

Look at this example [1] in the Amplify documentation. It's an example of how we can add the Captcha Google (version 2) feature to our applications. Only take into account there is a couple of errors. Especifically you should use the "Custom Auth Challenge with Google reCaptcha" example. Finally in the following portion of code:

const handleSignIn = async () => { try { const response = await signIn({ username, password, options: { authFlowType: 'CUSTOM_WITH_SRP' } }); } catch (e) { console.log(e); } };

You should add the showCaptcha code as follows:

try {
  const response = await signIn({
    username,
    password,
    options: {
      authFlowType: 'CUSTOM_WITH_SRP'
    }
  });
  if (
    response.nextStep.signInStep === "CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE"
  ) {
    setShowCaptcha(true);
  }
} catch (e) {
  console.log(e)
  const response = await signOut();
}

This is one error, the second error is that the "CaptchaConfirmation" component present in the "return" code should be called to "CaptchaConfirmSignIn", since this is the name of the component in which we can see the "handleConfirmSignIn" method.

Well, and that's it, as you could see the example was in React, but also you can adapt the code to Javascript sure.

Hope this solution will be helpful !

Greetings.

[1] https://docs.amplify.aws/javascript/tools/cli/usage/lambda-triggers/#pageMain

Hi again,

Ok that's right, but maybe you can adapt the example to your perticular context. With the signUp method it could be easy to adapt, for example using the signup confirmation method that calls the captcha, since the captcha were defined with lambda triggers. Also you can use the example code and implement it without using Amplify. The lambda trigger here that verifies the captcha is the Verify lambda trigger in which you should define the secret key of Google recaptcha. Well, I hope you could adapt the code to your particular context.

Have an awesome day ahead.