# Using Google reCAPTCHA v3 with Next.js 14

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:

```javascript
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.

```javascript
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.

```javascript
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:

```javascript
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.

```javascript
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](https://codesandbox.io/p/devbox/nextjs-google-recaptcha-v3-demo-803er0?file=%2Fpages%2Findex.js)

### 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.google.com/recaptcha/admin/create)

[https://www.youtube.com/watch?v=pcxh7cpeboU](https://www.youtube.com/watch?v=pcxh7cpeboU)

[https://dev.to/adrianbailador/integrating-recaptcha-v3-in-nextjs-170o](https://dev.to/adrianbailador/integrating-recaptcha-v3-in-nextjs-170o)

[https://www.npmjs.com/package/react-google-recaptcha-v3](https://www.npmjs.com/package/react-google-recaptcha-v3)

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