Prosopo Procaptcha React Component Library

React components for integrating Prosopo Procaptcha into a React app.

Procaptcha is a drop-in replacement for reCAPTCHA, hCaptcha, and Cloudflare Turnstile that protects user privacy and collects zero data. Sign up for free to get your site key.

Installation

npm install @prosopo/procaptcha-react --save

Basic Usage

import { Procaptcha } from "@prosopo/procaptcha-react"

<Procaptcha config={config} callbacks={{ onHuman, onError, onExpired }} />

See the client example for a working demo.

Callbacks

All callbacks are optional via ProcaptchaCallbacks:

| Callback | Description | | ---------------------- | --------------------------------------------------------------- | | onHuman | Called when the user passes the challenge. Receives a token. | | onError | Called when an error occurs. Receives an Error object. | | onExpired | Called when the challenge expires (user took too long). | | onFailed | Called when the user fails the challenge. | | onClose | Called when the challenge modal is closed. | | onOpen | Called when the challenge modal is opened. | | onReset | Called when the challenge is reset. | | onExtensionNotFound | Called when a required browser extension is not found. |

onHuman

The onHuman callback receives a ProcaptchaToken (a hex-encoded string) that should be sent to your backend for server-side verification.

Config

The config requires your site key. All other fields are optional.

const config: ProcaptchaClientConfigInput = {
    account: {
        address: process.env.PROSOPO_SITE_KEY || undefined,
    },
    web2: true,
    dappName: "my-app",
    solutionThreshold: 80,
}

Config Options

| Key | Type | Default | Description | | ----------------- | ------- | -------------------- | -------------------------------------------------------------- | | account.address | string | (required) | The site key you received when you signed up | | web2 | boolean | true | Set to true for standard web usage | | dappName | string | "ProsopoClientDapp"| The name of your application | | solutionThreshold | number | 80 | Percentage of correct answers required to pass (0-100) | | theme | string | "light" | "light" or "dark" | | mode | string | "visible" | "visible" or "invisible" | | language | string | (auto) | Language override |

Server-side Verification

Use the @prosopo/server package to verify the token on your backend. See the docs for full integration instructions.