Quickstart

Before you begin

All sdk's methods used in this tutorial are expalined in detail in Methods documentation.

Prerequisites

Node.js 18.0.0 or later
React Native
Deep Link Setup (opens in a new tab)

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/reactnative-sdk

Import Reclaim Client

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

Initialize Reclaim Client

Boilerplate stuff.

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  return (
    <SafeAreaView>
      <View>
        <Text>App</Text>
      </View>
    </SafeAreaView>
  )
}
 
export default App

Add a function to request proofs

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
  }
 
  return (
    <SafeAreaView>
      <View>
        <Text>App</Text>
      </View>
    </SafeAreaView>
  )
}
 
export default App

Add your app deep link

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 (opens in a new tab).

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
  }
 
  return (
    <SafeAreaView>
      <View>
        <Text>App</Text>
      </View>
    </SafeAreaView>
  )
}
 
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.

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.
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 { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
 
    await reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
  }
 
  return (
    <SafeAreaView>
      <View>
        <Text>App</Text>
      </View>
    </SafeAreaView>
  )
}
 
export default App

Build the Proof Request object

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
 
    await reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    )
 
    await reclaimClient.buildProofRequest(providerId)
  }
 
  return (
    <SafeAreaView>
      <View>
        <Text>App</Text>
      </View>
    </SafeAreaView>
  )
}
 
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 { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
 
    await 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 (
    <SafeAreaView>
      <View>
        <Text>App</Text>
      </View>
    </SafeAreaView>
  )
}
 
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
  ()

Create the Verification Request

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
 
    await 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(providerIds)
  }
 
  return (
    <SafeAreaView>
      <View>
        <Text>App</Text>
      </View>
    </SafeAreaView>
  )
}
 
export default App

Display a button

Show a button that fires the verification flow.

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
 
    await 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(providerIds)
  }
 
  return (
    <SafeAreaView>
      <View>
        <Pressable onPress={startVerificationFlow}>
          <Text>Start Verification Flow</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  )
}
 
export default App

Set callbacks & Start Session

You get a callback when the user uploads the proof

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
 
    await 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(providerIds)
 
    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 (
    <SafeAreaView>
      <View>
        <Pressable onPress={startVerificationFlow}>
          <Text>Start Verification Flow</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  )
}
 
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 start a verification request.

import { Reclaim } from '@reclaimprotocol/reactnative-sdk'
import { SafeAreaView, Text, View, Pressable } from 'react-native'
 
function App() {
  const APP_ID = 'YOUR_APPLICATION_ID_HERE'
  const reclaimClient = new Reclaim.ProofRequest(APP_ID)
 
  async function startVerificationFlow() {
    const providerId = 'provider_id' //TODO: replace with your provider id you had selected while creating the application
 
    const appDeepLink = 'YOUR_APP_DEEP_LINK_HERE' //TODO: replace with your app deep link
    reclaimClient.setAppCallbackUrl(appDeepLink)
 
    await 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(providerIds)
 
    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 (
    <SafeAreaView>
      <View>
        <Pressable onPress={startVerificationFlow}>
          <Text>Start Verification Flow</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  )
}
 
export default App

Overview Overview