Basic Usage of the Reclaim Protocol JavaScript SDK

Welcome to the basic usage guide for the Reclaim Protocol JavaScript SDK. This guide will walk you through the fundamental steps to integrate Reclaim's proof verification system into your application.

Prerequisites

Before you begin, ensure you have:

Installed the SDK (see Installation Guide)
Your Application ID, Secret, and Provider ID from the Reclaim Developer Portal (opens in a new tab)

⚠️

Keep your Application Secret secure and never expose it in client-side code.

Step-by-Step Guide

1. Import the SDK

First, import the necessary components from the SDK:

import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk'

2. Initialize the SDK

Set up your credentials and initialize the SDK:

const APP_ID = 'YOUR_APPLICATION_ID'
const APP_SECRET = 'YOUR_APPLICATION_SECRET'
const PROVIDER_ID = 'YOUR_PROVIDER_ID'
 
const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID)

Replace 'YOUR_APPLICATION_ID', 'YOUR_APPLICATION_SECRET', and 'YOUR_PROVIDER_ID' with your actual credentials.

3. Generate a Request URL

Create a URL that users can visit to initiate the proof request:

const requestUrl = await reclaimProofRequest.getRequestUrl()
console.log('Request URL:', requestUrl)

In a real application, you would typically redirect the user to this URL or display it as a QR code.

4. Get the Status URL

Obtain a URL to check the status of the proof request:

const statusUrl = reclaimProofRequest.getStatusUrl()
console.log('Status URL:', statusUrl)

5. Start a Session

Begin listening for proofs:

await reclaimProofRequest.startSession({
  onSuccessCallback: (proofs) => {
    console.log('Verification success', proofs)
  },
  onFailureCallback: (error) => {
    console.error('Verification failed', error)
  }
})

⚠️

Ensure you handle both success and failure cases in your callbacks.

Complete Basic Example

Here's a full example putting all the steps together:

import { ReclaimProofRequest } from '@reclaimprotocol/js-sdk'
 
async function main() {
  const APP_ID = 'YOUR_APPLICATION_ID'
  const APP_SECRET = 'YOUR_APPLICATION_SECRET'
  const PROVIDER_ID = 'YOUR_PROVIDER_ID'
 
  const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID)
 
  const requestUrl = await reclaimProofRequest.getRequestUrl()
  console.log('Request URL:', requestUrl)
 
  const statusUrl = reclaimProofRequest.getStatusUrl()
  console.log('Status URL:', statusUrl)
 
  await reclaimProofRequest.startSession({
    onSuccessCallback: (proofs) => {
      console.log('Verification success', proofs)
    },
    onFailureCallback: (error) => {
      console.error('Verification failed', error)
    }
  })
}
 
main().catch(console.error)

This example is for demonstration purposes. In a real application, you'd need to handle errors more robustly and integrate this flow into your application logic.

Frontend Integration

For frontend applications, you might use the SDK like this:

// In a React component
useEffect(() => {
  const initReclaim = async () => {
    const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID)
    const requestUrl = await reclaimProofRequest.getRequestUrl()
    setReclaimUrl(requestUrl) // Set the URL in your component state
  }
  initReclaim()
}, [])

In a frontend application, consider using environment variables to store your credentials securely.

Backend Integration

For backend applications, you might use the SDK like this:

// In an Express.js route handler
app.get('/initiate-proof', async (req, res) => {
  const reclaimProofRequest = await ReclaimProofRequest.init(APP_ID, APP_SECRET, PROVIDER_ID)
  const reclaimProofRequestConfig = reclaimProofRequest.toJsonString()
  res.json({ reclaimProofRequestConfig })
})

Then use the reclaimProofRequestConfig to initialize the SDK on the frontend.

// In a React component
const response = await fetch(`${BACKEND_URL}/initiate-proof`)
const reclaimProofRequestConfig = await response.json()
const reclaimProofRequest = await ReclaimProofRequest.fromJsonString(reclaimProofRequestConfig)
const requestUrl = await reclaimProofRequest.getRequestUrl()
console.log('Request URL:', requestUrl)

Backend integration is generally more secure as it keeps your APP_SECRET hidden from clients.

Next Steps

Now that you've learned the basics, you can:

Check out complete Frontend Example (React) and Backend Example (Node.js).
Learn about Advanced Configuration options to customize the SDK for your specific needs.

If you have any questions, don't hesitate to join our Telegram community (opens in a new tab) for support.

Happy coding with Reclaim Protocol!

Installation Frontend Example (React)