@supersymmetrysoftware/slider-captcha-react

Generate a puzzle slider captcha and display it with a React component.

This package is a fork of @adrsch/slider-captcha. All credit goes to the original author for their excellent work. This fork aims to maintain and enhance the project while preserving its core functionality.

Installation

To install the package, run:

npm install @supersymmetrysoftware/slider-captcha-react

Usage

The component now supports an optional expiry prop (in seconds). Regardless of the captcha's verification status, a timer will automatically reset the captcha after the specified time. In addition, the component exposes a reset method via a ref for manual resets.

Basic Usage

import React from "react";
import SliderCaptcha from "@supersymmetrysoftware/slider-captcha-react";

function verifiedCallback(token) {
  console.log("Captcha token: " + token);
}

function App() {
  return (
    <SliderCaptcha
      create="https://example.com/captcha/create"
      verify="https://example.com/captcha/verify"
      callback={verifiedCallback}
      expiry={10} // Automatically resets 10 seconds after creation
    />
  );
}

export default App;

Using the Reset Method with a Ref

import React, { useRef } from "react";
import SliderCaptcha from "@supersymmetrysoftware/slider-captcha-react";

function verifiedCallback(token) {
  console.log("Captcha token: " + token);
}

function App() {
  const captchaRef = useRef();

  const handleReset = () => {
    if (captchaRef.current) {
      captchaRef.current.reset();
    }
  };

  return (
    <div>
      <SliderCaptcha
        ref={captchaRef}
        create="https://example.com/captcha/create"
        verify="https://example.com/captcha/verify"
        callback={verifiedCallback}
        expiry={10} // Automatically resets 10 seconds after creation
      />
      <button onClick={handleReset}>Reset Captcha</button>
    </div>
  );
}

export default App;

React Component Props

| Name | Type | Default | Description | | :------- | ------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | callback | func | (token) => console.log(token) | Called with token on successful verification | | create | string or func | captcha/create | Either the URL to fetch data from or a function () returning a promise which resolves with { background, slider } as PNG buffers | | verify | string or func | captcha/verify | Either the URL to fetch data from or a function (response, trail) returning a promise which resolves with { result, token } | | text | { anchor: string, challenge: string } | { anchor: 'I am human', challenge: 'Slide to finish the puzzle' } | Text used for captcha | | variant | string | light | Use 'light' for light theme, 'dark' for dark theme | | expiry | number | 0 | Expiry time in seconds after which the captcha will automatically reset, regardless of its verification status. Set to 0 to disable auto-reset. |

Light:

Dark:

Credits

This package is based on the original work by @adrsch. If you find this package useful, consider checking out the original repository and giving it a star. 🙌

Maintained by SupersymmetrySoftware to ensure continued updates and improvements.