Google reCAPTCHA Next.js

Google reCAPTCHA v3 is a powerful tool that helps differentiate between human and bot traffic on your website. By integrating it into your Next.js 14 application, you can enhance security and protect against spam and abuse. Here’s a guide to integrating Google reCAPTCHA v3 with a form submission in a Next.js 14 application, using Zod for form validation and Axios for making API requests.

Step 1: Install Required Dependencies

First, ensure you have the necessary dependencies installed:

npm install react-google-recaptcha-v3 zod axios react-hook-form

Step 2: Create the Form Component

In this component, we define the form using react-hook-form for form handling and Zod for validation. We use the useGoogleReCaptcha hook to access the reCAPTCHA token before submission.

import React, { useCallback, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import axiosApi from '@/services/axiosApi';
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
import { Input } from '@/components/ui/input'; // This is shadcn Input component
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; // UI Form Components

// Zod validation schema
const formSchema = z.object({
  name: z.string().min(1, { message: 'Name is required' }),
  email: z.string().email({ message: 'Invalid email' }),
});

const OurForm = ({ params }) => {
  const { executeRecaptcha } = useGoogleReCaptcha();
  const [isLoading, setIsLoading] = useState(false);

  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: '',
      email: '',
    },
  });

  // Submit the form
  const onSubmit = useCallback(
    async (data) => {
      try {
        setIsLoading(true);

        if (!executeRecaptcha) {
          console.error('executeRecaptcha is not ready');
          return;
        }

        const gRecaptchaToken = await executeRecaptcha('form_submit');
        const formData = { ...data, 'g-recaptcha-response': gRecaptchaToken };

        await axiosApi.post(`/form`, formData);

        // Handle success (e.g., navigate to a success page)
      } catch (error) {
        console.error(error);
      } finally {
        setIsLoading(false);
      }
    },
    [executeRecaptcha, params.id]
  );

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        {/* Form Fields */}
        <FormField
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input {...field} placeholder="Enter your name" />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} placeholder="Enter your email" />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Submitting...' : 'Submit'}
        </button>
      </form>
    </Form>
  );
};

export default OurForm;

Step 3: Wrap Form with `GoogleReCaptchaProvider` in Parent Component

To enable reCAPTCHA, you need to wrap your form component with GoogleReCaptchaProvider, providing the reCaptchaKey from environment variables.

import React from 'react';
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
import OurForm from './OurForm';

const OurPage = ({ params }) => {
  const googleReCaptchaKey = process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY;

  return (
    <div className="relative">
      <GoogleReCaptchaProvider reCaptchaKey={googleReCaptchaKey}>
        <OurForm params={params} />
      </GoogleReCaptchaProvider>
    </div>
  );
};

export default OurPage;

Step 4: Setup Environment Variables

In your .env file, add your Google reCAPTCHA site key:

NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY=your-site-key // generated from google reCaptcha admin 
NEXT_PUBLIC_GOOGLE_RECAPTCHA_SECRET_KEY=your-secret-key
NEXT_PUBLIC_API_BASE_URL=your-url

Step 5: Axios API Service (`axiosApi.js`)

Create a reusable Axios instance for making API requests.

import axios from 'axios';

const axiosApi = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default axiosApi;

This integration helps protect your forms against bots while maintaining a smooth user experience. For example you can visit the link Google-Recaptcha-v3

Conclusion

By integrating Google reCAPTCHA v3 into your Next.js 14 application and utilizing Zod for validation, you can significantly enhance your website's security and protect against spam and abuse. This guide has provided a comprehensive step-by-step approach to implementing reCAPTCHA v3, ensuring a seamless user experience while safeguarding your unwanted requests.
Thank you.