Using the Mobile SDKs

Pluto offers multiple mobile SDKs to empower developers on various mobile platforms. Choose your preferred implementation method below:

The React Native SDK is open source and available on GitHub. It’s a wrapper around the PlutoSwiftSDK that enables Pluto proof generation and attestation capabilities in React Native applications.

Note: This SDK requires iOS 17.0 or higher. Android support is planned for future releases.

Getting Started

Pluto offers a React Native SDK to make working with Web Proofs seamless in your mobile applications. You can learn about how Web Proofs work in the Web Proofs documentation page.

The React Native SDK allows you to integrate Web Proofs directly into your React Native applications, providing a native experience for your users. This SDK is specifically designed for mobile applications and handles all the complexities of proof generation and verification.

Installation

To get started with the Pluto React Native SDK, you’ll need to install the package using npm or yarn:

# Using npm
npm install @plutoxyz/react-native-sdk
 
# Using yarn
yarn add @plutoxyz/react-native-sdk

For iOS, you’ll also need to install the pod dependencies:

cd ios && pod install

Basic Usage

The most common way to use the SDK is with the ProofGenerator component, which provides a complete end-to-end proof generation flow:

import React from "react";
import { View } from "react-native";
import { ProofGenerator } from "@plutoxyz/react-native-sdk";
 
function MyComponent() {
  const handleProofGenerated = (proof: string) => {
    console.log("Proof generated:", proof);
  };
 
  return (
    <View style={{ flex: 1 }}>
      <ProofGenerator
        manifestUrl="https://example.com/manifest.json"
        onProofGenerated={handleProofGenerated}
      />
    </View>
  );
}
 
export default MyComponent;

API Reference

For the complete manifest structure and all available options, see the Manifest Reference documentation.

ProofGenerator Component

The main component for generating proofs with a complete UI flow.

interface ProofGeneratorProps {
  // The manifest object to use for proof generation
  manifest?: ManifestFile;
  // URL to fetch the manifest from. If using prepareJS as well, it should be hosted as a sibling file named prepare.js
  manifestUrl?: string;
  // JavaScript code for manifest preparation. Not needed if using manifestUrl and prepare.js is hosted as a sibling file
  prepareJS?: string;
  // Callback when proof is successfully generated
  onProofGenerated: (proof: string) => void;
  // Error callback
  onError?: (error: Error) => void;
  // Callback when manifest is constructed
  onManifestConstructed?: (manifest: ManifestFile) => void;
  // Timeout in milliseconds (default: 60000)
  timeout?: number;
}

Example usage:

import { ProofGenerator } from "@plutoxyz/react-native-sdk";
 
<ProofGenerator
  manifest={{
    manifestVersion: "1",
    id: "twitter-handle-ownership",
    title: "Twitter Handle Ownership",
    description: "Prove you own a Twitter handle",
    mode: "TEE",
    request: {
      method: "GET",
      url: "https://api.x.com/1.1/account/settings.json",
      headers: {
        Authorization: "Bearer <% authToken %>",
      },
      body: null,
    },
    response: {
      status: "200",
      headers: {},
      body: {
        json: ["screen_name"],
      },
    },
  }}
  onProofGenerated={(proof) => console.log(proof)}
  onError={(error) => console.error(error)}
/>;

RequestBuilder Component

A lower-level component that handles only the manifest construction phase.

interface RequestBuilderProps {
  // The manifest object to use for request building
  manifest?: ManifestFile;
  // URL to fetch the manifest from
  manifestUrl?: string;
  // JavaScript code for manifest preparation
  prepareJS?: string;
  // Callback when manifest is constructed
  onManifestConstructed: (manifest: ManifestFile) => void;
  // Error callback
  onError?: (error: Error) => void;
  // Timeout in milliseconds (default: 60000)
  timeout?: number;
}

Example usage:

import { RequestBuilder } from "@plutoxyz/react-native-sdk";
 
<RequestBuilder
  manifestUrl="https://example.com/manifest.json"
  onManifestConstructed={(manifest) => {
    // Use the constructed manifest for proof generation
    generateProof(manifest);
  }}
  onError={(error) => console.error(error)}
/>;

generateProof Function

A utility function for generating proofs without UI components.

function generateProof(manifest: ManifestFile): Promise<string>;

Example usage:

import { generateProof } from "@plutoxyz/react-native-sdk";
 
try {
  const proof = await generateProof({
    manifestVersion: "1",
    id: "example",
    title: "Example Proof",
    mode: "TEE",
    request: {
      method: "GET",
      url: "https://api.example.com/data",
      headers: {},
      body: null,
    },
    response: {
      status: "200",
      headers: {},
      body: {
        json: ["data", "value"],
      },
    },
  });
  console.log("Generated proof:", proof);
} catch (error) {
  console.error("Failed to generate proof:", error);
}

generateProofFromUrl Function

A utility function for generating proofs from a manifest URL without UI components.

function generateProofFromUrl(manifestUrl: string): Promise<string>;

Example usage:

import { generateProofFromUrl } from "@plutoxyz/react-native-sdk";
 
try {
  const proof = await generateProofFromUrl("https://example.com/manifest.json");
  console.log("Generated proof:", proof);
} catch (error) {
  console.error("Failed to generate proof:", error);
}

Platform Support

✅ iOS: Fully supported
❌ Android: Coming soon

JavaScript SDKs Server Side SDK