✨Works out of the box guarantee. If you face any issue at all, hit us up on Telegram and we will write the integration for you.
logoReclaim Protocol Docs
Expo SDK

Usage

Learn how to integrate and use Reclaim Protocol's InApp SDK in your React Native Expo app, from initialization to handling verification requests and responses.

Prerequisites

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

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 InApp SDK components:

import React, { useState } from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { ReclaimVerification } from '@reclaimprotocol/inapp-rn-sdk';

2. SDK Initialization

Initialize the ReclaimVerification class to create an instance:

const APP_ID = 'YOUR_APPLICATION_ID';
const APP_SECRET = 'YOUR_APPLICATION_SECRET';
const PROVIDER_ID = 'YOUR_PROVIDER_ID';
 
const reclaimVerification = new ReclaimVerification();

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

3. Start Verification Flow

Start the verification flow by providing the app id, secret and provider id:

async function startVerification() {
  try {
    const verificationResult = await reclaimVerification.startVerification({
      appId: APP_ID,
      secret: APP_SECRET,
      providerId: PROVIDER_ID,
    });
    
    // Handle successful verification
    if (verificationResult.proofs) {
      console.log('Verification successful:', verificationResult.proofs);
      return verificationResult;
    }
  } catch (error) {
    // Handle verification errors
    handleVerificationError(error);
  }
}

4. Exception Handling

Handle verification exceptions using the ReclaimVerificationException:

function handleVerificationError(error) {
  if (error instanceof ReclaimVerification.ReclaimVerificationException) {
    switch (error.type) {
      case ReclaimVerification.ExceptionType.Cancelled:
        Alert.alert('Verification Cancelled', 'The verification process was cancelled by the user.');
        break;
      case ReclaimVerification.ExceptionType.Dismissed:
        Alert.alert('Verification Dismissed', 'The verification process was dismissed.');
        break;
      case ReclaimVerification.ExceptionType.SessionExpired:
        Alert.alert('Session Expired', 'The verification session has expired. Please try again.');
        break;
      case ReclaimVerification.ExceptionType.Failed:
      default:
        Alert.alert('Verification Failed', 'The verification process failed. Please try again.');
    }
    
    // Access additional error details
    console.log('Session ID:', error.sessionId);
    console.log('Reason:', error.reason);
    console.log('Inner Error:', error.innerError);
  } else {
    Alert.alert('Error', error instanceof Error ? error.message : 'An unknown verification error occurred');
  }
}

5. React Native Expo Component Implementation

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

function ReclaimDemo() {
  const [status, setStatus] = useState('Ready to start verification');
  const [isVerifying, setIsVerifying] = useState(false);
 
  const handleStartVerification = async () => {
    setIsVerifying(true);
    setStatus('Starting verification...');
    
    try {
      const result = await startVerification();
      if (result && result.proofs) {
        setStatus('Verification successful!');
        console.log('Proofs received:', result.proofs);
      }
    } catch (error) {
      setStatus('Verification failed');
      handleVerificationError(error);
    } finally {
      setIsVerifying(false);
    }
  };
 
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Reclaim InApp Demo</Text>
      <Text style={{ marginVertical: 10 }}>Status: {status}</Text>
      <Button 
        title={isVerifying ? "Verifying..." : "Start Verification"} 
        onPress={handleStartVerification}
        disabled={isVerifying}
      />
    </View>
  );
}

Advanced Usage

Overriding SDK Config

You can customize the SDK behavior by overriding default configurations:

// Override SDK configuration
reclaimVerification.setOverrides({
  appInfo: {
    appName: "Your Custom App Name",
    appImageUrl: "https://your-domain.com/app-icon.png"
  }
  // Add other overrides as needed
});

Available Functions

You can check out available functions and advanced options in the Advance Options guide.

On this page