Google reCAPTCHA is a CAPTCHA system that enables web hosts to distinguish between human and automated access to websites. The original version asked users to decipher hard to read text or match images.

reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a Turing test to tell humans and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out. By adding reCAPTCHA to a site, you can block automated software while helping your welcome users to enter with ease. 

 reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep malicious software from engaging in abusive activities on your website.

To integrate reCAPTCHA with modern javascript/typescript technologies, we need to register our

website/web application with Google. You can do it with the following link.

https://www.google.com/recaptcha/admin/create

Once you sign up with the above link, you will get a client key which you would require to integrate with your web application.

We will use react-google-reCaptcha  npm module. We can install it using 

npm I react-google-recaptcha in our Web App.

You will need the client key then you can use .

Code Sample:

import ReCAPTCHA from “react-google-recaptcha”;

const recaptchaRef = React.createRef();

function onChange(value) {

  console.log(“Captcha value:”, value);

}

render() {

  return (

    <form onSubmit={this.onSubmit} >

      <ReCAPTCHA

        ref={recaptchaRef}

        size=”invisible”

        sitekey=“Your client site key”

        onChange={onChange}

      />

    </form>

  )

}

The invisible reCAPTCHA badge does not require the user to click on a checkbox, instead, it is invoked directly when the user clicks on an existing button on your site or can be invoked via a JavaScript API call. The integration requires a JavaScript callback when reCAPTCHA verification is complete. By default, only the most suspicious traffic will be prompted to solve a captcha.

reCAPTCHA Types

There are four types of reCAPTCHA