Apr 10, 2024 - 5 MIN READ

How to Integrate Google reCAPTCHA v3 with NestJS in 3 Easy Steps

Learn how to integrate Google reCAPTCHA v3 with your NestJS application in just 3 easy steps. Complete guide with code examples for spam protection.

Peter Oliha

Google's reCAPTCHA is a widely used tool to protect your web applications from spam and abuse. In this blog post, we'll walk through the steps to integrate reCAPTCHA v3 with your NestJS application.

Step 1: Set up reCAPTCHA and Obtain the Necessary Keys

First, you need to sign up for a reCAPTCHA v3 account on the Google reCAPTCHA website. Once you've registered your site, you'll be provided with a Site Key and a Secret Key. These keys will be used to verify the reCAPTCHA token on the server-side.

Step 2: Implement the reCAPTCHA Verification Logic

Next, let's create a utility function to handle the reCAPTCHA verification process. This function will take the reCAPTCHA token from the client, verify it with the Google reCAPTCHA API, and return the verification result.

// utils.ts
export const verifyRecaptcha = async (token: string) => {
  const secretKey = process.env.RECAPTCHA_SECRET_KEY;
  const verifyUrl = process.env.RECAPTCHA_VERIFY_URL;
  const minimumScore = 0.5;
  const expectedHostname = process.env.RECAPTCHA_EXPECTED_HOSTNAME;

  try {
    const response = await axios.post(verifyUrl, null, {
      params: {
        secret: secretKey,
        response: token
      }
    });

    const { success, score, hostname } = response.data;

    if (!success) {
      throw new Error('Invalid captcha');
    }

    if (score < minimumScore) {
      throw new Error('Low captcha score');
    }

    if (expectedHostname && hostname !== expectedHostname) {
      throw new Error('Invalid hostname');
    }

    return true;
  } catch (error) {
    console.error('Error verifying reCAPTCHA:', error);
    return false;
  }
};

Step 3: Create a NestJS Guard to Protect Your Endpoints

Finally, let's create a NestJS guard that will intercept the incoming requests and verify the reCAPTCHA token. This guard can be applied to your endpoints that you want to protect.

// recaptcha.guard.ts
import {
  BadRequestException,
  CanActivate,
  ExecutionContext,
  Injectable
} from '@nestjs/common';
import { verifyRecaptcha } from './utils';

@Injectable()
export class RecaptchaGuard implements CanActivate {
  async canActivate(context: ExecutionContext): Promise<boolean> {
    const request = context.switchToHttp().getRequest();
    const token = request.headers['x-recaptcha-token'];
    if (!token) {
      throw new BadRequestException('Recaptcha token is required');
    }

    return await verifyRecaptcha(token);
  }
}

To use the guard, simply apply it to your controller:

// app.controller.ts
import { RecaptchaGuard } from './recaptcha.guard';

@Controller()
@UseGuards(RecaptchaGuard)
export class AppController {
  // Your controller methods
}

That's it! With these three steps, you've successfully integrated Google reCAPTCHA v3 into your NestJS application, adding an extra layer of protection against spam and abuse.

Have any questions, want to share your thoughts or just say Hi? I'm always excited to connect! Follow me on Bluesky, LinkedIn or Twitter for more insights and discussions. If you've found this valuable, please consider sharing it on your social media. Your support through shares and follows means a lot to me!

How I built MapleStack's waitlist with AI: ChatGPT vs Bard

Comparing ChatGPT and Bard AI tools while building MapleStack's waitlist form. Learn how I used AI to generate React components and AWS Lambda functions in minutes.

How to resolve a blacklisted domain

Learn how to quickly resolve a blacklisted domain issue with SpamHaus. Step-by-step guide to get your domain removed from blacklists and prevent future issues.