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:
Set up the SDK: install and import the SDK
Get a token: request a token using your business credentials
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
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.
Add the following to your
build.gradle
implementation("ai.shareid:sdk:+") // or specific version
You can now synchronise and use the SDK in your project
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
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.
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;
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.
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'
}
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()
}
}
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 -> {
// ...
}
}
}
}
}
Step 4: Import and test
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");
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.
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