✨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.

ReactJs
Quickstart

Prerequisites

  • Node.js 18.0.0 or later

Quickstart

Create an application on Dev Tool

Head to https://dev.reclaimprotocol.org (opens in a new tab) and create a new application. You'll be prompted to provide the websites you want to import data from. Once you create the application, you'll be given an application ID and an application secret. Please take note of these. These will be used in the next steps.

Install Reclaim SDK

npm i @reclaimprotocol/js-sdk

Import Reclaim Client

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

Initialize Reclaim Client

Boiler plate stuff.

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
 
function App() {
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  return <div className='App'></div>
}
 
export default App

Add a function to request proofs

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
 
function App() {
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
  }
 
  return <div className='App'></div>
}
 
export default App

Add Context to the proof, optional but recommended

You can add context to your proof. There are two pieces of information that are part of context.

  1. Address - this can be an Ethereum/Solana/Cosmos address. This is typically set when the proof is to be used on a blockchain application. When using on blockchain applications, we recommend setting this context address and using this address in the business logic instead of signer of the transaction (e.g. msg.sender). If you don't set the context address and use transaction signer as the user's address, there is a front-running security threat.
  2. Message - this can be used to inform the user why this proof is being requested. If your application needs to be sure that the user generates a fresh cryptographic proof for your application, and not reuse an existing proof they created for some other application, you should set the context.message to something that is unique to your application. Upon receiving the proof from the user, ensure that the context.message is exactly what you had set it to earlier to avoid scammers from spoofing your users' proofs.
import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
 
function App() {
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
  }
 
  return <div className='App'></div>
}
 
export default App

Build the Proof Request object

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
 
function App() {
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
 
    await reclaimClient.buildProofRequest(providerId)
  }
 
  return <div className='App'></div>
}
 
export default App

Set Signature for request

You must set a signature on the request so that the users don't get tricked on phishing websites, and mistakenly upload all their data to a malicious website.

For a simple MVP, you can generate the signature on the frontend :

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
 
function App() {
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
 
    await reclaimClient.buildProofRequest(providerId)
 
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        APP_SECRET //TODO : replace with your APP_SECRET
      )
    )
  }
 
  return <div className='App'></div>
}
 
export default App

However, we recommend not generating the signature on the frontend because this leaks the APP_SECRET. You may expose a /sign endpoint that authenticates your user and returns a signature.

reclaimClient.setSignature() //TODO: signature response from your backend

Get the request URL

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
 
function App() {
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
 
    await reclaimClient.buildProofRequest(providerId)
 
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        APP_SECRET //TODO : replace with your APP_SECRET
      )
    )
 
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest()
 
    setUrl(requestUrl)
  }
 
  return <div className='App'></div>
}
 
export default App

Display the QR code

If the user opens your website on a mobile, show a button that has a link to requestUrl.

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
import { useState } from 'react'
import QRCode from "react-qr-code";
 
function App() {
  const [url, setUrl] = useState('')
 
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
 
    await reclaimClient.buildProofRequest(providerId)
 
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        APP_SECRET //TODO : replace with your APP_SECRET
      )
    )
 
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest()
 
    setUrl(requestUrl)
  }
 
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "50vh" }}>
      {!url && (
        <button onClick={generateVerificationRequest}>
          Create Claim QrCode
        </button>
      )}
      {url && (
        <QRCode value={url} />
      )}
    </div>
  )
}
 
export default App

Note that you can use any QR code library you want. Here in the sample we are using react-qr-code (opens in a new tab)

Start Session & Set callbacks

You get a callback when the user uploads the proof

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
import { useState } from 'react'
import QRCode from "react-qr-code";
 
function App() {
  const [url, setUrl] = useState('')
 
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
 
    await reclaimClient.buildProofRequest(providerId)
 
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        APP_SECRET //TODO : replace with your APP_SECRET
      )
    )
 
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest()
 
    setUrl(requestUrl)
 
    await reclaimClient.startSession({
      onSuccessCallback: proof => {
        console.log('Verification success', proof)
        // Your business logic here
      },
      onFailureCallback: error => {
        console.error('Verification failed', error)
        // Your business logic here to handle the error
      }
    })
    
  }
 
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "50vh" }}>
      {!url && (
        <button onClick={generateVerificationRequest}>
          Create Claim QrCode
        </button>
      )}
      {url && (
        <QRCode value={url} />
      )}
    </div>
  )
}
 
export default App

Summarizing

If you omit all the optional steps, you'd be left with the following codebase. Run your application and click the button to generate a verification request.

import './App.css'
import { Reclaim } from '@reclaimprotocol/js-sdk'
import { useState } from 'react'
import QRCode from "react-qr-code";
 
function App() {
  const [url, setUrl] = useState('')
 
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
 
    await reclaimClient.buildProofRequest(providerId)
 
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        APP_SECRET //TODO : replace with your APP_SECRET
      )
    )
 
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest()
 
    setUrl(requestUrl)
 
    await reclaimClient.startSession({
      onSuccessCallback: proofs => {
        console.log('Verification success', proofs)
        // Your business logic here
      },
      onFailureCallback: error => {
        console.error('Verification failed', error)
        // Your business logic here to handle the error
      }
    })
  }
 
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "50vh" }}>
      {!url && (
        <button onClick={generateVerificationRequest}>
          Create Claim QrCode
        </button>
      )}
      {url && (
        <QRCode value={url} />
      )}
    </div>
  )
}
 
export default App