✨Works out of the box. If you face any issue at all, hit us up here and we will write the integration for you.

Reclaim Connect

Reclaim Connect

Reclaim Connect enables applications to request data from users without writing any complex code themselves.

Integrate Reclaim Connect in Your Front End

Reclaim Connect exposes a set of React components that can be integrated into your front end application. It is available as an NPM package. To install it, run the following command in your project directory:

npm install @reclaimprotocol/reclaim-connect-react

GenerateProof Component

The GenerateProof component enables you to request data from users. It renders a button that, when clicked, opens a modal with a QR code. Users can scan the QR code with the Reclaim mobile app to submit the requested data. The component also provides a callback function that you can use to execute logic when the proof is successfully submitted.

To use the GenerateProof component, follow these steps:


import { GenerateProof } from '@reclaimprotocol/reclaim-connect-react';


  1. Include the component in your application's JSX code, providing the necessary props.

  2. Get the applicationId from Reclaim Developer Portal (opens in a new tab).

import React, { type ReactNode } from 'react';
import { GenerateProof } from '@reclaimprotocol/reclaim-connect-react';
function App (): ReactNode {
  return (
      userID='dasq2easdase-asdq2e3' //optional
      onProofSubmission={(proofs, sessionId) => {}}
      onProofSubmissionFailed={() => {}}
export default App;



appID*stringThe unique application ID for creating a Reclaim session.
userIDstringThe unique user ID for the Reclaim session.
onSessionCreationfunctionA callback function to execute when the session is successfully created.
onProofSubmissionfunctionA callback function to execute when the proof is successfully submitted. It receives generated proofs and session id in parameter.
onProofSubmissionFailedfunctionA callback function to execute when proof submission fails.
customizeobjectAn object to customize the interface text and styles: Find a sample usage below:

customize = {{ 
triggerButton: {
text: 'Click here',
style: {
// CSS style (key value pair)
modalHeader: {
text: 'SCAN the QR to submit proof',
style: {
// CSS style (key value pair)
proofSubmissionDetails: {
successText: 'Success',
failureText: 'Failed',
style: {
// CSS style (key value pair)