Post
Ask Question

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.


Similar Articles