Example Github Repo

Our example repository demonstrates how to integrate @plutoxyz/web-proofs in both vanilla JavaScript and React applications.

ℹ️ The default option for generating Web Proofs is to use the Pluto-hosted notary. Developers do not need to set up the prover or host it themselves, unless they explicitly want to self-host this infrastructure or build custom infrastructure. For more information, see the detailed documentation using the JavaScript SDK.

Quick Start

# Install dependencies
npm install
 
# Run basic examples
npm run vanilla    # Vanilla JavaScript
npm run react     # React
 
# Run advanced examples with configuration UI
npm run vanilla:advanced
npm run react:advanced

Basic Implementation

The basic examples show minimal setup required for web-proofs integration:

React

import { Prove } from "@plutoxyz/web-proofs";
 
const App = () => {
  return (
    <div>
      <Prove manifestUrl="https://raw.githubusercontent.com/pluto/attest-integrations/refs/heads/main/integrations/reddit-user-karma/manifest.dev.json" />
    </div>
  );
};

Vanilla JavaScript

import { prove } from "@plutoxyz/web-proofs";
 
await prove({
  manifestUrl:
    "https://raw.githubusercontent.com/pluto/attest-integrations/refs/heads/main/integrations/reddit-user-karma/manifest.dev.json",
  containerId: "proveContainer",
});

Advanced Features

The advanced examples demonstrate full configuration capabilities:

Prover mode selection (Origo/TLSN)
Device mode selection (iOS/Chrome Extension)
QR code customization
Error handling
Loading states
Styling options
Debug mode

Advanced React Configuration

<Prove
  manifestUrl="..."
  options={{
    preferredDeviceProveMode: "ios", // or 'chrome-extension'
    proverMode: "Origo", // or 'TLSN'
    extensionEnabled: false,
    showProofResult: true,
    showError: true,
    showLoading: true,
    styles: {
      button: {
        backgroundColor: "#000000",
        color: "#ffffff",
      },
      qrCodeSize: 192,
    },
  }}
  callbacks={{
    onLoadingChange: (isLoading) => console.log("Loading:", isLoading),
    onError: (error) => console.error("Error:", error),
    onSuccess: (result) => console.log("Success:", result),
    onMobileAppRedirect: () => console.log("Redirecting to mobile app..."),
  }}
/>

Advanced Vanilla JavaScript Configuration

import { prove } from "@plutoxyz/web-proofs";
 
const config = {
  manifestUrl:
    "https://raw.githubusercontent.com/pluto/attest-integrations/refs/heads/main/integrations/reddit-user-karma/manifest.dev.json",
  containerId: "proveContainer",
  options: {
    preferredDeviceProveMode: "ios", // or 'chrome-extension'
    proverMode: "Origo", // or 'TLSN'
    extensionEnabled: false,
    showProofResult: true,
    showError: true,
    showLoading: true,
    styles: {
      button: {
        backgroundColor: "#000000",
        color: "#ffffff",
      },
      qrCodeSize: 192,
    },
  },
  callbacks: {
    onLoadingChange: (isLoading) => console.log("Loading:", isLoading),
    onError: (error) => console.error("Error:", error),
    onSuccess: (result) => console.log("Success:", result),
    onMobileAppRedirect: () => console.log("Redirecting to mobile app..."),
  },
};
 
try {
  const result = await prove(config);
  if (result.proof) console.log("Final proof:", result.proof);
  else if (result.error) console.error("Final error:", result.error);
} catch (error) {
  console.error("Initialization error:", error);
}

Authenticated Data Web Proofs