@prosopo/procaptcha-react v2.6.12

Prosopo Procaptcha React Component Library

React components for integrating the Prosopo procaptcha into a React app.

Prosopo is a distributed human verification service that can be used to stop bots from interacting with your apps. Sign up to be a network beta tester.

Installation

You can install this library with:

npm install @prosopo/procaptcha-react --save

Basic Usage

See the client example for a minimal example of these components being used in a frontend app.

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

Callbacks

ProcaptchaEvents are passed to the captcha component at creation.

The captcha event callbacks are defined as follows:

/**
 * A list of all events which can occur during the Procaptcha process.
 */
export interface ProcaptchaEvents {
    onError: (error: Error) => void
    onHuman: (output: ProcaptchaOutput) => void
    onExtensionNotFound: () => void
    onExpired: () => void
    onFailed: () => void
}

onHuman

The onHuman callback is called when the user has successfully completed the captcha challenge. The ProcaptchaOutput object contains the following fields:

onError

The onError callback is called when an error occurs during the captcha process. The Error object is a standard JavaScript error.

onExpired

The onExpired callback is called when the captcha challenge has expired. This can occur if the user takes too long to complete the challenge.

onFailed

The onFailed callback is called when the user has failed the captcha challenge. This can occur if the user answers the challenge incorrectly.

Add the Procaptcha Widget to your Web page using a React Component

You can see Procaptcha being used as a React component in our React Demo.

The Procaptcha component is called as follows:

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

A config object is required and must contain your SITE_KEY. The callbacks are optional and can be used to handle the various Procaptcha events. The following config demonstrates the PROSOPO_SITE_KEY variable being pulled from environment variables.

const config: ProcaptchaClientConfigInput = {
    account: {
        address: process.env.PROSOPO_SITE_KEY || undefined,
    },
    web2: 'true',
    dappName: 'client-example',
    defaultEnvironment: 'rococo',
    networks: {
        rococo: {
            endpoint: 'wss://rococo-contracts-rpc.polkadot.io:443',
            contract: {
                address: '5HiVWQhJrysNcFNEWf2crArKht16zrhro3FcekVWocyQjx5u',
                name: 'prosopo',
            },
        },
    },
    solutionThreshold: 80,
}

Config Options

Verify the User Response Server Side

Please see the main README for instructions on how to implement the server side of Procaptcha.