React Native

This is a walkthrough of how you can integrate the Onboarding or Authenticate SDK for ReactNative applications.

Getting started

In order to perform an Onboarding or an Authenticate, you should follow those steps:

1. Set up the SDK: install and import the SDK

2. Get a token: request a token using your business credentials

3. Start an onboarding or authenticate flow and get the user workflow result from SDK: launch a user workflow and use the Message handler to get insights about the user workflow

4. Get the Analysis result: use your callback or the endpoint to get the analysis result

1. Set up the SDK

Android

1.1. Project requirements

The proper functioning of the SDK necessitates the provision of several parameters. These parameters are essential for enabling the full range of functionalities offered by the SDK.

• minSdk or minSdkVersion = 24

1.2. Install SDK

ShareID use Maven to provide its SDK securely with authentication managed in your AppName/android/build.gradle file.

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url = uri("https://repository.shareid.net/repository/mvn-hosted/")
            credentials {
                username = "<your-repository-username>"
                password = "<your-repository-password>"
            }
        }
    }
}

1.3. Add the dependency

To install the SDK, you'll need to add the dependency in your app module.

1. Add the following to your build.gradle

implementation("ai.shareid:sdk:+") // or specific version

1. You can now synchronise and use the SDK in your project

Make sure you update your various dependencies, distributionUrl, IDE, gradle version or anything else.

Conflicts of dependency

The SDK directly integrates most of the dependencies it uses to simplify your integration.

However, conflicts may arise that require you to integrate dependencies yourself (notably kotlin, material3, compose, etc.).

iOS

1.1. Project requirements

The proper functioning of the SDK necessitates the provision of several parameters. These parameters are essential for enabling the full range of functionalities offered by the SDK.

• iOS 15+ (because of Swift minimum version)

• Available for iPhone and iPad in portrait mode only

Mandatory app permission

The SDK uses the device's camera functionality.

You must add NSCameraUsageDescription within your application's Info.plist file (see Apple documentation).

1.2. Install SDK

ShareID supports CocoaPods with authenticate handled via a .netrc file.

To securely manage your credentials, you’ll need to create a .netrc file in your home directory with the necessary login details.

1. Create and open

Type touch ~/.netrc & open ~/.netrc

1. Add login details

machine repository.shareid.net
login <your-repository-username>
password <your-repository-password>

1. Set file permissions

chmod 600 ~/.netrc

1.3. Add the dependency

To install the SDK with CocoaPods, you'll need to add the dependency to your Podfile. (if it doesn't exist, create one by running the following command in your project directory: pod init)

1. Add the following to your target

platform :ios, min_ios_version_supported

target '<your-app>' do
  use_frameworks!
  pod 'shareid-sdk-ios' # or specific version
end

1. Run pod install to install the dependency

2. Now, you can import and use the SDK in your project

import shareid_sdk_ios

Signing & Capabilities

Before running your React Native app with the ShareID SDK, you must configure Signing & Capabilities in Xcode to avoid build errors.

2. Get a token

Use the credentials you received from ShareID's team to get an authenticate token and launch an onboarding or authenticate workflow.

Depending on the SDK you are integrating (Onboarding/Authenticate), you may use an API here Get a Token

3. Start an onboarding or authenticate flow and get the user workflow result from SDK

Use your token to start an onboarding or an authenticate.

Android

Step 1: Setup your Turbo Module folders

The Turbo Module creates a bridge between your JavaScript code and native Android code, enabling you to use ShareID's specific features in React Native.

Your folder structure should look like this:

Demo
|── AppName
└── RTNShareID
    |── android
    |    |── build.gradle
    |    └── src
    |        └── main
    |            └── java
    |                └── com
    |                    └── rtnshareid
    |                        |── ShareIDPackage.kt
    |                        └── ShareIDModule.kt
    |── js
    |    └── NativeShareID.ts
    └── package.json

You can use the npx @react-native-community/cli init AppName command directly into Demo folder if you are starting a new project.

Tips

To keep the Turbo module decoupled from the application, we recommend that you define it separately from the application and then add it to your application as a dependency at a later date.

Don't forget to change the AppName field

Step 2: JS module configuration

The JavaScript module acts as an interface between React Native and the native code.

1. Create a NativeShareID.ts file in the js:

import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
import { TurboModuleRegistry } from "react-native";

// Define the interface for the TurboModule
export interface Spec extends TurboModule {
  /**
   * Start the ShareID service with the provided token.
   * @param token - Authentication token
   */
  signIn(token: string): void;
  signUp(token: string): void;
}

// Retrieve the TurboModule instance from the registry
const RTNShareID = TurboModuleRegistry.get<Spec>("RTNShareID");

export default RTNShareID;

1. Add a package.json file to the RTNShareID folder:

{
  "name": "rtn-shareid",
  "version": "0.0.1",
  "description": "Turbo Module for ShareID SDK",
  "react-native": "js/index",
  "source": "js/index",
  "files": [
    "js",
    "android",
    "!android/build"
  ],
  "keywords": [
    "react-native",
    "android"
  ],
  "license": "MIT",
  "devDependencies": {
    "@react-native-community/cli": "^15.1.3"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "codegenConfig": {
    "name": "RTNShareIDSpec",
    "type": "modules",
    "jsSrcsDir": "js",
    "android": {
      "javaPackageName": "com.rtnshareid"
    }
  }
}

Step 3: Android configuration and Kotlin files

The Android code is used to implement the native ShareID SDK features.

1. Create a build.gradle file in the RTNShareID/android folder:

buildscript {
  ext.safeExtGet = { prop, fallback ->
    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
  }
  repositories {
    google()
    gradlePluginPortal()
  }
  dependencies {
    classpath("com.android.tools.build:gradle:7.3.1")
    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.22")
  }
}

apply plugin: 'com.android.library'
apply plugin: 'com.facebook.react'
apply plugin: 'org.jetbrains.kotlin.android'

android {
  compileSdkVersion safeExtGet('compileSdkVersion', 33)
  namespace "com.rtnshareid"
}

repositories {
  mavenCentral()
  google()
}

dependencies {
  implementation 'ai.shareid:sdk:x.y.z' // This is where we add the dependency to our android sdk
  implementation 'com.facebook.react:react-native'
}

1. Add a ShareIDPackage.kt file to the RTNShareID/android/src/main/java/com/rtnshareid folder:

package com.rtnshareid

import com.facebook.react.TurboReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.module.model.ReactModuleInfo
import com.facebook.react.module.model.ReactModuleInfoProvider

class ShareIDPackage : TurboReactPackage() {

    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
        return when (name) {
            ShareIDModule.NAME -> ShareIDModule(reactContext)
            else -> null
        }
    }

    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
        return ReactModuleInfoProvider {
            mapOf(
                ShareIDModule.NAME to ReactModuleInfo(
                    name = ShareIDModule.NAME,
                    className = ShareIDModule.NAME,
                    canOverrideExistingModule = false,
                    needsEagerInit = false,
                    hasConstants = true,
                    isCxxModule = false,
                    isTurboModule = true
                )
            )
        }
    }
}

1. Add a ShareIDModule.kt file to the RTNShareID/android/src/main/java/com/rtnshareid folder:

package com.rtnshareid

import com.facebook.react.bridge.*
import com.facebook.react.module.annotations.ReactModule
import com.shareid.sdk.viewmodel.ShareID
import com.rtnshareid.NativeShareIDSpec

@ReactModule(name = ShareIDModule.NAME)
class ShareIDModule(private val reactContext: ReactApplicationContext) : NativeShareIDSpec(reactContext) {

    companion object {
        const val NAME = "RTNShareID"
    }

    override fun getName(): String = NAME

    init {
        setupMessageHandler()
    }

    override fun signIn(token: String) {
        ShareID.shared.start(ShareID.Service.authenticate, token)
    }

    override fun signUp(token: String) {
        ShareID.shared.start(ShareID.Service.onboarding, token)
    }

    private fun setupMessageHandler() {
        ShareID.shared.messageHandler = { result ->
            when (result.type) {
                ShareID.ResultType.success -> {
                    // ...
                }
                ShareID.ResultType.exit -> {
                    // ...
                }
                ShareID.ResultType.failure -> {
                    // ...
                }
            }
        }
    }
}

You can use EventEmitter to pass on our messageHandler to your React Native code.

Step 4: Import and test

1. Import the module into your React Native application

Go to your App.tsx (or .js) file and add this import:

import RTNShareID from 'rtn-shareid/js/NativeShareID';

1. To finish, launch your app with this commands

> yarn add ../RTNShareID
> yarn android

All the code above is an example of Kotlin integration. You can also use Java by referring to the Android documentation.

iOS

Before starting the iOS integration in your React Native application, open your AppName.xc workspace in Xcode.

Step 1: Create your module

//  ShareIDModule.swift

import Foundation
import AVFoundation
import shareid_sdk_ios

@objc(ShareIDModule)
class ShareIDModule: NSObject {
  
  @objc static func moduleName() -> String {
    return "ShareIDModule"
  }
  
  override init() {
    super.init()
    setupMessageHandler()
  }
  
  @objc
  func signUp() {
    ShareID.shared.start(service: .onboarding, token: "token")
  }
  
  @objc
  func signIn() {
    ShareID.shared.start(service: .authenticate, token: "token")
  }
  
  @objc
  static func requiresMainQueueSetup() -> Bool {
    return true
  }
  
  private func setupMessageHandler() {
    ShareID.shared.messageHandler = { (result: ShareID.Result) in
      switch result.type {
        case .success:
          // ...
        case .exit:
          // ...
        case .failure:
          // ...
      }
    }
  }
}

Step 2: Create your Bridging-Header

//  ShareIDModule.m

#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"

@interface

RCT_EXTERN_MODULE(ShareIDModule, NSObject)

RCT_EXTERN_METHOD(signUp)
RCT_EXTERN_METHOD(signIn)

@end

4. Get the Analysis result

When the processing of an onboarding request is finished, you may receive the result through the callback if you provided it. You may also, fetch yourself the result by calling our API.

See Get the analysis result for more details.

Customisation

The ShareID SDK is designed to be highly customisable, allowing great flexibility through various configuration options or the application of themes to adapt the user interface to your needs. To do this, simply follow this same section in the Android and iOS documentation and add them to your code.