reCAPTCHA is a tool that can protect your applications from fraudulent actions by generating adaptive challenges to keep bots or automated programs with malicious intent from interacting with your applications. It does this in a way that ensures legitimate users (humans) can interact with your browser while blocking bots or automated programs. A simple description of the usefulness of reCAPTCHA can be described in a scenario where you created an online store that allows users to submit reviews to different vendors. Without a process to filter real users from bots/automated programs, users can create multiple bots with the malicious intent of spamming a vendor with negative or untrue reviews. Setting up a React Application Using the package, generate a new react application on your machine by running the command: create-react-app npx create-react-app sample_app Next, create a mock sign-in page with a form by updating the component: App import React from "react"
import "./App.css"

function App() {
  return (
    <form>
      <input id='username' name='username' placeholder="Username" />
      <input type="password" id='password' name='password' placeholder="Password" />
      <button>Login</button>
    </form>
  )
}

export default App; Then rewrite the file to make the application a little bit pleasing to the eyes: ./App.css body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

form {
  width: 300px;
  display: flex;
  flex-direction: column;
}

input, button {
  text-align: center;
  height: 50px;
  margin: 15px 0;
  border: 1px solid #000
}

button {
  background: #ff00ff;
  color: #fff;
  cursor: pointer;
}

button:disabled {
  background: #a5a5a5;
  cursor: not-allowed;
} Then start the application server by running the command via your command line: npm start You should have a running application at as such: http://localhost:3000/ Generating reCAPTCHA Secret Keys There are three current versions of Google’s reCAPTCHA: reCAPTCHA v2 reCAPTCHA v3 reCAPTCHA Enterprises For the purpose of this article, we are making use of the reCAPTCHA v2 which has the famous “I’m not a robot” checkbox. First, you need to get a from the Google reCAPTCHA admin console by clicking , which leads to this page below: Client Key here Enter the label to be able to identify the different projects or sites on Google reCAPTCHA.  Select reCAPTCHA v2 under the option then the option. reCAPTCHA type ”I’m not a robot” Checkbox The Domains option allows you to configure the number of domains (including subdomains) that has access to the registration. Since our react application is in development, you will add “localhost” in the option. Domain Accept the reCAPTCHA terms of service then click the submit button to generate some keys that will be used later in this article. To use the site key as an embedded environment variable in your react application, create a file in the root directory of your application. Copy the code below into the file and replace the site key with the one you generated from the Admin Console. .env .env REACT_APP_RECAPTCHA_SITE_KEY=your_site_key Integrating reCAPTCHA with React To integrate reCAPTCHA into your React application, we are making use of the packages which provide a React component for reCAPTCHA v2. react-google-recaptcha First, install the package into your program by running this command via your command line: npm install --save react-google-recaptcha The package provides a component to be used, for instance, as such: react-google-recaptcha ReCAPTCHA import ReCAPTCHA from "react-google-recaptcha";
 
function onChange(value) {
	// what happens when 
  console.log("captcha value:", value);
}
 
ReactDOM.render(
  <ReCAPTCHA
    sitekey="The client site key from the Google reCAPTCHA admin console"
    onChange={onChange}
  />,
  document.body
) The and props are only necessary for the basic functionality of the component but there are some optional props that can configure the appearance or the operations of the component. Some of the props : sitekey onChange ReCAPTCHA : the client key from Google reCAPTCHA Admin Console sitekey : the function that is called when a user completes the captcha successfully onChange : ( or ) sets the theme of the reCAPTCHA widget theme light dark : ( or ) defines the type of initial captcha type image audio : the tabindex of the element tabindex : the function that is called when a captcha has expired onExpired : ( , , or ) allows you to define the size of the reCAPTCHA widget or do an invisible captcha. size compact normal invisible Next, you will make use of the package in your program by updating the component as such: App import React from "react";
import "./App.css";
import  ReCAPTCHA  from "react-google-recaptcha";

function App() {
  const [isCaptchaSuccessful, setIsCaptchaSuccess] = React.useState(false)

  function onChange(value) {
    setIsCaptchaSuccess(true)
    console.log("captcha value: ", value);
  }

  return (
    <>
      <form>
        <input id="username" name="username" placeholder="Username" />
        <input
          type="password"
          id="password"
          name="password"
          placeholder="Password"
        />
        <ReCAPTCHA
          sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
          onChange={onChange}
          />
          <button disabled={!isCaptchaSuccessful}>Login</button>
      </form>
    </>
  );
}

export default App; The state is used to ensure the submit button is disabled until the captcha challenge is successfully completed. isCaptchaSuccessful As it is not recommended to validate only from the client side, you not only rely on the reCAPTCHA implementation on the client side. You can send the token derived from the props and verify it from the server side using Google’s reCAPTCHA server-side API. You can find more about this . onChange here cannot bundle environment variables from the file at runtime so you need to rebuild the react app by ending the previous server you started and starting a new one with the command: create-react-app .env npm start Then the reCAPTCHA widget with a disabled submit button would be visible on your application as such: Passing the challenge would make the button accessible as such: Conclusion At the end of this article, we discussed what reCAPTCHA is and how it can prevent your application from malicious bots or automated programs. You also demonstrated how to integrate reCAPTCHA into a React application. I hope you find the article helpful to help you prevent your React applications from bots or malicious automated programs. I am currently building a newsletter to share informative articles and news, my progress in creating startups with little experience and how you can learn from my experience. Please subscribe via this . link Also published . here

Different

Google

Keep

What I Do with Notion as a Software Developer

How to Optimize your GitHub Repository for Open Source Development

Subscribe to my newsletter to learn about my startup journey as a beginner.

Subscribe to my newsletter

Nominated for 2022 - HackerNoon Contributor of the Year - Automation

Nominated for 2022 - HackerNoon Contributor of the Year - Linux

Too Long; Didn't Read

Make resilience your competitive advantage

How to Set up ReCAPTCHA in Your React Application

How to Set up ReCAPTCHA in Your React Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Introduction on Arch Linux Pacman for Beginners

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

An Introduction on Arch Linux Pacman for Beginners

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps