Fullstack Example: Integrating Reclaim SDK in a React Native Application

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 Implementation

For a detailed backend implementation using Node.js and Express, please 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)

Here's a basic implementation of how to use the SDK configuration from the backend to initialize the Reclaim SDK in a React Native application:

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, refer to the Advance Configuration section.

This React Native implementation provides a simple UI with a button to start the Reclaim process and a text area to display the current status.

Usage

Set up your backend as described in the Backend Example.
Implement the ReclaimComponent in your React Native application.
Include the ReclaimComponent in your app's navigation or main screen.

Remember to replace 'https://your-backend.com/reclaim/generate-config (opens in a new tab)' with the actual URL of your backend endpoint.

Next Steps

Enhance the UI to provide a more guided experience for users during the Reclaim process.
Implement more detailed error handling and loading states for better user experience.
Consider adding additional security measures, such as user authentication.
Test thoroughly on both Android and iOS devices, and handle any platform-specific issues.

By following this example, you'll have a basic fullstack implementation of the Reclaim Protocol in your React Native application. Happy coding!

Basic Example Best Practices