react-next-captcha

A simple and customizable captcha generator and verifier for Node.js, designed to be used with React and Next.js applications. Built on top of svg-captcha, it provides an easy way to add captchas to your web application without the need for Google reCAPTCHA or C++ addons.

Features

Generates SVG captchas
Customizable options for captcha size, noise, and characters
Secure verification with custom salts
Easy integration with Next.js and React

Installation

Install the package using npm:

npm install react-next-captcha

Basic Setup - Next.js

A) Server-Side (Next.js API Routes)

Create a file pages/api/generate-captcha.js:

import { createCaptcha } from 'react-next-captcha';

export default function handler(req, res) {
  

  const options = {
    size: size || 6,
    noise: noise || 2,
    ignoreChars: ignoreChars || '0o1ilIL',
  };

  // Generate a custom salt for increased security
  function generateRandomString(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?';
    let result = '';
    const charactersLength = characters.length;

    for (let i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }

    return result;
  }
  const customSalt = generateRandomString(20);

  const captcha = createCaptcha(options, customSalt);

  res.status(200).json({ captcha: captcha.data, hash: captcha.hash });
}

Create a file pages/api/verify-captcha.js:

import { checkCaptcha } from 'react-next-captcha';

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { text, hash } = req.body;

    const verificationCaptcha = checkCaptcha(text, hash);

    if (verificationCaptcha.success === true) {
      // Proceed with login logic here

      res.status(200).json(verificationCaptcha);
    } else {
      res.status(400).json(verificationCaptcha);
    }
  }
}

B) Client-Side (React Component)

Create a login component pages/login.js:

import { useState, useEffect } from 'react';

const Login = () => {
  const [captcha, setCaptcha] = useState('');
  const [hash, setHash] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [captchaInput, setCaptchaInput] = useState('');
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetchCaptcha();
  }, []);

  const fetchCaptcha = async () => {
    const req = await fetch('/api/generate-captcha', {
      method: "POST",
     
    });
    const res = await req.json();
    setCaptcha(res.captcha);
    setHash(res.hash);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const req = await fetch('/api/verify-captcha', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ text: captchaInput, hash }),
    });
    const res = await req.json();
    if (res.success) {
      // Proceed with login logic here
      setMessage('Captcha verified');
      fetchCaptcha();
    } else {
      setMessage('Captcha verification failed. Please try again.');
      //fetchCaptcha();
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Username:
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
          </label>
        </div>
        <div>
          <label>
            Password:
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </label>
        </div>
        <div>
          <div dangerouslySetInnerHTML={{ __html: captcha }} />
          <button type="button" onClick={fetchCaptcha}>Reload Captcha</button>
        </div>
        <div>
          <label>
            Captcha:
            <input
              type="text"
              value={captchaInput}
              onChange={(e) => setCaptchaInput(e.target.value)}
              required
            />
          </label>
        </div>
        {message && <p style={{ color: 'blue' }}>{message}</p>}
        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
};

export default Login;

Advanced Settings

You can customize the captcha generation by passing additional options. Here are some of the options available:

size: Number of characters in the captcha (default: 6)
noise: Number of noise lines (default: 2)
ignoreChars: Characters to ignore in the captcha (default: '0o1ilIL')
color: Use distinct colors for characters (default: true if background option is set)
background: Background color of the captcha image

Example:

const options = {
  size: 6,
  noise: 3,
  ignoreChars: '0o1ilIL',
  color: true,
  background: '#cc9966',
};
const captcha = createCaptcha(options, customSalt);

API Reference

`createCaptcha(options, customSalt)`

options: Object containing the captcha generation options.
customSalt: Custom salt to be used for generating the hash.

Returns an object with the following properties:

data: The SVG captcha data.
text: The captcha text.
hash: The SHA-256 hash of the captcha text combined with the salt.

`checkCaptcha(text, hash)`

text: The text entered by the user.
hash: The hash of the captcha.

Returns an object with the following properties:

success: Boolean indicating if the verification was successful.
message: Verification message.

License

This project is licensed under the ISC License.


This `README.md` file includes the basic setup for Next.js and also highlights how to use and customize the captcha generator and verifier in your application.