Add Captchas to a React App with reaptcha

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/ 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 totrue` 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 (

onClick={() => {
captcha.current.execute();
}}
>
Execute reCAPTCHA


sitekey="your_key"
onVerify={onVerify}
ref={captcha}
size="invisible"
/>

Submit



);
}
`

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.