Quickstart

Install the SDK

npm i @reclaimprotocol/reclaim-client-sdk

Import the SDK

app.tsx

import ReclaimSDK from '@reclaimprotocol/reclaim-client-sdk'

Initialize the SDK with your Reclaim application ID:

Create a new Reclaim application on the Reclaim developer portal (opens in a new tab).
Copy the Reclaim application ID from the dashboard.
Initialize the SDK with the Reclaim application ID.

app.tsx

const App = () => {
    const reclaimSDK = new ReclaimSDK('<<YOUR-RECLAIM-APP-ID>>')
}

Generate session for your user

Use reclaimSDK.generateSession() to generate a session for your user.
Pass in your user's unique identifier as userId in the generateSession() method.
Pass in a callback function onProofSubmissionSuccess to be called when the user submits a proof. It accepts generated proofs and session id in param.
Pass in a callback function onError to be called when there is an error in submitting the proof.

It returns a session object with the following properties:

sessionId: The session ID of the session generated for the user.
link: The link to the session that you can redirect your user to.

💡

Display this session link as QR code or as a link in your application. When the user clicks on the link or scans the QR code, they will be redirected to the Reclaim app to submit their proof.

app.tsx

import ReclaimSDK from '@reclaimprotocol/reclaim-client-sdk'
 
const App = () => {
    
    const [sessionId, setSessionId] = useState('')
	const [sessionLink, setSessionLink] = useState('')
    const [isProofSubmitted, setIsProofSubmitted] = useState(false)
 
    const reclaimSDK = new ReclaimSDK('<RECLAIM-APP-ID>')
 
    const generateSession = async() => {
		const userId = '<USER_ID>' // Replace with your user's unique identifier
		const session = await reclaimSDK.generateSession({
			userId,
			onProofSubmissionSuccess: (proofs, sessionId) => {
                setIsProofSubmitted(true)
				// ... your business logic for successful proof submission goes here
			},
			onError: (error) => {
				// ... Error handling logic for proof submission goes here
			}
		})
 
        if(session) {
            setSessionId(session.sessionId)
			setSessionLink(session.link)
        }
	}
}

Retrieve proofs submitted

Use reclaimSDK.getProofs() to retrieve proofs submitted by your user.
Pass in the sessionId of the session for which you want to retrieve proofs.

It returns an array of proof objects

app.tsx

const App = () => {
    
    const [sessionId, setSessionId] = useState('')
	const [sessionLink, setSessionLink] = useState('')
    const [isProofSubmitted, setIsProofSubmitted] = useState(false)
 
    const reclaimSDK = new ReclaimSDK('<RECLAIM-APP-ID>')
 
    const generateSession = async() => {
		const userId = '<USER_ID>' // Replace with your user's unique identifier
		const session = await reclaimSDK.generateSession({
			userId,
			onProofSubmissionSuccess: (proofs, sessionId) => {
                setIsProofSubmitted(true)
				// ... your business logic for successful proof submission goes here
			},
			onError: (error) => {
				// ... Error handling logic for proof submission goes here
			}
		})
 
		setSessionLink(session?.link)
 
        if(session) {
            setSessionId(session.sessionId)
        }
	}
 
    const getSubmittedProofs = async(sessionId: string) => {
		const proofs = await reclaimSDK.getProofs(sessionId)
	}
 
    useEffect(() => {
        if(isProofSubmitted) {
            getSubmittedProofs(sessionId)
        }
	}, [isProofSubmitted])
}

React Component Alternative (Beta)

We also ship a powerful alternative to the previous 5-step implementation. It simplifies the process by offering a prebuilt component that abstracts out the implementation, making the usage hassle-free. Find below the overview its features, and how to use guide.

Install

	npm i @reclaimprotocol/reclaim-connect-react

Import

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

Render

<GenerateProof
	appID='6d6c04eb-237b-4599-8797-94d48b0ac612' //  Dummy APP ID is provided
	userID='dasq2easdase-asdq2e3' //  Dummy User ID is provided
	onProofSubmission={() => {}} // Callback function, on successful proof submission
	onProofSubmissionFailed={() => {}} // Callback function, on proof submission fail
/>

Architecture Get Reclaim Application ID