Next.js ReCaptcha Email Form Component with Google site verification using axios.

Email Form With Google Recaptcha.jsx

// Get your registration at https://www.google.com/recaptcha/about/ to get your "sitekey" and your "secret" (required‼️).
// Install react-google-recaptcha library
// ~npm i react-google-recaptcha / ~ yarn add react-google-recaptcha

"use client";
import { useState, useRef } from "react";
import { verifyCaptcha } from "./ReCaptchaVerify";
import ReCAPTCHA from "react-google-recaptcha";

export const EmailForm = () => {
  
  const [isVerified, setVerified] = useState(false);
  const [isSent, setSent] = useState(false);
  
  const recaptchaRef = useRef(null);

  async function handleRecaptchaChange(token) {
    // Server function to verify captcha
    await verifyCaptcha(token)
      .then(() => {
        setVerified(true);
        console.log("Captcha Verify succeed! 🤝");
      })
      .catch(() => {
        setVerified(false);
        console.error("Captcha Verify failed! 🥲");
      });
  }

  const handleSubmit = (event) => {
    event.preventDefault();
     if (!isVerified) {
     alert("Complete the Captcha");
    } else {
      setSent(true);
    }
  };

  return (
        <form>
          <label htmlFor='Nombre y Apellido' />
          <input
            type='text'
            name='name'
            placeholder='Nombre y Apellido *'
          />
          <label htmlFor='Correo' />
          <input
            type='email'
            name='email'
            placeholder='Correo Electrónico *'
          />
          <label htmlFor='Mensaje' />
          <textarea
            name='message'
            placeholder='Platicanos tu necesidad *'
          />
          <div>
            <ReCAPTCHA
              sitekey={process.env.SITE_KEY}
              ref={recaptchaRef}
              onChange={handleRecaptchaChange}
            />
            <button onClick={handleSubmit}>
              Envíar
            </button>
          </div>
        </form>
  );
};

Recaptcha Verify.jsx

// install axios library 
// ~ npm i axios / ~ yarn add axios"

"use server";
import axios from "axios";

// Remember to always use enviornment variables for sensitive information. 

export async function verifyCaptcha(token) {
  const res = await axios.post(
    `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET}&response=${token}`
  );

  if (res.data.success) {
    return "success! 🤝";
  } else {
    throw new Error("Failed Captcha");
  }
}