BlockID React Native Integration Guide

Overview

The react-native-blockidplugin is a wrapper for the native BlockID SDKs on iOS and Android, designed to simplify API access for React Native projects. This plugin allows you to interact with the native BlockID SDKs on both iOS and Android platforms using React Native code.

The BlockID SDK is a cross-platform dependency compatible with both Android and iOS. It can be effortlessly integrated into native Android applications using Gradle as the dependency management tool, while iOS applications can incorporate it using CocoaPods.

Here are the key features of the BlockID SDK:

• One-Time Passcode: Generate a one-time passcode displayed in a mobile app, providing an additional Multi-Factor Authentication (MFA) layer.
• ID Card Verification: Scan, extract, and verify ID cards from a specified list of countries.
• Driver’s License Verification: Scan, extract, and verify driver’s licenses from a specified list of countries.
• Passport Verification: Scan, extract, and verify passports from a specified list of countries.
• Live ID Enrollment: Allow users to enroll their face for liveness detection.
• Live ID Verification: Prompt users to verify their face against a previously enrolled image for identity confirmation.
• Passwordless Login: Utilize a QR code for secure login approval via a trusted device.
• Enroll TouchID / FaceID: Leverage the native biometric of the device to unlock the application.
• License Key Management: Use a license key to manage the blockidplugin efficiently. The following screenshot illustrates the features of BlockID SDK:

The following screenshot illustrates the features of BlockID SDK:

Starting with Release v1.10.70, the BlockID SDK has been integrated with the React Native framework through a plugin/bridge. This plugin serves as a wrapper for the native BlockID SDKs on iOS and Android, facilitating interaction with the SDKs across both platforms so that the BlockID services can be seamlessly used on Android/iOS applications built with React Native.

System Requirements

Before getting started, make sure you meet the following prerequisites:

• Ensure that the React Native development environment is set up on your system.
• Android API level 25 or Android 7.1 higher is required.
• iOS version 13.0 or later is necessary.

Installing React Native

To install react native, follow these steps:

1. Make sure you have node(v18.20.3) environment in your system. If not download Node.js from the following:

   https://nodejs.org/en/download/package-manager

2. Use the following command to install react native.

   npm install -g react-native-cli

3. Ensure that Xcode is set up in your bash/zsh profile on Mac, and Android Studio is configured in your profile on Windows.

4. As dependencies are managed via yarn, use the following command to install yarn.

   npm install --global yarn

Integrating react-native-blockidplugin with React-Native Project

To integrate react native into your project, follow these steps:

1. Use one of the following commands to create your react-native project.

   npx react-native init MyProject

  or  

npx @react-native-community/cli@latest init MyProject

2. Execute the yarn command in the root folder of the project.

   yarn

3. Install the react-native BlockID package as a git dependency.

   yarn add react-native-blockidplugin@https://github.com/1KBlockID/reactnative-blockid-demo-app.git#main
   note

   Make sure that you have access to the above repository.

Managing Configurations in iOS/Android Platforms

To use Android/iOS react-native applications, you must configure specific dependencies into your React Native project's Android/iOS directories.

Configuring iOS Directory

Make the following changes to the Podfile in the iOS directory of your React Native project.

note

Check if you already have a Podfile in the iOS directory. If not, run the pod initcommand in the terminal. This command will initialize a Podfile for your project.

1. Open the Podfile in the text editor of your choice.
2. Make the following change to the Podfile.

  dynamic_frameworks = ['Alamofire', 'CryptoSwift', 'BigInt', 'SwiftyTesseract', 'TrustWalletCore', 'Web3', 'secp256k1.swift',
    'OpenSSL-Universal', 'WebAuthnKit', 'EllipticCurveKeyPair', 'YubiKit' , 'PromiseKit', 'KeychainAccess', 'SwiftProtobuf', 'BlockID']
 
    pre_install do |installer|
      installer.pod_targets.each do |pod|
        if dynamic_frameworks.include?(pod.name)
          puts "Overriding the dynamic_framework? method for #{pod.name}"
          def pod.dynamic_framework?;
            true
          end
          def pod.build_type;
            Pod::BuildType.dynamic_framework
          end
          pod.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
        end
      end
    end
  pod 'WebAuthnKit', :git => 'https://github.com/1KBlockID/WebAuthnKit-iOS.git', :tag => '2.0.4'
  pod 'EllipticCurveKeyPair', :git => 'https://github.com/1KBlockID/EllipticCurveKeyPair.git', :tag => '2.0.2'
  pod 'Web3', :git => 'https://github.com/Boilertalk/Web3.swift.git', :tag => '0.4.2'
  pod 'BlockID', :git => 'https://github.com/1KBlockID/ios-blockidsdk.git', :tag => '1.20.00'

3. Add the following configuration to the Podfile.

   post_install do |installer|
   # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
   react_native_post_install(
   installer,
   config[:reactNativePath],
   :mac_catalyst_enabled => false,
   # :ccache_enabled => true
   )
   installer.pods_project.targets.each do |target|
   target.build_configurations.each do |config|
   # set build active architecture to to YES
   config.build_settings['ONLY_ACTIVE_ARCH'] = 'YES' 
   # enable simulator support
   config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64 i386"
   # set iOS Deployment Target to 13.0
   config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = 13.0
   if dynamic_frameworks.include?(target.name)
   config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
   end
   xcconfig_path = config.base_configuration_reference.real_path
   xcconfig = File.read(xcconfig_path)
   xcconfig_mod = xcconfig.gsub(/DT_TOOLCHAIN_DIR/, "TOOLCHAIN_DIR")
   File.open(xcconfig_path, "w") \{ |file| file \<< xcconfig_mod }
   end
   end
   end

4. Run the following command inside the iOS folder.

   bundle install #only one time in your project
   bundle exec pod install

5. Add the following permissions to your info.plist.

   NSCameraUsageDescription, NSFaceIDUsageDescription

Configuring Android Directory

To configure the files inside the Android directory of your react-native project, follow these steps:

Step 1: Navigate to the build.gradle file in your react-native project and make the following changes.

  buildscript {
  ...
}
allprojects {
  repositories {
    google()
    mavenCentral()
    gradlePluginPortal()
    maven {
      url 'https://nexus-1k-nonprod.1kosmos.net/repository/maven-releases/'
      credentials {
        username = "developer"
        password = "q5k#06ZcjSo#"
      }
    }
    maven { url "https://jitpack.io" }
    maven {
      url 'http://www.baka.sk/maven2'
      allowInsecureProtocol = true
    }
  }
}

Step 2: Modify the Gradle build configurations inside android/app folder.

1. Specify the minSdkVersion property as 25.

2. Add the following packaging options inside the Android section.

   packagingOptions {
    exclude 'META-INF/rxjava.properties'
    exclude 'lib/x86_64/darwin/libscrypt.dylib'
    exclude 'lib/x86_64/freebsd/libscrypt.so'
    exclude 'lib/x86_64/linux/libscrypt.so'
    exclude 'META-INF/INDEX.LIST'
    exclude 'META-INF/LICENSE.md'
    exclude 'META-INF/DEPENDENCIES'
    exclude 'META-INF/NOTICE.md'
    exclude 'AndroidManifest.xml'
    }

3. Add the following configurations to the root level of the build.gradle file.

   configurations.configureEach {
   exclude group: 'org.bouncycastle', module: 'bcprov-jdk15to18'
   exclude group: 'org.bouncycastle', module: 'bcutil-jdk15on'
   }

Step 3: Navigate to AndroidManifest.xml file under android/app/src/main add tools:replace="android:allowBackup,android:label,android:theme" as shown below.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <!-- The INTERNET permission is required for development. Specifically,
         the React-Native tool needs it to communicate with the running application
         to allow setting breakpoints, to provide hot reload, etc.
    -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:label="appname"
        android:icon="@mipmap/ic_launcher"
        android:theme="@style/LaunchTheme"
        android:allowBackup="true"
        tools:replace="android:allowBackup,android:theme,android:label"/>
</manifest>

Step 4: Add the following permission in your manifest.

camera

Importing react-native blockID plugin to your Project

Run the following command to import the react-native-blockidplugin into your React-Native project.

import { setLicenseKey } from 'react-native-blockidplugin';

Managing Functionalities in the Sample Project

After creating the sample project, the following BlockID app functionalities can be explored in the Flutter Android/iOS applications:

• SDK Setup functions
• Get DID
• Get Version
• Create a one-time passcode
• LiveID Enrollment
• LiveID Verification
• Document Enrollment
• Login with a QR Code
• Locking and Unlocking SDK

SDK Setup functions

You can set up an SDK to manage the license key, wallet, and tenant. The following table provides information on various SDK functions:

Function	Description	Container
Set License Key	Set the license key to set up the SDK	let result = await setLicenseKey(const_licenseKey);
Initialize Wallet	Create a wallet for the application	let result = await initiateTempWallet();
Register Tenant	Register the tenant with the SDK	let result = await registerTenant( const_tag, const_community, const_dns, );

Get DID

To retrieve the unique Distributed IDentifier (DID), run the following command. Its response is displayed as a String.

let result = await getDID();

Get Version

To retrieve the version of the currently used BlockID SDK, run the following command.

get result = await blockIDSDKVersion();

One-time passcode

Obtain the time-based OTP from the blockidplugin by running the following command:

let result = await totp();

Its response will be of the type TOTP and provide the following objects:

Parameter	Description
totp	Displays a time-based one-time password (OTP).
getRemainingSecs	Displays the time after which the OTP expires. The default expiry time of the OTP is 30 seconds.

LiveID Enrollment

You can perform the following functions during the enrollment of liveID:

a. Enroll LiveID – Use the following command to enroll the liveid.

await enrollLiveIDScanning(
        dvcID: const_dvcID, // this param is optional, can be omitted
        mobileSessionId: random_UUID, // optional param
        mobileDocumentId: "liveid_$random_UUID"); // optional param 
      );

Method Summary

Parameter	Description
dvcID	(Optional) String: DvcID
mobileSessionId	(Optional)String: random ID
mobileDocumentId	(Optional) String: random ID

b. Verify Enrolled LiveID – Use the following command to verify the enrolled liveID.

await verifyLiveIDScanning(
        dvcID: const_dvcID, // this param is optional, can be omitted
        mobileSessionId: random_UUID, // optional param
        mobileDocumentId: "liveid_$random_UUID"); // optional param  
      );

Method Summary

Parameter	Description
dvcID	(Optional) String: DvcID
mobileSessionId	(Optional) String: random ID
mobileDocumentId	(Optional) String: random ID

c. Verify Face with Liveness - Use the following command to perform the face liveness check.

await verifyFaceWithLiveness(
        dvcID: const_dvcID, // this param is optional, can be omitted
        mobileSessionId: random_UUID, // optional param
        mobileDocumentId: "liveid_$random_UUID"); // optional param  
      );

Parameter	Description
dvcID	(Optional) String: DvcID
mobileSessionId	(Optional) String: random ID
mobileDocumentId	(Optional) String: random ID

d. Check if LiveID is registered – Use the following sample command to check if the liveID has been registered.

let result = await isLiveIDRegistered();

The status will be a boolean value indicating whether the LiveID is registered.

e. Stop LiveID Scanning – Use the following sample command to stop the liveID scanning process.

await stopLiveIDScanning();

The status will be a boolean value indicating whether scanning has been stopped.

f. LiveID Scanning responses – Displays the responses of the liveID scanning.

LiveID Status	Description
FocusOnFaceChanged	When the user’s face focus changes within the scanner focus area.
faceLivenessCheckStarted	When the LiveID scanner started the liveness check.
completed	When the LiveID Scanning is completed.
failed	When the LiveID Scanning fails. This will give the error object as follows: Error: ErrorResponse which will have the code. Error Code Description: Error Description.

Document Enrollment

You can use this functionality to enroll different types of documents such as Driver’s Licenses, Passports, and National IDs.

a. Scanning document – Use the following command to scan the document.

let documentStr = await scanDocument(type);

Where the documentStr provides a JSON string containing document information, and its types are listed below:

Parameter	Document
nationalID	National ID
drivingLicense	Driver License
passport	Passport

b. Registering Document – Use the following sample command to register the document.

// This will register Drivers License with LiveID
let response = await registerDrivingLicenceWithLiveID(
                Object.fromEntries(idCardEntries),
                face,
                proofedBy,
                randomUUID,
                "dl_with_liveid_" + randomUUID
              );
 
// This will register Passport with LiveID
await _store.registerPassportWithLiveID(response);
let response = await registerPassportWithLiveID(
                Object.fromEntries(idCardEntries),
                face,
                proofedBy,
                randomUUID,
                "ppt_with_liveid_" + randomUUID
              ); 
// This will register National ID with LiveID 
await _store.registerNationalIDWithLiveID(response); 
let response = await registerNationalIDWithLiveID( 
                Object.fromEntries(idCardEntries), 
                face, 
                proofedBy, 
                randomUUID, 
                "nationalid_with_liveid_" + randomUUID 
              ); 

Method Summary

Parameter	Description
data	data object received after scanning the document
face	string: face object in the string format
proofedBy	string: This identifies the entity responsible for proofing the document. When you use BlockID SDK Scanners, this defaults to “blockid”.
mobileSessionId	(Optional) String: random ID
mobileDocumentId	(Optional) String: random ID

QR Scanning

The following functions help with QR scanning.

a. Start Scan - To start the scanning process, use the following command:

let qrDataString = await startQRScanning();

Method Summary

Parameter	Description
return	qrDataString: Scanned data as String

b. Stop Scan - To stop the scanning process, use the following command:

await stopQRScanning();

Method Summary

Parameter	Description
return	Boolean: It will return true if the scanning process is stopped.

Locking and Unlocking SDK

The lock and unlock functionality in the SDK provides control over feature access, ensuring that SDK capabilities are only accessible when explicitly unlocked.

note

By default, the BlockID SDK is locked. To access its functionalities, you must first unlock the SDK. You can unlock it using one of the following methods:

To lock the SDK, run the following command:

await lockSDK();

To unlock the SDK, run the following command:

await unLockSDK();