Usage

Learn how to integrate and use Reclaim Protocol in your React Native Expo app, from initialization to handling proof requests and responses.

Prerequisites

Before implementing the Reclaim Protocol SDK in your React Native Expo application, ensure you have:

Installed the Reclaim Protocol SDK (detailed instructions in the Installation Guide)
Obtained your credentials from the Reclaim Developer Portal:
- Application ID
- Application Secret
- Provider ID

Security Notice: Never include your Application Secret in client-side code or version control systems.

Implementation Guide

1. Import Required Dependencies

Start by importing the necessary React Native, Expo, and Reclaim Protocol components:

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Linking } from 'react-native';
import { ReclaimProofRequest } from '@reclaimprotocol/reactnative-sdk';

2. SDK Initialization

Configure the SDK with your credentials:

const APP_ID = 'YOUR_APPLICATION_ID';
const APP_SECRET = 'YOUR_APPLICATION_SECRET';
const PROVIDER_ID = 'YOUR_PROVIDER_ID';
 
async function initializeReclaim() {
  const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID);
  return reclaimProofRequest;
}

Replace the placeholder credentials with your actual values from the Reclaim Developer Portal.

3. Request URL Generation

Create a verification request URL for users:

async function generateRequestUrl(reclaimProofRequest) {
  const requestUrl = await reclaimProofRequest.getRequestUrl();
  console.log('Request URL:', requestUrl);
  return requestUrl;
}

4. Verification Session Management

Set up the verification session listener:

async function startVerificationSession(reclaimProofRequest, onSuccess, onError) {
  await reclaimProofRequest.startSession({
    onSuccess: onSuccess,
    onError: onError,
  });
}

5. React Native Expo Component Implementation

The following component demonstrates a complete integration of the Reclaim Protocol:

function ReclaimDemo() {
  // State management for URL and verification status
  const [requestUrl, setRequestUrl] = useState('');
  const [status, setStatus] = useState('');
 
  useEffect(() => {
    async function setup() {
      try {
        // Initialize SDK and generate request URL
        const reclaimProofRequest = await initializeReclaim();
        const url = await generateRequestUrl(reclaimProofRequest);
        setRequestUrl(url);
        setStatus('Ready to start verification');
 
        // Start listening for verification results
        await startVerificationSession(
          reclaimProofRequest,
          (proofs) => {
            if (proofs) {
              if (typeof proofs === 'string') {
                // Handle custom callback URL response
                console.log('SDK Message:', proofs);
              } else if (typeof proofs !== 'string') {
                // Handle default callback URL response
                if (Array.isArray(proofs)) {
                  // when using provider with multiple proofs, we get an array of proofs
                  console.log('Proof received:', JSON.stringify(proofs.map(p => p.claimData.context)));
                } else {
                  // when using provider with a single proof, we get a single proof object
                  console.log('Proof received:', JSON.stringify(proofs.claimData.context));
                }
              }
              setStatus('Proof received!');
            }
          },
          (error) => {
            console.error('Verification failed', error);
            setStatus(`Error: ${error.message}`);
          }
        );
      } catch (error) {
        console.error('Setup failed', error);
        setStatus(`Setup failed: ${error.message}`);
      }
    }
 
    setup();
  }, []);
 
  const openRequestUrl = () => {
    if (requestUrl) {
      Linking.openURL(requestUrl);
    }
  };
 
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Reclaim Demo</Text>
      <Text>Status: {status}</Text>
      {requestUrl && <Button title="Start Verification" onPress={openRequestUrl} />}
    </View>
  );
}

Advance Usage

You can check out available functions in the SDK in the Advance Options guide

Usage

On this page