This README provides a step-by-step guide on integrating the Reclaim Protocol React native SDK into application
- An application ID from Reclaim Protocol. You can get one from the Reclaim Developer Protocol
npx react-native init ReclaimApp
cd ReclaimApp
npm install @reclaimprotocol/reactnative-sdk
In your src/App.js
file, import the Reclaim SDK and the QR code generator
import { useState, useEffect } from 'react'
import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
Declare your application ID
and initialize the Reclaim Protocol client. Replace YOUR_APPLICATION_ID_HERE
with the actual application ID provided by Reclaim Protocol.
File: src/App.js
import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View } from 'react-native'
function App() {
const APP_ID = 'YOUR_APPLICATION_ID_HERE'
const reclaimProofRequest = new Reclaim.ProofRequest(APP_ID)
return (
<SafeAreaView>
<View>
<Text>App</Text>
</View>
</SafeAreaView>
)
}
export default App
You'll need to add a deep link to your app. This will be used to redirect the user back to your app after they have completed the verification process.
- Guide to setup deep link on react-native can be found here.
import { SafeAreaView, Text, View } from 'react-native'
import { ReclaimClient } from '@reclaimprotocol/reactnative-sdk'
function App() {
const APP_ID = 'YOUR_APPLICATION_ID_HERE'
const reclaimProofRequest = new Reclaim.ProofRequest(APP_ID)
async function startVerificationFlow() {
// id of the provider you want to generate the proof for
await reclaimProofRequest.buildProofRequest('PROVIDER_ID')
const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
reclaimProofRequest.setAppCallbackUrl(appDeepLink)
}
return (
<SafeAreaView>
<View>
<Text>App</Text>
</View>
</SafeAreaView>
)
}
export default App
Create functions to handle the verification request. You'll need separate functions for prototype and production modes due to the different handling of the application secret and signature.
For testing purposes, use the prototype mode. Note that in production, you should handle the application secret securely on your server.
File: src/App.js
import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
function App() {
const APP_ID = 'YOUR_APPLICATION_ID_HERE'
const reclaimProofRequest = new Reclaim.ProofRequest(APP_ID)
async function startVerificationFlow() {
// id of the provider you want to generate the proof for
await reclaimProofRequest.buildProofRequest('PROVIDER_ID')
const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
reclaimProofRequest.setAppCallbackUrl(appDeepLink)
reclaimProofRequest.setSignature(
await reclaimProofRequest.generateSignature(
'YOUR_APPLICATION_SECRET' // Handle securely for production
)
)
const { requestUrl, statusUrl } =
await reclaimProofRequest.createVerificationRequest()
await reclaimProofRequest.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 (
<SafeAreaView>
<View>
<Pressable onPress={startVerificationFlow}>
<Text>Start Verification Flow</Text>
</Pressable>
</View>
</SafeAreaView>
)
}
export default App
In production mode, securely fetch and set the signature from your backend instead of using the application secret directly in the client.
Similar to the prototype mode but ensure to fetch and set the signature securely
async function createVerificationRequestProductionMode() {
// id of the provider you want to generate the proof for
await reclaimProofRequest.buildProofRequest('PROVIDER_ID')
const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
reclaimProofRequest.setAppCallbackUrl(appDeepLink)
reclaim
.setSignature
// TODO: fetch signature from your backend
// On the backend, generate signature using:
// await Reclaim.getSignature(requestedProofs, APP_SECRET)
()
const { requestUrl, statusUrl } =
await reclaimProofRequest.createVerificationRequest()
await reclaimProofRequest.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
},
})
}