Integrating reCAPTCHA v3 in Next.js

Step 1: Obtain reCAPTCHA v3 credentials

  1. Access Google reCAPTCHA page:

  2. Register your website:

    • Click on "V3" at the top to register a new key for reCAPTCHA v3.
    • Fill out the form with your project name and domains where reCAPTCHA will be used.
  3. Get site keys:

    • After registering your site, Google will provide two keys: the site key and the secret key. These keys are essential for integrating reCAPTCHA v3 into your web application.

Step 2: Setup in your Next.js application

  1. Install necessary npm package:

    npm install @react-google-recaptcha-v3
  2. Create a reCAPTCHA component:

    • Create a React component in your Next.js project to handle reCAPTCHA v3 logic.
    // components/Recaptcha.js
    import { useEffect } from 'react';
    import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
    const Recaptcha = ({ onVerify }) => {
      const { executeRecaptcha } = useGoogleReCaptcha();
      useEffect(() => {
        const verifyCallback = async () => {
          if (executeRecaptcha) {
            const token = await executeRecaptcha();
            onVerify(token); // Send token to backend or handle verification here
      }, [executeRecaptcha, onVerify]);
      return null; // This component doesn't render anything visible in the DOM
    export default Recaptcha;
  3. Integrate the component into your form:

    // contact.js
    import Recaptcha from '../components/Recaptcha';
    const ContactPage = () => {
      const handleRecaptchaVerify = (token) => {
        console.log('reCAPTCHA Token:', token);
        // Send token to server for verification
      return (
          {/* Your form goes here */}
            {/* Other form fields */}
            <Recaptcha onVerify={handleRecaptchaVerify} />
            <button type="submit">Submit</button>
    export default ContactPage;
  4. Server-side setup:

    • In your backend (Node.js, Python, PHP, etc.), verify the reCAPTCHA v3 token using the provided secret key from Google.

Differences between reCAPTCHA v2 and reCAPTCHA v3

  1. Interaction mode:

    • reCAPTCHA v2: Requires users to solve a visible challenge like selecting images or entering text.
    • reCAPTCHA v3: Operates in the background and evaluates user behavior to provide a risk score.
  2. Visibility for users:

    • reCAPTCHA v2: Is visible to users as it presents an explicit challenge.
    • reCAPTCHA v3: Is invisible to users, working behind the scenes without requiring explicit user interaction.
  3. Use of scores:

    • reCAPTCHA v2: Does not generate a score; it only validates correct challenge responses.
    • reCAPTCHA v3: Provides a score from 0.0 to 1.0 indicating the likelihood that the user is a bot.
  4. Implementation:

    • reCAPTCHA v2: Requires including a widget in the form and backend verification.
    • reCAPTCHA v3: Integrates via a frontend API, with primary verification done on the backend using the secret key.

Additional considerations

  • Handling null in executeRecaptcha: You may encounter cases where executeRecaptcha could be null temporarily, especially during component initialization. Here's how to handle it:

    // Inside useEffect in Recaptcha.js
    useEffect(() => {
      const verifyCallback = async () => {
        if (executeRecaptcha) {
          const token = await executeRecaptcha();
          onVerify(token); // Send token to backend or handle verification here
      if (executeRecaptcha !== null) {
    }, [executeRecaptcha, onVerify]);
  • Additional References: For more technical details or troubleshooting specific issues, you can refer to the official Google documentation for reCAPTCHA v3 or explore additional resources within the developer community.

This guide provides a solid foundation for effectively integrating reCAPTCHA v3 into your Next.js application, enhancing both security and user experience simultaneously.

Avatar for Adrián Bailador

Written by Adrián Bailador

🚀 Full-Stack Dev 👨🏻‍💻 .NET Engineer 👾 Geek & Friki 💡 Talks about #dotnet, #csharp, #azure, #visualstudio and a little bit of #nextjs.


Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.