react-next-captcha

react-next-captcha License

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:

`javascript 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.

Package detail