Reclaim Protocol's InApp React Native SDK for ZK proof generations for requests with an in-app experience of web verification

Get Started

This SDK allows you to integrate Reclaim's in-app verification process into your React Native application.

Prerequisites

A Reclaim account where you've created an app and have the app id, app secret.
A provider id that you've added to your app in Reclaim Devtools.

Note:

This SDK may not be compatible with React Native Frameworks like Expo.
To learn more about React Native apps without a framework, refer to the React Native documentation.

Example

See the Reclaim Example - React Native for a complete example of how to use the SDK in a React Native application.

Installation

npm install @reclaimprotocol/inapp-rn-sdk

Alternative: Install from git source

npm install git+https://github.com/reclaimprotocol/reclaim-inapp-reactnative-sdk.git

Setup

Android Setup

Add the following to your android/app/src/main/AndroidManifest.xml file under the <application> tag:

      <activity
        android:name="org.reclaimprotocol.inapp_sdk.ReclaimActivity"
        android:theme="@style/Theme.ReclaimInAppSdk.LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize"
        />

add the following to the end of settings.gradle:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    String flutterStorageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
    String reclaimStorageUrl = System.env.RECLAIM_STORAGE_BASE_URL ?: "https://reclaim-inapp-sdk.s3.ap-south-1.amazonaws.com/android/0.3.0/repo"
    repositories {
        google()
        mavenCentral()
        maven {
            url "$reclaimStorageUrl"
        }
        maven {
            url "$flutterStorageUrl/download.flutter.io"
        }
    }
}

(Ignore if already added in settings.gradle from above) or alternatively add the following repositories to the relevant repositories block:

String flutterStorageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
String reclaimStorageUrl = System.env.RECLAIM_STORAGE_BASE_URL ?: "https://reclaim-inapp-sdk.s3.ap-south-1.amazonaws.com/android/0.3.0/repo"
// ...
maven {
    url "$reclaimStorageUrl"
}
maven {
    url "$flutterStorageUrl/download.flutter.io"
}

iOS Setup

Make sure to have a platform declaration for your project in your Podfile with version 13.0 or higher.

platform :ios, '13.0' # or platform :ios, min_ios_version_supported

Ignore if you already have this declaration in your Podfile.

Add the following to your Podfile to override SDK dependency:

This step is only required when facing issues with the resolved pod dependency.
You can override the version of dependency when you wish to use a specific version of the SDK.
You can add a declaration in your Podfile to install the SDK from cocoapods, or from a specific git tag, head, commit, or branch.

# Cocoapods is the recommended way to install the SDK.
pod 'ReclaimInAppSdk', '~> 0.3.0'

After adding the dependency, your podfile may look like this:

platform :ios, '13.0'
 
# ... some podfile content (removed for brevity)
 
target 'InappRnSdkExample' do
  config = use_native_modules!
 
  use_react_native!(
    :path => config[:reactNativePath],
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
 
  # This is the line that you may need to add in your podfile.
  pod 'ReclaimInAppSdk', '~> 0.3.0'
 
  pre_install do |installer|
    system("cd ../../ && npx bob build --target codegen")
  end
 
  # ... rest of the podfile. (removed for brevity)

Run pod install inside the ios/ directory of your project.

cd ios/
pod install

Fixing performance issues on IOS physical devices

Your app performance will be severely impacted when you run debug executable on a physical device. Fixing this requires a simple change in your Xcode project xcscheme.

Usage

To use Reclaim InApp Sdk in your project, follow these steps:

Import the @reclaimprotocol/inapp-rn-sdk package in your project file.

import { ReclaimVerification } from '@reclaimprotocol/inapp-rn-sdk';

Initialize the ReclaimVerification class to create an instance.

const reclaimVerification = new ReclaimVerification();

Start the verification flow by providing the app id, secret and provider id.

const verificationResult = await reclaimVerification.startVerification({
    appId: config.REACT_APP_RECLAIM_APP_ID ?? '',
    secret: config.REACT_APP_RECLAIM_APP_SECRET ?? '',
    providerId: providerId,
});

The returned result is a [ReclaimVerification.Response] object. This object contains a response that has proofs, exception, and the sessionId if the verification is successful.

Exception Handling

If the verification ends with an exception, the exception is thrown as a [ReclaimVerification.ReclaimVerificationException] object.

Following is an example of how to handle the exception using [error.type]:

try {
  // ... start verification
} catch (error) {
  if (error instanceof ReclaimVerification.ReclaimVerificationException) {
    switch (error.type) {
      case ReclaimVerification.ExceptionType.Cancelled:
        Snackbar.show({
          text: 'Verification cancelled',
          duration: Snackbar.LENGTH_LONG,
        });
        break;
      case ReclaimVerification.ExceptionType.Dismissed:
        Snackbar.show({
          text: 'Verification dismissed',
          duration: Snackbar.LENGTH_LONG,
        });
        break;
      case ReclaimVerification.ExceptionType.SessionExpired:
        Snackbar.show({
          text: 'Verification session expired',
          duration: Snackbar.LENGTH_LONG,
        });
        break;
      case ReclaimVerification.ExceptionType.Failed:
      default:
        Snackbar.show({
          text: 'Verification failed',
          duration: Snackbar.LENGTH_LONG,
        });
    }
  } else {
    Snackbar.show({
      text: error instanceof Error ? error.message : 'An unknown verification error occurred',
      duration: Snackbar.LENGTH_LONG,
    });
  }
}

This error also contains sessionId, reason, and innerError that can be used to get more details about the occurred error.

error.sessionId
error.reason
error.innerError

Migration

Migration steps for 0.3.1
Migration steps for 0.3.0
Migration steps for 0.2.1

Advanced Usage

Overriding SDK Config

You can customize the verification flow by overriding the default SDK configuration with reclaimVerification.setOverrides.

reclaimVerification.setOverrides({
  appInfo: {
    appName: "Overridden Example",
    appImageUrl: "https://placehold.co/400x400/png"
  }
  // .. other overrides
})

Read more about overrides in Reclaim InApp SDK Documentation | Overrides

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

React Native SDK

Method 1: Update Environment Variables for XCScheme (Recommended)

Method 2: Disable 'Debug executable'

On this page