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

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.

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.

Step 1: Setup your module folders

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

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 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.

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:

TurboModule

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;

NativeModule

import { NativeModules } from "react-native";

const { RTNShareID } = NativeModules;

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

export default RTNShareID as Spec;
  1. Add a package.json file to the RTNShareID folder:

TurboModule

{
  "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"
    }
  }
}

NativeModule

{
  "name": "rtn-shareid",
  "version": "0.0.1",
  "description": "Native Module for ShareID SDK",
  "react-native": "js/index.js",
  "source": "js/index.js",
  "files": [
    "js",
    "android",
    "!android/build"
  ],
  "keywords": [
    "react-native",
    "android",
    "native-module"
  ],
  "license": "MIT",
  "devDependencies": {
    "@react-native-community/cli": "^15.1.3"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  }
}

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' // Only for Turbo Module
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 - check our changelog
  implementation 'com.facebook.react:react-native'
}
  1. Add a ShareIDPackage.kt file to the RTNShareID/android/src/main/java/com/rtnshareid folder:

TurboModule

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
                )
            )
        }
    }
}

NativeModule

package com.rtnshareid

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class ShareIDPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        return listOf(ShareIDModule(reactContext))
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }
}
  1. Add a ShareIDModule.kt file to the RTNShareID/android/src/main/java/com/rtnshareid folder:

TurboModule

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 -> {
                    // ...
                }
            }
        }
    }
}

NativeModule

package com.rtnshareid

import com.facebook.react.bridge.*
import com.shareid.sdk.viewmodel.ShareID

class ShareIDModule(private val reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String = "RTNShareID"

    init {
        setupMessageHandler()
    }

    @ReactMethod
    fun signIn(token: String, promise: Promise) {
        try {
            ShareID.shared.start(ShareID.Service.authenticate, token)
            promise.resolve(null)
        } catch (e: Exception) {
            promise.reject("SIGN_IN_ERROR", e)
        }
    }

    @ReactMethod
    fun signUp(token: String, promise: Promise) {
        try {
            ShareID.shared.start(ShareID.Service.onboarding, token)
            promise.resolve(null)
        } catch (e: Exception) {
            promise.reject("SIGN_UP_ERROR", e)
        }
    }

    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';

// then

RTNShareID.signIn("your_token_here");
RTNShareID.signUp("your_token_here");
  1. To finish, launch your app with this commands

> yarn add ../RTNShareID
> yarn android

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.

Last updated