What is initiating a proof request?

In the previous section, you just built the request containing the information on what proof you want the user to generate. Now it is turn to actually ask the user to generate the proof. Depending on the user's device, browser and operating system, the SDK will pick the most seamless verification mechanism available for that user.

Available options :

Quickstart

Get the `proofRequestObject` from the backend

Call the endpoint that you created in the preparing request step.

      const response = await fetch('/api/reclaimprotocol-buildproofrequest');
      const { proofRequest } = await response.json();

Construct the `ReclaimProofRequest`

You need to convert this Json into type ReclaimProofRequest

const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(proofRequest);

Trigger the proof generation flow with the user

await reclaimProofRequest.triggerReclaimFlow();

This step will take care of all the conditions for you - and use the most seamless available experience for the user based on the available options as of today, browser, OS and device.

Listen for the proof generation process

You can receive callbacks when the proof generation process completes or fails so that you can update your UI accordingly for the user's next steps.

onSuccess is called after the user has generated the proof, but you must verify the proofs on the backend to be sure that the user wasn't being malicious.

    await reclaimProofRequest.startSession({
    onSuccess: (proofs) => {
        // upload proofs to your backend and verify
        // ... continue business logic
    },
    onError: (err) => {
        // ... show error message
    }
    });

Example using `React`

// hooks/useReclaim.js
import { useState, useCallback } from 'react';
import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk';
 
export function useReclaim() {
  const [proofs, setProofs] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
 
  const startVerification = useCallback(async () => {
    try {
      setIsLoading(true);
      setError(null);
 
      // Fetch config from backend
      const response = await fetch('/api/reclaim/config');
      const { reclaimProofRequestConfig } = await response.json();
 
      const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(
        reclaimProofRequestConfig
      );
 
      await reclaimProofRequest.triggerReclaimFlow();
 
      await reclaimProofRequest.startSession({
        onSuccess: async (proofs) => {
          setProofs(proofs);
          await uploadProofs(proofs);
          setIsLoading(false);
        },
        onError: (err) => {
          setError(err.message);
          setIsLoading(false);
        }
      });
    } catch (err) {
      setError(err.message);
      setIsLoading(false);
    }
  }, []);
 
  return { proofs, isLoading, error, startVerification };
}

Advance options

Implement your own UI

If you don't want the SDK to take care of the navigations or you want to implement your own UI, you can do so.

You can get the verification url that needs to be opened on the user's mobile device.

const requestUrl = await reclaimProofRequest.getRequestUrl();

the triggerReclaimFlow() uses this function internally and displays a QR code if it is on a browser and opens this link on a new window in a mobile browser. You can mimic the same functionality using your own UI or customize the experience as per your application.

Is Browser Extension available?

You can detect if the user has installed any browser extension that allows a Reclaim Protocol flow to be triggered on device without needing a QR scan or App change. If Reclaim Protocol Browser Extension or any Partner Browser Extension is available, you should ideally just use that extension to respect the user's choice. The triggerReclaimFlow() will handle this case automatically, but you can write your custom logic. You can detect extensions using :

const hasExtension = await reclaimProofRequest.isBrowserExtensionAvailable();
if(hasExtension){
    reclaimProofRequest.triggerReclaimFlow();
}
else {
    //... your custom logic
}

Redirect after proof generation

If you want to redirect the user after generating the proof to a specific webpage or app, you can do so using setRedirectUrl.

When you should use this :

User is on a desktop, scans QR code to generate the proof. After the proof generation is complete you want to show a custom success message on their mobile device instead of the Reclaim Protocol's default success message. You can redirect them to a webpage.
User is on a mobile, taps a button to generate the proof. After the proof generation is complete, you typically want to redirect the user to the page that must be shown after the proof generation is complete. If you are using onSuccess, the user will have to close the proof generation success banner and go back to the browser to continue. We recommend using a redirect url to take the user to the next step in the business logic. On this step, render a page depending on whether the proof was correctly verified.

// Redirect to success page after verification
reclaimProofRequest.setRedirectUrl("https://yourapp.com/verification/success");
 
// Or deep link back to a mobile app
reclaimProofRequest.setRedirectUrl("yourapp://verification-complete");

Showing Progress

You can poll the progress of the proof generation process and update the UI accordingly, especially if you are not using the startSession method.

const statusUrl = reclaimProofRequest.getStatusUrl();

Customize UI

Automatically trigger the optimal verification flow based on user's platform. Shows QR code modal on desktop, redirects to App Clip/Instant App on mobile, or uses browser extension if available. The default UI can be customized :

Options Object:

theme (string): 'light' or 'dark' - Modal theme (default: 'light')
modalTitle (string): Custom title for the QR modal
modalSubtitle (string): Custom subtitle for the QR modal
autoCloseModal (boolean): Auto-close modal after successful verification (default: false)
autoCloseDelay (number): Delay in ms before auto-closing (default: 3000)
showExtensionPrompt (boolean): Show browser extension install prompt if not installed (default: true)
onModalOpen (function): Callback when modal opens
onModalClose (function): Callback when modal closes

reclaimProofRequest.triggerReclaimFlow(options)

Asking the user to generate the proof