React Native - Identity Verification

React Native module for Transmit Security Identity Verification SDK. Verify customers’ identities during onboarding and beyond.

About Identity Verification

Transmit Security Identity Verification SDK offers a comprehensive identity verification solution, utilizing deep document inspection, biometric matching, and rapid background checks to streamline customer enrollment, enhance compliance, expedite time to market, prevent fraud, and fortify security within a seamless CIAM platform.

Using this module, you can easily integrate our Identity Verification SDK into your React Native app for seamless and secure user identity verification. Learn more about how you can boost your security with Transmit Security Identity Verification.

Understand the flow

We recommended that you read more about the verification flow required steps in our documentation

Configure your app

To integrate this module, you'll need to configure an application.

1. From the Applications page, create a new application or use an existing one.
2. From the application settings:
   • For Client type , select native
   • For Redirect URI , enter your website URL. This is a mandatory field, but it isn't used for this flow.
   • Obtain your client ID and secret for API calls, which are autogenerated upon app creation.

Example project setup

1. In your project, navigate to example/src/config.ts and configure the clientId and secret using the credentials obtained from the Transmit portal.
2. Ensure you have all the necessary dependencies by running yarn in both the module's root folder and the example root folder.
3. Run the example app on a real device using Xcode or Android Studio. Alternatively, execute yarn example ios or yarn example android.

Important Security Note: Never store your secret in a front-end application.

The example app utilizes a mock server to manage communication with the identity verification platform. This mock server employs the secret you have specified in example/src/config.ts exclusively for demonstration purposes. It is paramount that you safeguard your secret in a secure and confidential location.

Module installation

To install this module, execute the following command in your project's root folder.

npm install react-native-ts-idv

iOS Setup

You might need to execute pod install in your project's /ios folder and set your minimum iOS target to 13.0 in your Podfile (e.g platform :ios, 13.0).

Android Setup

Add to app/build.gradle under repositories

repositories {
  maven {
    url('https://transmit.jfrog.io/artifactory/transmit-security-gradle-release-local/')
  }
}

Note:
As for projects on Gradle 8+ and Kotlin 1.8+ build will fail if the JDK version between compileKotlin and compileJava and jvmTarget are not aligned.

This won't be necessary anymore from React Native 0.73. More on this: https://kotlinlang.org/docs/whatsnew18.html#obligatory-check-for-jvm-targets-of-related-kotlin-and-java-compile-tasks

Add camera permission

For module usage, configuring permissions for the device camera on both iOS and Android is necessary. You must also explicitly request user permission before commencing the identity verification process. See the /example project to learn more.

Usage

Module Setup

import IdentityVerification, { TSIDV } from 'react-native-ts-idv';
const { TsIdv } = NativeModules; // Import NativeModules and NativeEventEmitter from 'react-native'
const eventEmitter = new NativeEventEmitter(TsIdv); // Create an event emitter with the native module TsIdv

private verificationStatusChangeSub?: EmitterSubscription; // Imported from react-native

componentDidMount(): void {
    // Setup the module as soon your component is ready
    this.onAppReady().catch(e => void e);
}

private onAppReady = async (): Promise<void> => {
    /* Initialize the module with parameters: 
        1. ClientID obtained from the application settings in the Transmit portal
        2. Optional: Base URL. Defaults to TSIDV.BaseURL.us
    */
    IdentityVerification.initialize(config.clientId, TSIDV.BaseURL.us);
    
    // Register to receive status updates
    this.verificationStatusChangeSub = eventEmitter.addListener(
      "idv_status_change_event", // Important! use this event name
      this.onVerificationStatusChange
    );
}

componentWillUnmount(): void {
    this.verificationStatusChangeSub?.remove(); // Remove the subscription when it's no longer needed
}

Start the verification process

onStartVerificationProcess = async (): Promise<void> => {
    try {
        // See Step 7: Create session https://developer.transmitsecurity.com/guides/verify/quick_start_ios/ to get startToken
        const startToken = verificationSession.startToken; 
        await IdentityVerification.startIdentityVerification(startToken); // This will trigger the native SDK to start the flow
        console.log("Started identity verification process");
    } catch (error) {
        console.error(`Error verifying user identity: ${error}`);
    }
}

Handle status changes

const enum VerificationStatus {
  verificationDidCancel = "verificationDidCancel",
  verificationDidComplete = "verificationDidComplete",
  verificationDidFail = "verificationDidFail",
  verificationDidStartCapturing = "verificationDidStartCapturing",
  verificationDidStartProcessing = "verificationDidStartProcessing",
  verificationRequiresRecapture = "verificationRequiresRecapture",
}

private onVerificationStatusChange = (params: any) => {
    const status = params["status"];
    const additionalData = params["additionalData"];

    switch (status) {
        case VerificationStatus.verificationDidCancel:
            console.log(`verificationDidCancel`);
            break;
        case VerificationStatus.verificationDidComplete:
            console.log(`verificationDidComplete`);
            break;
        case VerificationStatus.verificationDidFail:
            const error: string = additionalData["error"];
            console.log(`verificationDidFail: ${error}`);
            break;
        case VerificationStatus.verificationDidStartCapturing:
            console.log(`verificationDidStartCapturing`);
            break;
        case VerificationStatus.verificationDidStartProcessing:
            console.log(`verificationDidStartProcessing`);
            break;
        case VerificationStatus.verificationRequiresRecapture:
            const reason: string = additionalData["error"];
            console.log(`verificationRequiresRecapture: ${reason}`);
            break;
        default:
            console.log(`Unhandled verification status: ${status}`);
    }
}

Obtaining verification results

Once the module emits the verificationDidComplete event, you can fetch the results from your server as described in Step 10: Handle verification result

Important Notes

1. Make sure to use idv_status_change_event for the emitter event name.
2. Please take note that the example application uses a client-side mock server. In a production environment, a real server is required. Additionally, it is crucial to emphasize that storing the client secret in your front-end application is strictly discouraged for security reasons.

Support

Email us for support

Author

Transmit Security, https://github.com/TransmitSecurity

License

This project is licensed under the MIT license. See the LICENSE file for more info.