Fullstack Usage

This guide demonstrates how to integrate the Reclaim Protocol JavaScript SDK into a fullstack application securely. We'll cover both the backend and frontend implementations.

Video Walkthrough

Prerequisites

Install the React libraries using the Installation guide
Get the APPLICATION_ID, APPLICATION_SECRET and PROVIDER_ID using the API Key guide

1. Backend Implementation

For a detailed backend implementation using Node.js/Python , please refer to the Backend guide.

If you are deploying on localhost, be sure to use ngrok to make it visible on a public url.

This guide will assume the backend has been deployed.

2. Frontend Implementation

There are two ways to implement the Reclaim Protocol on your frontend.

Using the triggerReclaimFlow() method (Recommended)
Using the getRequestUrl() method

Using the `triggerReclaimFlow()` method (Recommended)

This method automatically detects the user's environment and chooses the best verification method for the user.

Browser extension for desktop users (if installed)
QR code popup for desktop users (if extension is not installed)
AppClip/InstantApp redirection for mobile users

import { useState } from 'react';
import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk';
 
const BASE_URL = "https://your-domain.com"; // if using ngrok, use the ngrok base url here
 
function StartReclaimVerification() {
  const [proofs, setProofs] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
 
  const handleVerification = async () => {
    try {
      setIsLoading(true);
 
      // Step 1: Fetch the configuration from your backend
      const response = await fetch(BASE_URL + '/generate-config');
      const { reclaimProofRequestConfig } = await response.json();
 
      // Step 2: Initialize the ReclaimProofRequest with the received configuration
      const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig);
 
      // Step 3: Trigger the verification flow automatically
      // This method detects the user's platform and provides the optimal experience:
      // - Browser extension for desktop users (if installed)
      // - QR code modal for desktop users (fallback)
      // - Native app clips for mobile users
      await reclaimProofRequest.triggerReclaimFlow();
 
      // Step 4: Start listening for proof submissions
      await reclaimProofRequest.startSession({
        onSuccess: (proofs) => {
          console.log('Successfully created proof', proofs);
          setProofs(proofs);
          setIsLoading(false);
          // Handle successful verification - proofs are also sent to your backend callback
        },
        onError: (error) => {
          console.error('Verification failed', error);
          setIsLoading(false);
          // Handle verification failure
        },
      });
 
    } catch (error) {
      console.error('Error initializing Reclaim:', error);
      setIsLoading(false);
      // Handle initialization error (e.g., show error message)
    }
  };
 
  return (
    <>
      <button onClick={handleVerification} disabled={isLoading}>
        {isLoading ? 'Verifying...' : 'Start Verification'}
      </button>
      
      {proofs && (
        <div>
          <h2>Verification Successful!</h2>
          <pre>{JSON.stringify(proofs, null, 2)}</pre>
        </div>
      )}
    </>
  );
}
 
export default StartReclaimVerification;

Using the `getRequestUrl()` method

This method generates a verification request URL that user needs to visit to start the session.

const getVerificationReq = async () => {
 
  try {
    // Step 1: Fetch the configuration from your backend
    const response = await fetch(BASE_URL+'/generate-config');
    const { reclaimProofRequestConfig } = await response.json();
 
    // Step 2: Initialize the ReclaimProofRequest with the received configuration
    const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig);
 
    // Step 3: Generate the request URL for the verification process
    const requestUrl = await reclaimProofRequest.getRequestUrl();
 
    // Step 4: Start the verification session
    await reclaimProofRequest.startSession({
      onSuccess: (proofs) => {
        console.log("successfully created proof", proofs);
        // Handle successful verification
      },
      onError: (error) => {
        console.error('Verification failed', error);
        // Handle verification failure
      },
    });
 
    console.log('Request URL:', requestUrl);
  } catch (error) {
    console.error('Error initializing Reclaim:', error);
    // Handle initialization error (e.g., show error message)
  }
  return requestUrl;
}

Initialize the request when appropriate, e.g. on page loads

  useEffect(() => {
    initializeReclaim().then(requestUrl => {
      setRequestUrl(requestUrl);
    })
  }, [])

Once requestUrl is set, display the QR or button for user to initiate verification.

    <>
      <button onClick={getVerificationReq}>Get Verification Request</button>
      {/* Display QR code when URL is available */}
      {requestUrl && (
        <div style={{ margin: '20px 0' }}>
          <QRCode value={requestUrl} />
          <br />
          <a href={requestUrl}>Open Link</a>
        </div>
      )}
      {proofs && (
        <div>
          <h2>Verification Successful!</h2>
          <pre>{JSON.stringify(proofs, null, 2)}</pre>
        </div>
      )}
    </>

To further customize the verification flow and UI, you can use the Web SDK advanced options