Basic Example

This guide will walk you through the fundamental steps to integrate Reclaim's proof verification system into your React Native application.

Prerequisites

Before implementing the Reclaim Protocol SDK in your React Native 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 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 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
                console.log('Proof received:', 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>
  );
}

[Rest of the documentation remains unchanged as it contains important code examples and callouts]

Implementation Notes

The component uses React's useState and useEffect hooks for state management and lifecycle handling
Error handling is implemented at multiple levels to ensure robust operation
The verification flow is asynchronous and event-driven
Status updates keep users informed of the verification progress

Next Steps

After implementing the basic integration:

Explore Advanced Configuration options for customization
Review and implement Best Practices
Test thoroughly with different scenarios and error conditions

Need help? Join our Telegram community for support and discussions.

Basic Example

On this page