Fullstack Example

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

Backend Integration

For detailed backend implementation using Node.js and Express, refer to the Backend Example.

The backend example provides a comprehensive guide on setting up a server that generates the SDK configuration and handles proof verification.

Frontend Implementation (React Native)

This section demonstrates how to integrate the Reclaim SDK into a React Native application using the configuration received from your backend server.

Core Implementation

Below is a complete implementation showing how to initialize and use the Reclaim SDK:

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { ReclaimProofRequest } from '@reclaimprotocol/react-native-sdk';
 
const ReclaimComponent = () => {
  const [status, setStatus] = useState('');
 
  const initializeReclaim = async () => {
    try {
      setStatus('Initializing...');
 
      // Fetch the configuration from your backend
      const response = await fetch('https://your-backend.com/reclaim/generate-config');
      const { reclaimProofRequestConfig } = await response.json();
 
      // Reconstruct the ReclaimProofRequest object
      const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig);
 
      // Generate request URL
      const requestUrl = await reclaimProofRequest.getRequestUrl();
 
      // Start the session for better UX
      await reclaimProofRequest.startSession({
        onSuccess: (proofs) => {
          if (proofs) {
            if (typeof proofs === 'string') {
              // When using a custom callback url, the proof is returned to the callback url and we get a message instead of a proof
              console.log('SDK Message:', proofs);
            } else if (typeof proofs !== 'string') {
              // When using the default callback url, we get a proof object in the response
              console.log('Proof received:', proofs?.claimData.context);
            }
            setStatus('Proof received!');
          }
          // Handle successful verification (e.g., update UI, send to backend)
        },
        onError: (error) => {
          console.error('Verification failed', error);
          setStatus('Verification failed. Please try again.');
          // Handle verification failure (e.g., show error message)
        },
      });
 
      console.log('Request URL:', requestUrl);
      setStatus('Reclaim process started. Please follow the instructions.');
    } catch (error) {
      console.error('Error initializing Reclaim:', error);
      setStatus('Error initializing Reclaim. Please try again.');
      // Handle initialization error (e.g., show error message)
    }
  };
 
  return (
    <View>
      <Button title="Start Reclaim Process" onPress={initializeReclaim} />
      <Text>{status}</Text>
    </View>
  );
};
 
export default ReclaimComponent;

For detailed information about the proof object structure, see the Advanced Configuration documentation.

The implementation above provides a basic user interface with a button to initiate the Reclaim process and status updates to keep users informed.

Implementation Guide

Backend Setup
- Configure your backend server following the Backend Example
- Ensure your endpoints are properly secured and tested
Frontend Integration
- Import and implement the ReclaimComponent in your React Native application
- Add the component to your application's navigation flow or main screen
- Replace the placeholder URL ('https://your-backend.com/reclaim/generate-config') with your actual backend endpoint

Ensure your backend endpoint URL is correctly configured in the production environment.

Enhancement Recommendations

User Experience Improvements
- Implement a more sophisticated UI with clear progress indicators
- Add informative loading states and error messages
- Include user guidance throughout the verification process
Technical Considerations
- Implement robust error handling mechanisms
- Add user authentication if required
- Ensure cross-platform compatibility (iOS and Android)
- Include proper logging and monitoring
Security Measures
- Implement proper data validation
- Add request rate limiting
- Include appropriate error handling for security-related issues

This implementation provides a foundation for integrating the Reclaim Protocol into your React Native application. Customize and enhance it based on your specific requirements and user needs.