Simplest possible Google reCaptcha

The contact form on my personal website was abused and attacked by a bot 😱 As a result, I got hundred of emails and my SendGrid account quota depleted 📈

The same day I went googling for a solution: how to add a Google reCaptcha to Next.js website? All articles in the search results suggested using npm packages, complex React component, and so on. Why has it be so complicated? I’ve decided to keep it simple, turned to the official docs and implemented the simplest possible solution

• load the script from Google CDN
• define a handler, and add a “magic” class to the submit button
• verify the token on the backend to avoid direct API requests
• voila, it’s done

Details

Now, let me share the details step by step.

1. Sign up for Google Dev account and create an API keys pair for reCaptcha

   

2. In you Next.js project, configure the public site key and the secret key

   # .env
    
   # Google reCaptcha
   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=<site-key>
   RECAPTCHA_SECRET_KEY=<secret-key>

3. Load the captcha script from the Google CDN and define a handler on your target page, for example

   // app/contact/page.tsx
    
   import Script from 'next/script';
   ...
    
   const RECAPTCHA_SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
    
   export default function ContactPage() {
     const formId = 'contact-form';
    
     return (
       <>
         <Script strategy="beforeInteractive">
           {`function onSubmit(token) {
               var form = document.getElementById("${formId}");
               if (form && form.reportValidity()) {
                 form.submit();
               } else {
                 grecaptcha && grecaptcha.reset();
               }
           }`}
         </Script>
    
         <Script src="https://www.google.com/recaptcha/api.js" strategy="afterInteractive" />
    
         <main>
           {/* you page content including the form and the submit button below */}
           <form action="/api/contact" method="POST" id={formId}>
             <button
               type="submit"
               className="g-recaptcha"
               data-sitekey={RECAPTCHA_SITE_KEY}
               data-callback="onSubmit"
             >
           </form>
         </main>
       </>
     );
   }

4. On the backend API side we need to verify the reCaptcha token to make sure it is present and not made up

   // pages/api/contact.tsx
    
   import { NextRequest, NextResponse } from 'next/server';
    
   export const config = { runtime: 'edge' };
    
   export default async function handler(req: NextRequest) {
     if (req.method !== 'POST') {
       return NextResponse.json({ error: 'Method not allowed' }, { status: 405 });
     }
    
     const formData = await req.formData();
     const data = Object.fromEntries(formData.entries()) as Record<string, string>;
    
     const error = validateData(data);
     if (error) {
       return NextResponse.json({ error }, { status: 400 });
     }
    
     const captchaSuccess = await verifyCaptcha(data['g-recaptcha-response']);
     if (!captchaSuccess) {
       return NextResponse.json({ error: 'reCaptcha verification failed' }, { status: 400 });
     }
    
     // you business logic here
   }
    
   function validateData(data: Record<string, string>): string | null {
      if (!data['g-recaptcha-response']) {
        return 'reCaptcha response is missing';
      }
    
      return null;
    }
    
    async function verifyCaptcha(token: string) {
      const response = await fetch('https://www.google.com/recaptcha/api/siteverify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ secret: process.env.RECAPTCHA_SECRET_KEY!, response: token }),
      });
    
      const { success } = await response.json();
      return success;
    }

5. Congrats, your form is now protected agains script kiddies and nasty bots 👏