Add Captchas to a React App with reaptcha
Tags: react, webdev, programming, javascript
Published: 2021-01-20 23:10:15

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Captchas stands for 'Completely Automated Public Turing test to tell Computers and Humans Apart'. It's often used to prevent automated traffic from tampering with websites.

With React, we can easily add a captcha to our app by using the `reaptcha` package. It's very easy to use.

# Installation

We can install it by running:

```
npm install --save reaptcha
```
We can also use yarn to install it y running:

```
yarn add reaptcha
```

# Basic Usage

We can use it by signing up for a Recaptcha API key so that we can use Google's Recaptcha service to use component. It works by injecting the Recaptcha scripts into our React app.

To sign up for an API key pair, go to [https://www.google.com/recaptcha/](https://www.google.com/recaptcha/) to sign up for an API key for free.

When we sign up for a key, we should sign up for a V2 Recaptcha key and add the domain that we want our Recaptcha widget to work on by entering the domain without any ports or child paths.

Once we signed up for an API key pair, we click Copy Site Key to copy the key that's used on client side.

Next, we create our React app project and then write the following code:

```
import React from "react";
import Reaptcha from "reaptcha";

export default function App() {
  const [verified, setVerified] = React.useState(false);

  const onVerify = e => {
    setVerified(true);
  };

  return (
    <div className="App">
      <form>
        <Reaptcha
          sitekey="your_key"
          onVerify={onVerify}
        />
        <button type="submit" disabled={!verified}>
          Submit
        </button>
      </form>
    </div>
  );
}
```
In the code above, we put in our key as the value of `siteKey`. Then we have the `onVerify` callback, which is called when the captcha displayed is verified.

The `onVerifed` function is the callback that's called when the captcha is successfully verified. Therefore, we use call `setVerified` there to enable the Submit button.

If we get an error, check if our domain is entered corrected in the API key settings. Also, we must be using the V2 version of reCAPTCHA with this package.

Once we did that, we should see a captcha, which enables the Submit button when we verified the displayed captcha.

# Loading Captcha Manually

Reaptcha can also load captchas only when the user explicity does something to make it load.

We have to call the captcha's `renderExplicitly` method to load the captcha. For instance, we can do that as follows:

```
import React from "react";
import Reaptcha from "reaptcha";

export default function App() {
  const [verified, setVerified] = React.useState(false);
  const [captchaReady, setCaptchaReady] = React.useState(false);
  const captcha = React.createRef();
  const onVerify = e => {
    setVerified(true);
  };

  const onLoad = () => {
    setCaptchaReady(true);
  };

  return (
    <div className="App">
      <button
        disabled={!captchaReady}
        onClick={() => {
          captcha.current.renderExplicitly();
        }}
      >
        Render reCAPTCHA
      </button>
      <form>
        <Reaptcha
          onLoad={onLoad}
          sitekey="your_key"
          onVerify={onVerify}
          ref={captcha}
          explicit
        />
        <button type="submit" disabled={!verified}>
          Submit
        </button>
      </form>
    </div>
  );
}
```
In the code above, we have a button to load the captcha when it's clicked. It's only enabled with then captcha script is finished loading so we can call the `renderExplicitly` method to load it.

In the `Reaptcha` component, we added the `onLoad` prop that calls the `onLoad` method. which calls `setCaptchaReady` to set the `captchaReady property to `true` to enable the button.

Once is captcha is ready and the user clicks the Render reCAPTCHA button, we call `captcha.current.renderExplicitly();` where `captcha` is the ref that we referenced in `Reaptcha`.

Most importantly, we added the `explicit` prop so that the captcha has to be loaded with an explicit user action.

# Invisible Captchas

Reaptcha also supports invisible captchas. We can set the `size` prop to be `invisible` to make an invisible captcha.

For instance, we can create an invisible captcha as follows:

```
import React from "react";
import Reaptcha from "reaptcha";

export default function App() {
  const [verified, setVerified] = React.useState(false);
  const captcha = React.createRef();
  const onVerify = e => {
    setVerified(true);
  };

  return (
    <div className="App">
      <button
        onClick={() => {
          captcha.current.execute();
        }}
      >
        Execute reCAPTCHA
      </button>
      <form>
        <Reaptcha
          sitekey="your_key"
          onVerify={onVerify}
          ref={captcha}
          size="invisible"
        />
        <button type="submit" disabled={!verified}>
          Submit
        </button>
      </form>
    </div>
  );
}
```

We have to create a key for the V2 Invisible Captcha so that we can incorporate invisible captchas into our app.

Then we call `captcha.current.execute();` where `captcha` is the ref for the `Reaptcha` component.

# Methods

We can call the `reset` method on the Reaptcha ref to reset the reCAPTCHA instance and `getResponse` methos to return the response from reCAPTCHA. They both return promises.

# Other Options

Other options that we can pass into the `Reaptcha` component as props include:

* `tabindex` - HTML tab index
* `inject` - boolean to indicate whether we want to inject the captcha script to the DOM automatically.
* `isolated` - boolean to indicate that this component shouldn't interfere with existing reCAPTCHA installations on a page
* `onError` - error handler
* `children` - a function to access instance methods without the need to use refs.

# Conclusion

Reaptcha is an easy to use React component for incorporating the V2 reCAPTCHA script into our app. All we have to do is to add the component, sign up for the reCAPTCHA API key and then set a few options to get the captcha added to our React app.