How To Use Captcha In Next JS App

Introduction

Here we see how to implement Captcha in the Next JS application.

Preconditions

Javascript
Basic knowledge of Next JS
Node.js
V.S. Code,Visual Studio

We cover the below things,

Create Next application
How to Apply Captcha in Next JS

Step 1

Create the Next JS application using the following command in cmd.

npx create-next-app nextjsappcaptchanumber
cd nextjsappcaptchanumber
npm run dev

Step 2

Run the below command for installing the react-simple-captcha library.

npm i react-simple-captcha

Create the files according to the below image.

How to use captcha in Next Js app

Step 3

Add the below code in the index.js.

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import MyNextCaptchaNumber from './MyAppNextJsCaptchaNumber'

const inter = Inter({ subsets: ['latin'] })
export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex@^3/primeflex.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/saga-blue.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/arya-blue.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/vela-blue.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
        <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
        <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
      </Head>
      <main className={styles.main}>
        <div className={styles.center}>
          <Image className={styles.logo} src="/next.svg" alt="Next.js Logo" width={180} height={37} priority />
          <div className={styles.thirteen}>
            <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
          </div>
        </div>
        <div className={styles.grid}>
          <MyNextCaptchaNumber />
        </div>
      </main>undefined
    </>
  )
}

Step 4

Add the below code in NextJsFormWithValidation.js.

import React, { useEffect } from "react";
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Form, Row } from 'react-bootstrap';

import {
  LoadCanvasTemplate,
  loadCaptchaEnginge,
  validateCaptcha
} from 'node_modules/react-simple-captcha';

export default function MyNextCaptchaNumber() {
    React.useEffect(() => {
        loadCaptchaEnginge(8);
    });
    const doSubmit = () => {
        let user_captcha = document.getElementById("user_captcha_input").value;
        if (validateCaptcha(user_captcha) == true) {
            alert("Captcha Matched");
            loadCaptchaEnginge(6);
            document.getElementById("user_captcha_input").value = "";
        } else {
            alert("Captcha Does Not Match");
            document.getElementById("user_captcha_input").value = "";
        }
    };
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex@^3/primeflex.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/saga-blue.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/arya-blue.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/vela-blue.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
        <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
        <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
      </Head>
      <main className={styles.main}>
        <div className={styles.center}>
          <Image className={styles.logo} src="/next.svg" alt="Next.js Logo" width={180} height={37} priority />
          <div className={styles.thirteen}>
            <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
          </div>
        </div>
        <div className={styles.grid}>
          <MyNextCaptchaNumber />
        </div>
      </main>undefined
    </>
  );
}

Step 5

Create Home.module.css and globals.css. You can check the CSS code in the attached code and git link.

Step 6

Add the following code in package.json.

{
  "name": "nextjsappcaptchanumber",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-dom": "18.2.0",
    "react-simple-captcha": "^9.0.2"
  }
}

Step 7

Run the following commands.

npm i
npm run dev

How to use captcha in Next Js app

Summary

This article taught us how to create a project for Captcha using react-simple-captcha in Next JS.