### Install Reclaim SDK and QR Code Generator (Bash)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Installs the Reclaim Protocol JavaScript SDK and the react-qr-code library using npm. This is a prerequisite for using the SDK in a React application.

```bash
npm install @reclaimprotocol/js-sdk react-qr-code
```

--------------------------------

### Start Development Server (Bash)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/example/README.md

Commands to run the development server for the Reclaim.js SDK project using different package managers. This allows for local development and testing.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Handle Reclaim SDK Initialization and Session Errors

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Implement robust error handling for Reclaim JS SDK operations, including initialization and session start. This example demonstrates catching specific error types like `InitError` and `InvalidParamError` during initialization, and `ProofNotVerifiedError`, `ProviderFailedError`, `SessionNotStartedError` within the session's `onError` callback.

```javascript
import { ReclaimProofRequest } from "@reclaimprotocol/js-sdk";

try {
  const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

  await proofRequest.startSession({
    onSuccess: (proofs) => {
      // proofs can be empty if callback url set
      console.log("Proof received:", proofs);
    },
    onError: (error) => {
      // Handle different error types
      if (error.name === "ProofNotVerifiedError") {
        console.error("Proof verification failed");
      } else if (error.name === "ProviderFailedError") {
        console.error("Provider failed to generate proof");
      } else if (error.name === "SessionNotStartedError") {
        console.error("Session could not be started");
      } else {
        console.error("Unknown error:", error.message);
      }
    },
  });
} catch (error) {
  // Handle initialization errors
  if (error.name === "InitError") {
    console.error("Failed to initialize SDK:", error.message);
  } else if (error.name === "InvalidParamError") {
    console.error("Invalid parameters provided:", error.message);
  }
}
```

--------------------------------

### Create React Application (Bash)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Creates a new React application using Create React App and navigates into the project directory. This sets up the basic structure for a React project.

```bash
npx create-react-app reclaim-app
cd reclaim-app
```

--------------------------------

### isBrowserExtensionAvailable

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Checks if the Reclaim browser extension is installed and available, which is necessary for initiating the desktop verification flow.

```APIDOC
## isBrowserExtensionAvailable

### Description
Checks if the Reclaim browser extension is installed and accessible. This is a crucial step for determining whether to use the browser extension for the desktop verification flow or to fall back to other methods like displaying a QR code.

### Method
`isBrowserExtensionAvailable(timeout?: number): Promise<boolean>
`

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Check with default timeout (200ms)
const hasExtension = await proofRequest.isBrowserExtensionAvailable();

// Check with custom timeout
const hasExtensionCustom = await proofRequest.isBrowserExtensionAvailable(500);

if (hasExtension) {
  console.log('Browser extension detected - using extension flow');
  await proofRequest.triggerReclaimFlow();
} else {
  console.log('No extension - showing QR code');
  const url = await proofRequest.getRequestUrl();
  // Display QR code with url
}
```

### Response
- **isBrowserExtensionAvailable()**: `Promise<boolean>` - A promise that resolves to `true` if the browser extension is available, and `false` otherwise.
```

--------------------------------

### Set Redirect URL for Proof Generation

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Configures the URL to redirect users after successful proof generation and submission. Supports simple GET redirects, POST redirects with a body, and GET redirects with query parameters when using the In-Browser SDK.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Simple GET redirect
proofRequest.setRedirectUrl('https://your-app.com/success');

// POST redirect with body (In-Browser SDK only)
proofRequest.setRedirectUrl(
  'https://your-app.com/success',
  'POST',
  [
    { name: 'status', value: 'verified' },
    { name: 'user_id', value: '12345' }
  ]
);

// GET redirect with query parameters (In-Browser SDK only)
proofRequest.setRedirectUrl(
  'https://your-app.com/success',
  'GET',
  [
    { name: 'verified', value: 'true' }
  ]
);
```

--------------------------------

### Initialize Reclaim SDK with Browser Extension Options (JavaScript)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

This JavaScript code demonstrates how to initialize the ReclaimProofRequest object with specific options related to browser extension integration. It shows how to enable/disable the extension and specify a custom extension ID.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID, {
  useBrowserExtension: true, // Enable/disable browser extension (default: true)
  extensionID: "custom-extension-id", // Use custom extension ID if needed
  // ... other options
});
```

--------------------------------

### Configure Browser Extension and Flow

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Configure browser extension behavior and detection. This includes checking for extension availability, triggering the verification flow, and initializing the SDK with specific browser extension options.

```javascript
const isExtensionAvailable = await reclaimProofRequest.isBrowserExtensionAvailable();
await reclaimProofRequest.triggerReclaimFlow();
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID, {
  useBrowserExtension: true,
  extensionID: "custom-extension-id",
  useAppClip: true,
  log: true,
});
```

--------------------------------

### Check Browser Extension Availability (JavaScript)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

This JavaScript code snippet shows how to manually check if the Reclaim browser extension is installed and available for use. It logs a message to the console indicating whether the extension is detected or not, allowing for alternative flow logic.

```javascript
const isExtensionAvailable = await reclaimProofRequest.isBrowserExtensionAvailable();
if (isExtensionAvailable) {
  console.log("Reclaim browser extension is installed");
} else {
  console.log("Browser extension not available, will use alternative flow");
}
```

--------------------------------

### Start and Monitor Proof Request Session (JavaScript)

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Initiates a proof request session and continuously monitors its status. It invokes provided callbacks upon successful proof submission or in case of errors, handling different proof formats and error types.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

await proofRequest.startSession({
  onSuccess: (proof) => {
    // proof can be a single Proof object or Proof[] array
    if (Array.isArray(proof)) {
      if (proof.length === 0) {
        // Empty array when using custom callback URL
        console.log('Proof sent to custom callback URL');
      } else {
        console.log('Multiple proofs received:', proof.length);
        proof.forEach(p => console.log('Context:', p.claimData.context));
      }
    } else if (proof) {
      console.log('Single proof received');
      console.log('Provider:', proof.claimData.provider);
      console.log('Timestamp:', proof.claimData.timestampS);
      console.log('Parameters:', proof.claimData.parameters);
      console.log('Signatures:', proof.signatures);
    }
  },
  onError: (error) => {
    // Handle specific error types
    if (error.name === 'ProofNotVerifiedError') {
      console.error('Proof verification failed');
    } else if (error.name === 'ProviderFailedError') {
      console.error('Provider failed to generate proof');
    } else if (error.name === 'ProofSubmissionFailedError') {
      console.error('Proof submission to callback failed');
    } else if (error.name === 'ErrorDuringVerificationError') {
      console.error('User cancelled or provider validation failed');
    } else {
      console.error('Unknown error:', error.message);
    }
  }
});
```

--------------------------------

### Customize Modal Options in JavaScript

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Allows customization of the QR code modal displayed to desktop users. Options include setting the modal title and other appearance or behavior properties.

```javascript
reclaimProofRequest.setModalOptions({
  title: "Verify Your Account",

```

--------------------------------

### Export and Import SDK Configuration

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Export the Reclaim SDK configuration as a JSON string and import it to initialize the SDK with the same settings on a different service or backend. This facilitates consistent configuration across different environments.

```javascript
// On the client-side or initial service
const configJson = reclaimProofRequest.toJsonString();
console.log("Exportable config:", configJson);

// On the backend or different service
const importedRequest = ReclaimProofRequest.fromJsonString(configJson);
const requestUrl = await importedRequest.getRequestUrl();
```

--------------------------------

### Set Custom Redirect URL in JavaScript

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Specifies a custom URL for redirecting users after successful proof generation. Supports GET (default) and POST methods, with optional body parameters for POST requests or query parameters for GET requests. Note: POST redirection and body parameters are only supported in the In-Browser SDK.

```javascript
reclaimProofRequest.setRedirectUrl("https://example.com/redirect");

reclaimProofRequest.setRedirectUrl(
  "https://example.com/redirect",
  "POST", // In-Browser SDK only
  [{ name: "foo", value: "bar" }]  // In-Browser SDK only
);
```

--------------------------------

### Access Debug Page URL

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/example/src/app/debug/README.md

This snippet shows the base URL to access the device detection debug page within a Reclaim SDK example application. It is typically hosted on localhost.

```text
http://localhost:3000/debug
```

--------------------------------

### setRedirectUrl

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Sets a custom URL to redirect users after successful proof generation and submission. Supports GET and POST methods with optional parameters.

```APIDOC
## setRedirectUrl

### Description
Sets a custom URL to redirect users after successful proof generation and submission. This method can be configured for simple GET redirects, POST redirects with a body, or GET redirects with query parameters.

### Method
`setRedirectUrl(url: string, method?: 'GET' | 'POST', params?: Array<{ name: string; value: string; }>)
`

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **url** (string) - Required - The URL to redirect to.
- **method** (string) - Optional - The HTTP method for the redirect ('GET' or 'POST'). Defaults to 'GET'.
- **params** (Array<{ name: string; value: string; }>) - Optional - An array of key-value pairs to be included as query parameters (for GET) or in the request body (for POST).

### Request Example
```javascript
// Simple GET redirect
proofRequest.setRedirectUrl('https://your-app.com/success');

// POST redirect with body
proofRequest.setRedirectUrl(
  'https://your-app.com/success',
  'POST',
  [
    { name: 'status', value: 'verified' },
    { name: 'user_id', value: '12345' }
  ]
);

// GET redirect with query parameters
proofRequest.setRedirectUrl(
  'https://your-app.com/success',
  'GET',
  [
    { name: 'verified', value: 'true' }
  ]
);
```

### Response
This method does not return a value directly but configures the redirect behavior for the proof request.
```

--------------------------------

### Set Context for Proof Requests in JavaScript

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Adds context to a Reclaim proof request, useful for providing additional information. It demonstrates both the current `setContext` method and the deprecated `addContext` method.

```javascript
reclaimProofRequest.setContext("0x00000000000", "Example context message");

// deprecated method: use setContext instead
reclaimProofRequest.addContext("0x00000000000", "Example context message");
```

--------------------------------

### Get Session ID

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Retrieve the current session ID for the proof request. This utility method can be used for tracking or debugging specific verification sessions.

```javascript
const sessionId = reclaimProofRequest.getSessionId();
console.log("Current session ID:", sessionId);
```

--------------------------------

### Control Auto-Submission of Proofs

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Configure whether the verification client should automatically submit necessary proofs once they are generated. Setting `canAutoSubmit` to `false` requires manual user submission.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID, {
  canAutoSubmit: true,
});
```

--------------------------------

### Check Browser Extension Availability

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Determines if the Reclaim browser extension is installed and accessible, which is necessary for initiating the desktop verification flow. Allows checking with a default or custom timeout duration. If available, it can trigger the flow; otherwise, a QR code can be displayed.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Check with default timeout (200ms)
const hasExtension = await proofRequest.isBrowserExtensionAvailable();

// Check with custom timeout
const hasExtensionCustom = await proofRequest.isBrowserExtensionAvailable(500);

if (hasExtension) {
  console.log('Browser extension detected - using extension flow');
  await proofRequest.triggerReclaimFlow();
} else {
  console.log('No extension - showing QR code');
  const url = await proofRequest.getRequestUrl();
  // Display QR code with url
}
```

--------------------------------

### Set Custom Cancel Redirect URL in JavaScript

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Defines a custom URL to redirect users when a verification process is cancelled. Similar to `setRedirectUrl`, it supports GET and POST methods with optional body parameters, and these features are restricted to the In-Browser SDK.

```javascript
reclaimProofRequest.setCancelRedirectUrl("https://example.com/error-redirect");

reclaimProofRequest.setCancelRedirectUrl(
  "https://example.com/error-redirect",
  "POST",  // In-Browser SDK only
  [{ name: "error_code", value: "1001" }]  // In-Browser SDK only
);
```

--------------------------------

### Customize Share Page and App Clip URLs

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Customize the share page and app clip URLs for your application. This allows for a more branded and integrated user experience by directing users to specific URLs for verification or app clip engagement.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID, {
  customSharePageUrl: "https://your-custom-domain.com/verify",
  customAppClipUrl: "https://appclip.apple.com/id?p=your.custom.app.clip",
});
```

--------------------------------

### Set Backend Callback URLs for Proofs and Cancellations

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Configure your Reclaim proof request to send proof and cancellation data to your backend server using callback URLs. This enables secure server-side processing of these events. Ensure your backend is set up to receive and handle these POST requests.

```javascript
reclaimProofRequest.setAppCallbackUrl("https://your-backend.com/receive-proofs");
reclaimProofRequest.setCancelCallbackUrl("https://your-backend.com/receive-cancel");
```

--------------------------------

### Set Provider-Specific Parameters in JavaScript

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Configures specific parameters required by a Reclaim provider. This function allows passing an object containing key-value pairs for provider-specific settings.

```javascript
reclaimProofRequest.setParams({ email: "test@example.com", userName: "testUser" });
```

--------------------------------

### Add Metadata for Verification Client

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Pass additional metadata to the verification client to customize its experience, such as themes or UI elements. The keys and values must be strings. This metadata typically does not affect the verification process itself.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID, {
  metadata: { theme: 'dark', verify_another_way_link: 'https://exampe.org/alternative-verification?id=1234' },
});
```

--------------------------------

### React Component for Reclaim Protocol Integration (JavaScript)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

A React component that integrates the Reclaim Protocol JavaScript SDK. It initializes the SDK, handles claim creation, displays a QR code for verification, and shows the proof upon successful verification. It requires application ID, secret, and provider ID.

```javascript
import React, { useState, useEffect } from "react";
import { ReclaimProofRequest, verifyProof, ClaimCreationType } from "@reclaimprotocol/js-sdk";
import QRCode from "react-qr-code";

function App() {
  const [reclaimProofRequest, setReclaimProofRequest] = useState(null);
  const [requestUrl, setRequestUrl] = useState("");
  const [statusUrl, setStatusUrl] = useState("");
  const [proofs, setProofs] = useState(null);

  useEffect(() => {
    async function initializeReclaim() {
      const APP_ID = "YOUR_APPLICATION_ID_HERE";
      const APP_SECRET = "YOUR_APPLICATION_SECRET_HERE";
      const PROVIDER_ID = "YOUR_PROVIDER_ID_HERE";

      const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);
      setReclaimProofRequest(proofRequest);
    }

    initializeReclaim();
  }, []);

  async function handleCreateClaim() {
    if (!reclaimProofRequest) {
      console.error("Reclaim Proof Request not initialized");
      return;
    }

    const url = await reclaimProofRequest.getRequestUrl();
    setRequestUrl(url);

    const status = reclaimProofRequest.getStatusUrl();
    setStatusUrl(status);
    console.log("Status URL:", status);

    await reclaimProofRequest.startSession({
      onSuccess: (proofs) => {
        if (proofs && typeof proofs !== "string") {
          if (Array.isArray(proofs)) {
            if (proofs.length == 0) {
              console.log("No proofs received. This is expected when using a custom callback url.");
            } else {
              console.log(JSON.stringify(proofs.map((p) => p.claimData.context)));
            }
          } else {
            console.log("Proof received:", proofs?.claimData.context);
          }
          setProofs(proofs);
        }
      },
      onFailure: (error) => {
        console.error("Verification failed", error);
      },
    });
  }

  return (
    <div className="App">
      <h1>Reclaim Protocol Demo</h1>
      <button onClick={handleCreateClaim}>Create Claim</button>
      {requestUrl && (
        <div>
          <h2>Scan this QR code to start the verification process:</h2>
          <QRCode value={requestUrl} />
        </div>
      )}
      {proofs && (
        <div>
          <h2>Verification Successful!</h2>
          <pre>{JSON.stringify(proofs, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default App;

```

--------------------------------

### Initiate and Handle Reclaim Verification Flow (JavaScript)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

This JavaScript function demonstrates how to use the `triggerReclaimFlow()` method to initiate the Reclaim verification process and listen for success or failure callbacks. It handles potential errors during the flow initiation and provides feedback on the verification outcome.

```javascript
async function handleCreateClaim() {
  if (!reclaimProofRequest) {
    console.error("Reclaim Proof Request not initialized");
    return;
  }

  try {
    // Start the verification process automatically
    await reclaimProofRequest.triggerReclaimFlow();

    // Listen for the verification results
    await reclaimProofRequest.startSession({
      onSuccess: (proofs) => {
        if (proofs && typeof proofs !== "string") {
          if (Array.isArray(proofs)) {
            if (proofs.length == 0) {
              // proofs sent to callback url
            } else {
              console.log(JSON.stringify(proofs.map((p) => p.claimData.context)));
            }
          } else {
            console.log("Proof received:", proofs?.claimData.context);
          }
          setProofs(proofs);
        }
      },
      onFailure: (error) => {
        console.error("Verification failed", error);
      },
    });
  } catch (error) {
    console.error("Error triggering Reclaim flow:", error);
  }
}
```

--------------------------------

### Set Custom Callback URL for Proof Submission (JavaScript)

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Configures a custom HTTP POST endpoint to receive proofs directly, bypassing the Reclaim backend. This allows proofs to be sent to your server in either form-urlencoded or JSON format, with an example backend handler provided.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Set callback URL with form-urlencoded format (default)
proofRequest.setAppCallbackUrl('https://your-backend.com/receive-proof');

// Set callback URL with JSON format
proofRequest.setAppCallbackUrl('https://your-backend.com/receive-proof', true);

// Backend handler example (Express)
app.post('/receive-proof', async (req, res) => {
  const sessionId = req.headers['x-reclaim-session-id'];
  const allowAiWitness = req.query.allowAiWitness === 'true';

  // For JSON format (jsonProofResponse: true)
  const proof = req.body;

  // Verify and process
  const verified = await verifyProof(proof, allowAiWitness);
  res.json({ success: verified });
});
```

--------------------------------

### Platform-Specific Flow Control

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Control the reclaim flow manually or use the streamlined approach. The `triggerReclaimFlow()` method handles automatic platform detection, while manual QR code handling is also supported.

```javascript
// Traditional approach with manual QR code handling
const requestUrl = await reclaimProofRequest.getRequestUrl();
// Display your own QR code implementation

// Or use the new streamlined approach
await reclaimProofRequest.triggerReclaimFlow();
```

--------------------------------

### Get Session Status URLs and IDs with Reclaim.js SDK

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Functions to retrieve essential identifiers and URLs for monitoring and managing a verification session initiated via the Reclaim.js SDK. This includes the session ID, status monitoring URL, and callback URLs.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Get session ID
const sessionId = proofRequest.getSessionId();
console.log('Session ID:', sessionId);

// Get status monitoring URL
const statusUrl = proofRequest.getStatusUrl();
console.log('Status URL:', statusUrl);

// Get callback URL (custom or default)
const callbackUrl = proofRequest.getAppCallbackUrl();
console.log('Callback URL:', callbackUrl);

// Get cancel callback URL
const cancelCallbackUrl = proofRequest.getCancelCallbackUrl();
console.log('Cancel Callback URL:', cancelCallbackUrl);

// Poll status URL manually if needed
const response = await fetch(statusUrl);
const status = await response.json();
console.log('Session status:', status.session?.statusV2);
```

--------------------------------

### Customize Reclaim Verification Modal (JavaScript)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

This JavaScript code illustrates how to customize the appearance and behavior of the QR code modal used as a fallback for desktop verification. It allows setting the modal title, description, theme, auto-close timer, and providing a custom extension URL and close callback.

```javascript
// Set modal options before triggering the flow
reclaimProofRequest.setModalOptions({
  title: "Custom Verification Title",
  description: "Scan this QR code with your mobile device to verify your account",
  darkTheme: true, // Enable dark theme (default: false)
  modalPopupTimer: 5, // Auto-close modal after 5 minutes (default: 1 minute)
  showExtensionInstallButton: true, // Show extension install button (default: false)
  extensionUrl: "https://custom-extension-url.com", // Custom extension download URL
  onClose: () => {
    console.log("Modal was closed");
  }, // Callback when modal is closed
});

await reclaimProofRequest.triggerReclaimFlow();
```

--------------------------------

### Set Custom App Callback URL in JavaScript

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Configures a custom callback URL for receiving proofs and status updates directly. When set, proofs are sent to this URL instead of the Reclaim backend. Supports sending proofs as JSON by setting the second argument to `true`. The session ID is included in the `X-Reclaim-Session-Id` header.

```javascript
reclaimProofRequest.setAppCallbackUrl("https://example.com/callback", true);
```

--------------------------------

### Verify Proofs Manually with Reclaim JS SDK

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Use the `verifyProof` function from the Reclaim JS SDK to manually validate proofs. This function can accept a single proof object or an array of proof objects and returns a boolean indicating their validity. It checks signatures, witness integrity, and claim data for both standalone and blockchain-based proofs.

```javascript
import { verifyProof } from "@reclaimprotocol/js-sdk";

// Verify a single proof
const isValid = await verifyProof(proof);
if (isValid) {
  console.log("Proof is valid");
} else {
  console.log("Proof is invalid");
}

// Verify multiple proofs
const areValid = await verifyProof([proof1, proof2, proof3]);
if (areValid) {
  console.log("All proofs are valid");
} else {
  console.log("One or more proofs are invalid");
}
```

--------------------------------

### ReclaimProofRequest.init

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Initializes a new Reclaim proof request instance with automatic signature generation and session creation. This is the primary entry point for creating verification requests.

```APIDOC
## ReclaimProofRequest.init

### Description
Initializes a new Reclaim proof request instance with automatic signature generation and session creation. This is the primary entry point for creating verification requests.

### Method
`ReclaimProofRequest.init(applicationId, applicationSecret, providerId, options?)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### Initialization Parameters
*   **applicationId** (string) - Required - Your application's unique identifier.
*   **applicationSecret** (string) - Required - Your application's secret key.
*   **providerId** (string) - Required - The identifier of the provider for which the proof is requested.
*   **options** (object) - Optional - Configuration options for initialization:
    *   **log** (boolean) - Enable verbose logging.
    *   **acceptAiProviders** (boolean) - Accept AI witness verification.
    *   **useAppClip** (boolean) - Enable iOS App Clip / Android Instant App.
    *   **useBrowserExtension** (boolean) - Enable browser extension flow.
    *   **canAutoSubmit** (boolean) - Auto-submit proofs when generated.
    *   **preferredLocale** (string) - Set preferred language (e.g., 'en-US').
    *   **metadata** (object) - Custom metadata for the verification client (e.g., `{ theme: 'dark', verify_another_way_link: 'https://example.com/alt-verify' }`).

### Request Example
```javascript
import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk';

// Basic initialization
const proofRequest = await ReclaimProofRequest.init(
  'your-application-id',
  'your-application-secret',
  'provider-id'
);

// Initialize with options
const proofRequestWithOptions = await ReclaimProofRequest.init(
  'your-application-id',
  'your-application-secret',
  'provider-id',
  {
    log: true,
    acceptAiProviders: true,
    useAppClip: true,
    useBrowserExtension: true,
    canAutoSubmit: true,
    preferredLocale: 'en-US',
    metadata: {
      theme: 'dark',
      verify_another_way_link: 'https://example.com/alt-verify'
    }
  }
);
```

### Response
*   **ReclaimProofRequest** - An instance of the ReclaimProofRequest class.
```

--------------------------------

### Initialize Reclaim Proof Request

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Initializes a new Reclaim proof request instance with automatic signature generation and session creation. This is the primary entry point for creating verification requests. Options can be provided to customize logging, AI provider acceptance, app clip usage, browser extension integration, auto-submission, preferred locale, and metadata.

```javascript
import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk';

// Basic initialization
const proofRequest = await ReclaimProofRequest.init(
  'your-application-id',
  'your-application-secret',
  'provider-id'
);

// Initialize with options
const proofRequestWithOptions = await ReclaimProofRequest.init(
  'your-application-id',
  'your-application-secret',
  'provider-id',
  {
    log: true,                    // Enable verbose logging
    acceptAiProviders: true,      // Accept AI witness verification
    useAppClip: true,             // Enable iOS App Clip / Android Instant App
    useBrowserExtension: true,    // Enable browser extension flow
    canAutoSubmit: true,          // Auto-submit proofs when generated
    preferredLocale: 'en-US',     // Set preferred language
    metadata: {                   // Custom metadata for verification client
      theme: 'dark',
      verify_another_way_link: 'https://example.com/alt-verify'
    }
  }
);
```

--------------------------------

### triggerReclaimFlow and startSession

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Triggers the appropriate verification flow based on the user's device and environment, and then listens for the verification results.

```APIDOC
## triggerReclaimFlow and startSession

### Description
Automatically triggers the appropriate verification flow based on the user's device and environment. On desktop with the browser extension installed, it uses the extension; otherwise, it shows a QR code modal. On mobile, it redirects to iOS App Clip or Android Instant App. `startSession` is used to listen for the verification results.

### Method
*   `proofRequest.setModalOptions(options)`
*   `proofRequest.triggerReclaimFlow()`
*   `proofRequest.startSession(callback)`

### Parameters
#### `setModalOptions` Parameters
*   **options** (object) - Optional modal settings for desktop QR flow:
    *   **title** (string) - The title of the modal.
    *   **description** (string) - The description text for the modal.
    *   **darkTheme** (boolean) - Whether to use a dark theme for the modal.
    *   **modalPopupTimer** (number) - Auto-close the modal after the specified number of minutes.
    *   **showExtensionInstallButton** (boolean) - Whether to show a button to install the browser extension.
    *   **extensionUrl** (string) - The URL to the browser extension installation page.
    *   **onClose** (function) - A callback function to execute when the modal is closed.

#### `startSession` Parameters
*   **callback** (object) - An object containing callback functions:
    *   **onSuccess** (function) - Called when verification is successful. Receives the proof object as an argument.
    *   **onError** (function) - Called when verification fails. Receives an error object with a `message` property.

### Request Example
```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Configure optional modal settings for desktop QR flow
proofRequest.setModalOptions({
  title: 'Verify Your Account',
  description: 'Scan with your mobile device or use browser extension',
  darkTheme: true,
  modalPopupTimer: 5,
  showExtensionInstallButton: true,
  extensionUrl: 'https://chrome.google.com/webstore/detail/reclaim',
  onClose: () => console.log('Modal closed')
});

// Trigger the verification flow
await proofRequest.triggerReclaimFlow();

// Listen for results
await proofRequest.startSession({
  onSuccess: (proof) => {
    console.log('Verification successful:', proof);
  },
  onError: (error) => {
    console.error('Verification failed:', error.message);
  }
});
```

### Response
*   **`triggerReclaimFlow`**: Returns a Promise that resolves when the flow is initiated.
*   **`startSession`**: Returns a Promise that resolves or rejects based on the verification outcome.
```

--------------------------------

### Complete React Integration for Reclaim Verification

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

A comprehensive React component demonstrating how to integrate Reclaim.js SDK for user verification. It covers initialization, setting context and modal options, triggering the verification flow, handling success and error callbacks, and verifying the received proof.

```javascript
import React, { useState, useEffect } from 'react';
import { ReclaimProofRequest, verifyProof } from '@reclaimprotocol/js-sdk';

function ReclaimVerification() {
  const [proofRequest, setProofRequest] = useState(null);
  const [proof, setProof] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function init() {
      try {
        const request = await ReclaimProofRequest.init(
          process.env.REACT_APP_RECLAIM_APP_ID,
          process.env.REACT_APP_RECLAIM_APP_SECRET,
          process.env.REACT_APP_RECLAIM_PROVIDER_ID,
          { log: true }
        );

        request.setContext('0x0', 'User verification');
        request.setModalOptions({
          title: 'Verify Your Identity',
          description: 'Scan the QR code or use browser extension',
          darkTheme: false
        });

        setProofRequest(request);
      } catch (err) {
        setError('Failed to initialize: ' + err.message);
      }
    }
    init();
  }, []);

  async function startVerification() {
    if (!proofRequest) return;

    setLoading(true);
    setError(null);

    try {
      await proofRequest.triggerReclaimFlow();

      await proofRequest.startSession({
        onSuccess: async (receivedProof) => {
          setLoading(false);

          if (Array.isArray(receivedProof) && receivedProof.length === 0) {
            console.log('Proof sent to callback URL');
            return;
          }

          const proofArray = Array.isArray(receivedProof)
            ? receivedProof
            : [receivedProof];

          // Verify the proof
          const isValid = await verifyProof(proofArray);
          if (isValid) {
            setProof(proofArray[0]);
          } else {
            setError('Proof verification failed');
          }
        },
        onError: (err) => {
          setLoading(false);
          setError(err.message);
        }
      });
    } catch (err) {
      setLoading(false);
      setError('Verification failed: ' + err.message);
    }
  }

  if (proof) {
    const context = JSON.parse(proof.claimData.context);
    return (
      <div>
        <h2>Verification Successful</h2>
        <p>Provider: {proof.claimData.provider}</p>
        <p>Timestamp: {new Date(proof.claimData.timestampS * 1000).toLocaleString()}</p>
        <pre>{JSON.stringify(context.extractedParameters, null, 2)}</pre>
      </div>
    );
  }

  return (
    <div>
      <h2>Reclaim Verification</h2>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button onClick={startVerification} disabled={loading || !proofRequest}>
        {loading ? 'Verifying...' : 'Start Verification'}
      </button>
    </div>
  );
}

export default ReclaimVerification;
```

--------------------------------

### toJsonString and fromJsonString

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Provides functionality to serialize a proof request object into a JSON string and deserialize a JSON string back into a proof request object, facilitating data transfer and storage.

```APIDOC
## toJsonString and fromJsonString

### Description
Serializes the current proof request object into a JSON string using `toJsonString`. This is useful for transferring the request configuration between client and server or for storing it. `fromJsonString` reconstructs a proof request object from a JSON string, allowing for the continuation of a verification flow.

### Method
`toJsonString(): string
`fromJsonString(jsonString: string): Promise<ReclaimProofRequest>
`

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **jsonString** (string) - Required (for `fromJsonString`) - The JSON string representing the proof request configuration.

### Request Example
```javascript
// Server-side: Create and export configuration
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);
proofRequest.setContext('0x123', 'verification');
proofRequest.setParams({ email: 'user@example.com' });
proofRequest.setRedirectUrl('https://app.com/success');

const configJson = proofRequest.toJsonString();
// Send configJson to frontend

// Client-side: Reconstruct from JSON
const reconstructed = await ReclaimProofRequest.fromJsonString(configJson);

// Use reconstructed instance
const requestUrl = await reconstructed.getRequestUrl();
await reconstructed.startSession({
  onSuccess: (proof) => console.log('Success:', proof),
  onError: (error) => console.error('Error:', error)
});
```

### Response
- **toJsonString()**: `string` - A JSON string representation of the proof request.
- **fromJsonString()**: `Promise<ReclaimProofRequest>` - A promise that resolves to a `ReclaimProofRequest` object.
```

--------------------------------

### getRequestUrl

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Generates and returns the request URL for proof verification. The URL format varies by device type.

```APIDOC
## getRequestUrl

### Description
Generates and returns the request URL for proof verification. The URL format varies by device type: App Clip URL for iOS, Instant App URL for Android, or standard web verification URL for desktop.

### Method
`proofRequest.getRequestUrl(options?)`

### Parameters
#### Query Parameters
*   **options** (object) - Optional parameters:
    *   **canUseDeferredDeepLinksFlow** (boolean) - Enables deferred deep links flow (Android only).

### Request Example
```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Get the verification URL
const requestUrl = await proofRequest.getRequestUrl();
console.log('Verification URL:', requestUrl);

// Display as QR code (using react-qr-code or similar)
// <QRCode value={requestUrl} />

// Get URL with deferred deep links enabled (Android only)
const urlWithDeepLinks = await proofRequest.getRequestUrl({
  canUseDeferredDeepLinksFlow: true
});
```

### Response
*   **requestUrl** (string) - The generated URL for proof verification.
```

--------------------------------

### Set Preferred Locale for Verification Client

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Set the preferred locale for the verification client to manage user language and formatting preferences. This follows Unicode Language Identifiers and defaults to the browser's locale or English ('en').

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID, {
  preferredLocale: 'en-US',
});
```

--------------------------------

### Import Device Detection Functions (TypeScript)

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/example/src/app/debug/README.md

This TypeScript code snippet demonstrates how to import essential device detection functions from the Reclaim SDK. These functions are used to identify device types and properties.

```typescript
import {
  getDeviceType,
  getMobileDeviceType,
  isMobileDevice,
  isDesktopDevice
} from '@reclaimprotocol/js-sdk'
```

--------------------------------

### Set Provider-Specific Parameters

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Defines parameters that are specific to the chosen verification provider. These parameters are passed to the provider to configure the exact verification requirements for the proof request. Existing parameters are merged with any new ones provided.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Set parameters for the provider
proofRequest.setParams({
  email: 'user@example.com',
  userName: 'johndoe',
  minFollowers: '1000',
  platform: 'twitter'
});

// Parameters are merged with existing ones
proofRequest.setParams({ additionalParam: 'value' });
```

--------------------------------

### Set Custom Cancel Callback URL in JavaScript

Source: https://github.com/reclaimprotocol/reclaim-js-sdk/blob/main/README.md

Establishes a custom callback URL to receive notifications for user- or provider-initiated cancellations or errors. Data is sent as an HTTP POST request with `Content-Type: application/json`. The session ID is included in the `X-Reclaim-Session-Id` header.

```javascript
reclaimProofRequest.setCancelCallbackUrl("https://example.com/error-callback");
```

--------------------------------

### Serialize and Deserialize Proof Requests

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Provides methods to convert a `ReclaimProofRequest` instance into a JSON string (`toJsonString`) for transfer or storage, and to reconstruct it from a JSON string (`fromJsonString`). This is useful for passing configurations between server and client or for persistence.

```javascript
// Server-side: Create and export configuration
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);
proofRequest.setContext('0x123', 'verification');
proofRequest.setParams({ email: 'user@example.com' });
proofRequest.setRedirectUrl('https://app.com/success');

const configJson = proofRequest.toJsonString();
// Send configJson to frontend

// Client-side: Reconstruct from JSON
const reconstructed = await ReclaimProofRequest.fromJsonString(configJson);

// Use reconstructed instance
const requestUrl = await reconstructed.getRequestUrl();
await reconstructed.startSession({
  onSuccess: (proof) => console.log('Success:', proof),
  onError: (error) => console.error('Error:', error)
});
```

--------------------------------

### setParams

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Sets provider-specific parameters that are passed to the verification provider to configure the requirements for the proof.

```APIDOC
## setParams

### Description
Sets provider-specific parameters for the proof request. These parameters are crucial for configuring the verification requirements and are passed directly to the chosen provider. Existing parameters are merged with new ones.

### Method
`setParams(params: object)
`

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **params** (object) - Required - An object containing key-value pairs of provider-specific parameters.

### Request Example
```javascript
// Set parameters for the provider
proofRequest.setParams({
  email: 'user@example.com',
  userName: 'johndoe',
  minFollowers: '1000',
  platform: 'twitter'
});

// Parameters are merged with existing ones
proofRequest.setParams({ additionalParam: 'value' });
```

### Response
This method configures the provider parameters and does not return a value directly.
```

--------------------------------

### setContext and setJsonContext

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Allows setting additional context data associated with a claim. This context is included in the proof and can be used for verification purposes.

```APIDOC
## setContext and setJsonContext

### Description
Sets additional context data to be stored with the claim. This context is included in the generated proof and can be utilized during the verification process. `setContext` is for simple string pairs, while `setJsonContext` allows for structured JSON data.

### Method
`setContext(key: string, value: string)
`setJsonContext(context: object)
`

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **key** (string) - Required (for `setContext`) - The key for the context data.
- **value** (string) - Required (for `setContext`) - The value for the context data.
- **context** (object) - Required (for `setJsonContext`) - A JSON object containing the context data.

### Request Example
```javascript
// Set context with address and message
proofRequest.setContext(
  '0x742d35Cc6634C0532925a3b844Bc9e7595f',
  'Premium membership verification for user account'
);

// Alternative: Set custom JSON context
proofRequest.setJsonContext({
  userId: 'user_12345',
  purpose: 'identity_verification',
  tier: 'premium',
  timestamp: Date.now()
});

// Note: setContext and setJsonContext overwrite each other. The last one called will be used.
```

### Response
These methods configure the context for the proof request and do not return a value directly.
```

--------------------------------

### Verify Reclaim Proofs (JavaScript)

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Validates one or more Reclaim proofs by checking their signatures against the attestor network. It supports verifying single or multiple proofs and can optionally enable AI witness support for enhanced verification.

```javascript
import { verifyProof } from '@reclaimprotocol/js-sdk';

// Verify a single proof
const proof = await getProofFromSession();
const isValid = await verifyProof(proof);
console.log('Proof valid:', isValid);

// Verify multiple proofs
const proofs = [proof1, proof2, proof3];
const allValid = await verifyProof(proofs);
console.log('All proofs valid:', allValid);

// Verify with AI witness support
const isValidWithAI = await verifyProof(proof, true);

// Backend verification example
app.post('/verify', async (req, res) => {
  const { proof } = req.body;
  const verified = await verifyProof(proof);
  if (verified) {
    // Extract claim data
    const context = JSON.parse(proof.claimData.context);
    const extractedParams = context.extractedParameters;
    res.json({ success: true, data: extractedParams });
  } else {
    res.status(400).json({ success: false, error: 'Invalid proof' });
  }
});
```

--------------------------------

### Generate Reclaim Request URL

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Generates and returns the request URL for proof verification. The URL format varies by device type: App Clip URL for iOS, Instant App URL for Android, or standard web verification URL for desktop. Deferred deep links can be enabled for Android.

```javascript
const proofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);

// Get the verification URL
const requestUrl = await proofRequest.getRequestUrl();
console.log('Verification URL:', requestUrl);

// Display as QR code (using react-qr-code or similar)
// <QRCode value={requestUrl} />

// Get URL with deferred deep links enabled (Android only)
const urlWithDeepLinks = await proofRequest.getRequestUrl({
  canUseDeferredDeepLinksFlow: true
});
```

--------------------------------

### Transform Proof for On-Chain Verification (JavaScript)

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Converts a Reclaim proof into a format compatible with on-chain smart contract verification. It extracts essential claim information and signed claim data required for blockchain-based validation.

```javascript
import { transformForOnchain } from '@reclaimprotocol/js-sdk';

const proof = await getProofFromVerification();

// Transform for blockchain verification
const { claimInfo, signedClaim } = transformForOnchain(proof);

// claimInfo contains: { context, parameters, provider }
console.log('Claim Info:', claimInfo);

// signedClaim contains: { claim: { epoch, identifier, owner, timestampS }, signatures }
console.log('Signed Claim:', signedClaim);

// Use with smart contract
// await reclaimContract.verifyProof(claimInfo, signedClaim);
```

--------------------------------

### Detect Device Type and Platform with Reclaim.js SDK

Source: https://context7.com/reclaimprotocol/reclaim-js-sdk/llms.txt

Helper functions to detect if the user is on a mobile or desktop device, and if mobile, whether it's Android or iOS. These functions are useful for custom flow handling. It also includes a function to clear the device detection cache.

```javascript
import {
  getDeviceType,
  getMobileDeviceType,
  isMobileDevice,
  isDesktopDevice,
  clearDeviceCache
} from '@reclaimprotocol/js-sdk';

// Get device type: 'desktop' or 'mobile'
const deviceType = getDeviceType();
console.log('Device type:', deviceType);

// Get mobile platform: 'android' or 'ios' (call only when device is mobile)
if (isMobileDevice()) {
  const mobileType = getMobileDeviceType();
  console.log('Mobile platform:', mobileType);
}

// Convenience checks
if (isDesktopDevice()) {
  console.log('Running on desktop');
}

if (isMobileDevice()) {
  console.log('Running on mobile');
}

// Clear cached detection (useful for testing)
clearDeviceCache();
```