Prosopo Procaptcha

Procaptcha is a client-side library for Prosopo Procaptcha. It is responsible for managing the entire captcha challenge lifecycle, including:

• Managing the challenge flow and state.
• Handling solution submission.
• Communicating with the Prosopo Provider API.

The library is framework-agnostic and can be used with any JavaScript framework to build a custom captcha UI.

The @prosopo/util-crypto package is a selective clone of the Polkadot JS keyring package, modified for the Prosopo ecosystem. It provides functionality for managing cryptographic keys and accounts.

Key differences from the original Polkadot JS keyring:

• Package Name: Now uses @prosopo/util-crypto.
• Implementation: Uses a pure JavaScript implementation of sr25519 from @scure/sr25519 instead of WASM.
• Supported Account Types: Only sr25519 is supported. Other account types such as ecdsa, ed25519, and ethereum have been removed.
• Testing: Uses vitest for the test suite.

The project is organized into several functional groups:

Common

• types: Shared interface and constant declarations used across multiple packages.

Client-side (Browser)

• procaptcha-bundle: Contains the captcha widgets:
  • procaptcha-frictionless: Dynamic CAPTCHA using client-side detection to decide between PoW or Image.
  • procaptcha-react: Image-based CAPTCHA.
  • procaptcha-pow: Proof-of-Work CAPTCHA.
• widget-skeleton: A web component wrapper for the widget skeleton.

Server-side (Node.js)

• provider: API endpoints for the captcha widget.
  • cli: A CLI wrapper for the provider that starts an Express server.
• database: MongoDB Query builder.
  • types-database: Interfaces and types for the Query builder.

Building Configs (Vite)

Located in dev/config/src/vite:

• vite.frontend.config.ts
• vite.backend.config.ts

Procaptcha integrations are organized within the frameworks directory. Each framework integration consists of two distinct parts:

1. {name}-procaptcha-wrapper: A reusable integration component specifically tailored for that framework (e.g., an Angular wrapper).
2. {name}-procaptcha-integration-demo: A demo application designed to showcase the implementation of the wrapper component.

When using these integrations, you will typically consume the -procaptcha-wrapper package in your application.

To ensure type consistency with the core Procaptcha codebase, all framework wrappers re-export ProcaptchaRenderOptions from the @prosopo/procaptcha-wrapper package.

Key Benefit for Consumers: Because the @prosopo/procaptcha-wrapper package includes the full ProcaptchaRenderOptions type inline in its distribution files, you do not need to install @prosopo/types or its dependencies in your own project to use these options. You can simply import them from the wrapper package.

The Procaptcha Wrapper is a core package used by all framework-specific integrations.

Important: You should avoid using this package directly if a dedicated integration for your target framework (e.g., Angular, React) is already available. Only use this package directly if no framework-specific integration exists for your environment.

When building components to host Prosopo features, follow these standard definitions:

• React (.tsx): Can be implemented as Class-based components (using render()) or Function-based components.
• Vue (.vue): Uses a Single File Component (SFC) structure with <template>, <script>, and <style>. Use <script setup> for modern instance-based logic.
• Svelte (.svelte): Uses <script module> for code run once at inclusion, and <script> for code run once per instance. Use $props() to access properties.
• Angular (.ts): Uses the @Component decorator. Use @Input() to define properties passed from parent components.

// React Function-based
function App(properties: AppProperties) {
    return (<div />);
}