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.

References

https://www.google.com/recaptcha/admin/create

https://www.youtube.com/watch?v=pcxh7cpeboU

https://dev.to/adrianbailador/integrating-recaptcha-v3-in-nextjs-170o

https://www.npmjs.com/package/react-google-recaptcha-v3

https://codesandbox.io/p/devbox/nextjs-google-recaptcha-v3-demo-803er0?file=%2Fpages%2Findex.js

Using Google reCAPTCHA v3 with Next.js 14

Comments

More from this blog

What Does a Designer Actually Do When the Software Starts Deciding?

Mastering useRef in React: A Practical Guide

Why Google Translate Crashes Your React App (and How to Fix It)

Seamless MySQL Upgrade: Achieving Zero Downtime with AWS Blue/Green Deployments

UX/UI Trends: That Will Change The Shape of Digital Experience

Step 1: Install Required Dependencies

Step 2: Create the Form Component

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

Step 4: Setup Environment Variables

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

Conclusion

References

Command Palette

Comments

More from this blog

Step 1: Install Required Dependencies

Step 2: Create the Form Component

Step 3: Wrap Form with GoogleReCaptchaProvider in Parent Component

Step 4: Setup Environment Variables

Step 5: Axios API Service (axiosApi.js)

Conclusion

References

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

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