Captcha

We're provide a simple way to integrate captcha into your application to prevent bots from submitting forms. It supports multiple captcha providers and can be easily integrated into your plugin.

VitNode has support for:

Configuration

To enable captacha go to our guide Captcha in AdminCP.

Usage

Inside VitNode we're already implemented a captcha into core modules and you can use it in your API.

Backend

Inside your service file, import the CaptchaHelper and inject it into your service.

send.service.ts

import type { Request } from 'express';
 
import { CaptchaHelper } from 'vitnode-backend/helpers/captcha.service'; 
import { Injectable } from '@nestjs/common';
 
@Injectable()
export class SendForgotPasswordAuthService {
  constructor(private readonly captchaHelper: CaptchaHelper) {} 
 
  async send({ req }: { req: Request }): Promise<void> {
    await this.captchaHelper.validateCaptcha({ req }); 
  }
}

Frontend

Component

Inside your form component, create a div with an id of vitnode_captcha to render the captcha.

form.tsx

'use client';
 
import { AutoForm } from 'vitnode-frontend/components/form/auto-form';
 
export const FormForgotPassword = () => {
  return (
    <AutoForm>
      <div id="vitnode_captcha" /> // [!code ++]
    </AutoForm>
  );
};

Hook

Inside your hook, import the useCaptcha hook and call the getTokenFromCaptcha function to get the captcha token and use it in your mutation.

use-sign-up-view.ts

import { useCaptcha } from 'vitnode-frontend/hooks/use-captcha'; 
import React from 'react';
import { z } from 'zod';
 
export const useForgotPasswordView = () => {
  const { getTokenFromCaptcha, isReady } = useCaptcha(); 
  const formSchema = z.object({
    email: z.string().email().default(''),
  });
 
  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    const token = await getTokenFromCaptcha(); 
    if (!token) return; 
  };
 
  return { formSchema, isReady, onSubmit };
};

isReady is a boolean that indicates if the captcha is ready to be used.

Fetcher

Inside your fetcher, add x-vitnode-captcha-token to the headers.

mutation-api.ts

'use server';
 
import { fetcher } from 'vitnode-frontend/api/fetcher';
import { SendForgotPasswordAuthBody } from 'vitnode-shared/auth/auth.dto';
 
export const mutationApi = async ({
  token,
  ...body
}: SendForgotPasswordAuthBody & { token: string }) => {
  await fetcher<object, SendForgotPasswordAuthBody>({
    url: '/core/auth/forgot_password/send',
    method: 'POST',
    body,
    headers: {
      'x-vitnode-captcha-token': token, 
    },
  });
};