README.md

@tokensuite/react-slider-captcha-v2-core

Installation

Backend:

npm i @tokensuite/react-slider-captcha-v2-core

You also need to add sharp to your project because it needs to be a pair dependency.

npm i sharp@^0.30.5

Usage

Express:

import {createCaptcha, verifyCaptcha} from '@tokensuite/react-slider-captcha-v2-core'; // or @tokensuite/react-slider-captcha-v2-core/lib/esm

app.get('/captcha/create', function (req, res) {
  sliderCaptcha.create()
    .then(function ({data, solution}) {
      req.session.captcha = solution;
      req.session.save();
      res.status(200).send(data);
    });
});

app.post('/captcha/verify', function (req, res) {
  sliderCaptcha.verify(req.session.captcha, req.body)
    .then(function (verification) {
      if (verification.result === 'success') {
        req.session.token = verification.token;
        req.session.save();
      }
      res.status(200).send(verification);
    });
});

For quick tryout in Next.js api:

import {createCaptcha, verifyCaptcha} from '@tokensuite/react-slider-captcha-v2-core'; // or @tokensuite/react-slider-captcha-v2-core/lib/esm
export let solution: number;

export default async function handler(req: any, res: any) {
  createCaptcha()
    .then((resp: any) => {
      solution = resp.solution;
      res.status(200).send(resp.data);
    })
    .catch((err: any) => {
      res.status(500).send(err);
    });
}

export default async function handler(req: any, res: any) {
  verifyCaptcha(solution, req.body).then(function (verification: any) {
    res.status(200).send(verification);
  });
}

Create captcha options

sliderCaptcha.create({option: value})

Name	Type	Default	Description
image	buffer	randomly generated pattern	Background image used for captcha - resized to 250x150
fill	string	#000	Color used in overlay of puzzle piece on background
stroke	string	#fff	Color for outline of puzzle piece
strokeWidth	string	0.4	Puzzle piece outline width
opacity	string	0.5	Opacity of puzzle piece overlay on background
distort	bool	false	Apply distortion to the puzzle piece
rotate	bool	false	Apply a random rotation to the puzzle piece

Verify captcha options

sliderCaptcha.verify(captcha, {response, trail: {x, y}}, {option: value})

Name	Type	Default	Description
tolerance	number	7	Allowed deviation from true captcha value

Inspiration

Slider Captcha - A captcha library for web applications from adrsch (MIT License)