JavaScript SDK Reference

Overview

The prove function from the @plutoxyz/web-proofs library provides a vanilla JavaScript implementation for integrating Pluto’s zero-knowledge proof generation (Web Proofs) into your application. It handles device detection, platform compatibility, and various user setups automatically.

There are two primary methods for generating Web Proofs using Pluto:

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 function intelligently determines the best method to request a proof based on the user’s device, platform, and installed applications/extensions.

Key functionality includes:

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

script.js

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

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

Usage

script.js

// Initialize the prove function
const { proof, error } = await prove({
  manifestUrl: "https://raw.githubusercontent.com/pluto/attest-integrations/main/integrations/reddit-user-karma/manifest.dev.json",
  containerId: "prover-container", // ID of the DOM element where the prover UI will be rendered
  options: {
    preferredDeviceProveMode: "ios",
    proverMode: "Origo",
    extensionEnabled: false,
    showProofResult: true,
    showError: true,
    showLoading: true,
    styles: {
      button: { /* your custom styles */ },
      loadingSpinner: { /* your custom styles */ },
      error: { /* your custom styles */ },
      proofResult: { /* your custom styles */ },
      loadingSpinnerContainer: { /* 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...")
  }
});

if (error) {
  console.error("Proof generation failed:", error);
} else if (proof) {
  console.log("Proof generated:", proof);
}

// Initialize the prove function
const { proof, error } = await prove({
  manifestUrl: "https://raw.githubusercontent.com/pluto/attest-integrations/main/integrations/reddit-user-karma/manifest.dev.json",
  containerId: "prover-container", // ID of the DOM element where the prover UI will be rendered
  options: {
    preferredDeviceProveMode: "ios",
    proverMode: "Origo",
    extensionEnabled: false,
    showProofResult: true,
    showError: true,
    showLoading: true,
    styles: {
      button: { /* your custom styles */ },
      loadingSpinner: { /* your custom styles */ },
      error: { /* your custom styles */ },
      proofResult: { /* your custom styles */ },
      loadingSpinnerContainer: { /* 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...")
  }
});

if (error) {
  console.error("Proof generation failed:", error);
} else if (proof) {
  console.log("Proof generated:", proof);
}

Parameters

manifestUrlstring

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

containerIdstring

ID of the DOM element where the prover UI will be rendered.

preferredDeviceProveMode"ios" | "chrome-extension"

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

proverMode"TLSN" | "Origo"

The mode of the prover. Typically set to 'Origo'. Default is 'Origo'.

extensionEnabledboolean

Determines whether the extension is enabled. Default is 'false'.

optionsobject

Configuration options for UI visibility and styling:

showProofResultboolean

Show/hide the proof result display. Default: true

showErrorboolean

Show/hide error messages. Default: true

showLoadingboolean

Show/hide loading indicators. Default: true

qrCodeSizenumber

Size of the QR code in pixels. Default: 192

stylesobject

Custom CSS styles for UI elements:

buttonPartial<CSSStyleDeclaration>

Custom styles for the prove button

loadingSpinnerPartial<CSSStyleDeclaration>

Custom styles for the loading spinner

errorPartial<CSSStyleDeclaration>

Custom styles for error messages

proofResultPartial<CSSStyleDeclaration>

Custom styles for the proof result display

loadingSpinnerContainerPartial<CSSStyleDeclaration>

Custom styles for the loading spinner container

callbacksobject

Event handlers for the proving process:

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 generation succeeds

onMobileAppRedirect() => void

Called before redirecting to mobile app

Return ValuePromise<{ proof: string | null; error: string | null }>

Returns a promise that resolves with either a proof string or an error message. Times out after 5 minutes.

React SDK Manifest Reference