Fullstack Example: Integrating Reclaim SDK in a JavaScript Application

This guide demonstrates how to integrate the Reclaim Protocol JavaScript 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

Here's a basic implementation of how to use the SDK configuration from the backend to initialize the Reclaim SDK on the frontend:

import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk';
 
async function initializeReclaim() {
  try {
    // 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);
          }
        }
        // Handle successful verification (e.g., update UI, send to backend)
      },
      onError: (error) => {
        console.error('Verification failed', error);
        // Handle verification failure (e.g., show error message)
      },
    });
 
    console.log('Request URL:', requestUrl);
  } catch (error) {
    console.error('Error initializing Reclaim:', error);
    // Handle initialization error (e.g., show error message)
  }
}
 
// Call this function when you want to start the Reclaim process
initializeReclaim();

For detailed information about the proof object, refer to the Advance Configuration section.

This frontend implementation keeps things simple and user-friendly. It fetches the configuration from your backend, initializes the SDK, and provides basic success and failure handling.

Usage

Set up your backend as described in the Backend Example.
Implement the frontend code in your JavaScript application.
Call the initializeReclaim() function when you want to start the Reclaim process (e.g., when a user clicks a button).

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

Customize the UI to guide users through the Reclaim process.
Implement error handling and loading states for a better user experience.
Consider adding additional security measures, such as user authentication.
Test thoroughly in different environments and edge cases.

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

Frontend Example (React)Best Practices