React SDK Reference

Overview

The Prove component is a React component from the @plutoxyz/web-proofs library that simplifies the integration of Web Proofs into your application. It abstracts away the complexities of handling different devices, platforms, and user setups, allowing developers to seamlessly request and receive proofs from users.

There are two primary methods for generating Web Proofs using Pluto, however you only need to choose one. Choose your preferred implementation method below:

iOS App: Users can generate proofs using the Pluto Attest app available on iOS devices.
Chrome Extension: Users on desktop can use the Pluto Chrome extension to generate proofs (Coming soon).

The Prove component intelligently determines the best method to request a proof based on the user’s device, platform, and installed applications/extensions.

Detecting if the user is on a mobile device or desktop.
Checking if the Pluto Chrome extension is installed.
Listening for proof results from both the iOS app and Chrome extension.
Providing fallback options if a preferred method isn’t available.

Key Features

Feature	Description
Proof Generation Handling	Manages the proof generation process, including loading states, errors, and displaying the proof result.
Device and Platform Detection	Automatically detects the user’s device type (mobile or desktop) and operating system (iOS or Android).
Extension Installation Checks	Checks if the Pluto Chrome extension is installed and prompts the user accordingly.
Preferred Device Mode	Allows developers to specify a preferred device mode for proof generation (`ios` or `chrome_extension`), which can influence the method used.

Import

Component.tsx

import { Prove } from "@plutoxyz/web-proofs"

import { Prove } from "@plutoxyz/web-proofs"

Usage

Component.tsx

const Component = () => {
    return (
      <Prove
        manifestUrl="https://raw.githubusercontent.com/pluto/attest-integrations/main/integrations/reddit-user-karma/manifest.dev.json"
        options={{
          preferredDeviceProveMode: "ios",
          proverMode: "Origo",
          developerMode: false,
          extensionEnabled: false,
          showProofResult: true,
          showError: true,
          showLoading: true,
          styles: {
            button: { /* your custom styles */ },
            loadingSpinner: { /* your custom styles */ },
            loadingSpinnerContainer: { /* your custom styles */ },
            error: { /* your custom styles */ },
            proofResult: { /* your custom styles */ },
            qrCodeSize: 192
          }
        }}
        callbacks={{
          onLoadingChange: (isLoading) => console.log("Loading:", isLoading),
          onError: (error) => console.error("Error:", error),
          onSuccess: (result) => console.log("Proof Result:", result),
          onMobileAppRedirect: () => console.log("Redirecting to mobile app...")
        }}
      />
    );
  };

const Component = () => {
    return (
      <Prove
        manifestUrl="https://raw.githubusercontent.com/pluto/attest-integrations/main/integrations/reddit-user-karma/manifest.dev.json"
        options={{
          preferredDeviceProveMode: "ios",
          proverMode: "Origo",
          developerMode: false,
          extensionEnabled: false,
          showProofResult: true,
          showError: true,
          showLoading: true,
          styles: {
            button: { /* your custom styles */ },
            loadingSpinner: { /* your custom styles */ },
            loadingSpinnerContainer: { /* your custom styles */ },
            error: { /* your custom styles */ },
            proofResult: { /* your custom styles */ },
            qrCodeSize: 192
          }
        }}
        callbacks={{
          onLoadingChange: (isLoading) => console.log("Loading:", isLoading),
          onError: (error) => console.error("Error:", error),
          onSuccess: (result) => console.log("Proof Result:", result),
          onMobileAppRedirect: () => console.log("Redirecting to mobile app...")
        }}
      />
    );
  };

Parameters

manifestUrlstring

The URL to the manifest JSON file defining the proof configuration.

optionsobject

Configuration options for the Prove component

preferredDeviceProveMode"ios" | "chrome-extension"

Preferred method for generating proofs. Default is 'ios'.

proverMode"TLSN" | "Origo"

The mode of the prover. Default is 'Origo'.

developerModeboolean

Enables developer mode for debugging. Default is false.

extensionEnabledboolean

Enables Chrome extension support. Default is false.

showProofResultboolean

Show proof result in UI. Default is true.

showErrorboolean

Show errors in UI. Default is true.

showLoadingboolean

Show loading states. Default is true.

stylesobject

Custom styling options for components

callbacksobject

Event callbacks for the component

onLoadingChange(isLoading: boolean) => void

Called when loading state changes

onError(error: any) => void

Called when an error occurs

onSuccess(result: any) => void

Called when proof is generated successfully

onMobileAppRedirect() => void

Called before mobile app redirect

Manifest Walkthrough JavaScript SDK