React: ReCAPTCHA v3 Client and Server Demo

In this demo, I’ll use Google ReCAPTCHA v3 credentials within a React application built on Next.js. The ReCAPTCHA token will be generated on the client side and validated on the server side.

Links

• Demo

• Codebase

Step 1: Generate Your ReCAPTCHA Credentials

Go to Google ReCaptcha V3 and generate your credentials.

Step 2: Import the ReCaptcha library

<Script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY}`} />

Note: There are some packages you could use, but the implementation is simple.

Step 3: Call the execute method in your click handler

const loginClickHandler = (event) => {
  event.preventDefault();

  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute(
      process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY,
      { action: "LOGIN" }
    );

    await submit(token);
  });
};

grecaptcha is an object injected by the imported script.

Note: When using Next.js, ensure all environment variables exposed in the browser are prefixed with NEXT_PUBLIC.

When the user clicks login, the app automatically generates a captcha for them by calling two methods from the grecaptcha object:

• window.grecaptcha.enterprise.ready: This makes sure the Google reCAPTCHA object is ready to go.
• window.grecaptcha.enterprise.execute: This generates the captcha token.

Finally, the data is sent to the backend (in my case, I’m using a Lambda function), along with the generated captcha token.

const submit = async (code) => {
  await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ code }),
  });
};

Note: If you are working with a form, you’d also include other field values like username, name, or any additional data your form collects.

Step 4: Validate the Captcha on the Backend

const validateReCaptcha = async (captcha) => {
  const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RE_CAPTCHA_SECRET_KEY}&response=${captcha}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ captcha }),
  });

  return response.json();
};

validateReCaptcha is a backend method that calls a Google API endpoint, passing the SECRET_KEY (stored as an environment variable) and the Captcha token generated on the client.

If the Captcha is valid, the API response will look something like this:

{
  "success": true,
  "challenge_ts": "2024-11-24T03:04:34Z",
  "hostname": "localhost",
  "score": 0.9
}

Conclusion

ReCaptcha is crucial for securing forms, especially when you're looking to prevent bots from submitting them. Google offers a free tier that provides up to 10,000 assessments per month (at the time of writing), making it a solid choice for many applications. The integration is made easier with the library that google provides. You'll just need to pass your credentials: SITE_KEY on the client side and SECRET_KEY on the server side.

A key point to remember is that the SECRET_KEY should never be exposed on the client side, as this could compromise the security of your application. Only the SITE_KEY is meant for the client.

Comments

[Philip]

Integrating Google ReCAPTCHA v3 with a React and Next.js app helps secure forms by validating user interactions to block bots, with client-side tokens checked on the server to maintain security. Using environment variables ensures sensitive keys stay protected. echoapi.com/ simplifies API management for such integrations, making it easier for beginners to handle secure API requests.