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

2. Get a token

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

4. Get the Analysis result

1. Set up the SDK

Follow the Android and IOS SDK documentation and check the documentation of Turbo Module to integrate our SDKs in ReactNative

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 (Message Handling)

Use your token to start an onboarding or an authenticate, you can configure the SDK :

• For Android Integration you can follow this example:

package com.shareid.example

import android.app.Activity
import android.content.Intent
import androidx.activity.result.ActivityResult
import com.facebook.react.bridge.BaseActivityEventListener
import com.facebook.react.bridge.Promise
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.module.annotations.ReactModule
import com.facebook.react.bridge.Arguments

import com.facebook.react.modules.core.DeviceEventManagerModule
import com.shareid.sdk.ShareId
import com.shareid.sdk.ShareIdResultListener
import com.shareid.sdk.data.model.ShareIdException
import com.shareid.sdk.data.model.ShareIdExitMessage
import com.shareid.sdk.data.model.ShareIdResult
import com.shareid.sdk.home.ShareIdMainActivity

@ReactModule(name = ShareidModule.NAME)
class ShareidModule(
    val reactContext: ReactApplicationContext,
) : NativeShareidSpec(reactContext) {
    private var shareIdPromise: Promise? = null

    private val activityEventListener =
        object : BaseActivityEventListener() {
            override fun onActivityResult(
                activity: Activity,
                requestCode: Int,
                resultCode: Int,
                intent: Intent?,
            ) {
                if (requestCode == 1) {
                    var eventEmitter = reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
                    ShareId.getInstance().messageHandler(
                        ActivityResult(resultCode, intent),
                        object : MessageHandler {
                            override fun success(shareIdResult: ShareIdResult) {
                                eventEmitter.emit("onSuccess", shareIdResult.message)
                            }

                            override fun exit(shareIdResult: ShareIdResult) {
                                eventEmitter.emit(
                                    "onExit",
                                    Arguments.createMap().apply {
                                        putString("message", shareIdResult.message)
                                    },
                                )
                            }

                            override fun failure(shareIdResult: ShareIdResult) {
                                eventEmitter.emit(
                                    "onFail",
                                    Arguments.createMap().apply {
                                        putString("message", shareIdResult.message)
                                    },
                                )
                            }
                        },
                    )
                }
            }
        }

    init {
        reactContext.addActivityEventListener(activityEventListener)
    }

    override fun getName(): String = NAME

    internal fun createIntent(
        baseUrl: String,
        token: String,
        applicantID: String,
    ): Intent {
        val intent = Intent(reactContext, ShareIdMainActivity::class.java)

        intent.putExtra(ShareIdMainActivity.SHARE_ID_METHOD, ShareIdMainActivity.SHARE_ID_ONBOARDING)
        intent.putExtra(ShareIdMainActivity.SHARE_ID_SERVER_URL, baseUrl)
        intent.putExtra(ShareIdMainActivity.SHARE_ID_SERVICE_TOKEN, token)
        intent.putExtra(ShareIdMainActivity.SHARE_ID_APPLICANT_ID, applicantID)
        return intent
    }

    override fun mount(
        baseUrl: String,
        token: String,
        applicantID: String,
    ) {
        reactContext.startActivityForResult(createIntent(baseUrl, token, applicantID), 1, null)
    }

    companion object {
        const val NAME = "Shareid"
    }
}

Make sure to import all packages in example file

• For IOS Integration

After retrieving our SDK via Cocoapods, you can follow the example below by adding several files:

Shareid.swift

import shareid_sdk_ios

@objc(Shareid)
class Shareid: RCTEventEmitter {
    @objc open override func supportedEvents() -> [String] {
        return [
            "onExit",
            "onFail",
            "onSuccess",
        ]
    }

    @objc(mount:withToken:withId:)
    func mount(
        token: String,
        applicantID: String
    ) -> Void {
        ShareID.shared.start(service: ShareID.Service.onboarding, token: token)
        
        ShareID.shared.messageHandler = { [weak self] (result: ShareID.Result) in
            guard let self = self else { return }
            
            switch result.type {
                case .success:
                    self.sendEvent(withName: "onSuccess", body: [])
                case .exit:
                    let message = "user exited at \(result.step)"
                    let body: [String: String] = ["message": message]
                    self.sendEvent(withName: "onExit", body: body)
                case .failure:
                    let message = "failure with code \(result.code)"
                    let body: [String: String] = ["message": message]
                    self.sendEvent(withName: "onFail", body: body)
            }
        }
    }
}

Shareid.mm

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

@interface RCT_EXTERN_MODULE(Shareid, RCTEventEmitter);

RCT_EXTERN_METHOD(supportedEvents)

RCT_EXTERN_METHOD(mount:(NSString)token
    withId:(NSString)applicantID)

+ (BOOL)requiresMainQueueSetup
{
  return NO;
}

@end

NativeShareid.ts

import { type TurboModule, TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  mount(token: string, applicantID: string): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>("Shareid");

ShareId.tsx

import { memo, useEffect } from "react";
import ShareidService from "./NativeShareid";
import type { ShareIdProps } from "./types";
import { NativeEventEmitter, NativeModules } from "react-native";

export const ShareId = memo(
  ({ applicantID, token, onExit, onFail, onSuccess }: ShareIdProps) => {
    useEffect(() => {
      ShareidService.mount(token, applicantID);
    }, [applicantID, token]);

    useEffect(() => {
      const { Shareid: Module } = NativeModules;
      if (!Module) {
        onFail?.({
          message: "[YourApp] NativeModules Shareid not loaded",
        });
        return;
      }
      const eventEmitter = new NativeEventEmitter(Module);
      const eventListenerExit = eventEmitter.addListener("onExit", (e) =>
        onExit?.(e)
      );
      const eventListenerFail = eventEmitter.addListener("onFail", (e) =>
        onFail?.(e)
      );
      const eventListenerSuccess = eventEmitter.addListener("onSuccess", () =>
        onSuccess?.()
      );

      return () => {
        eventListenerExit.remove();
        eventListenerFail.remove();
        eventListenerSuccess.remove();
      };
    }, []);

    return null;
  }
);

export { type ShareIdProps, ShareidService };

types.ts

export interface ShareIdProps {
  applicantID: string;
  token: string;
  onExit?: (event: { message: string }) => void;
  onFail?: (event: { message: string }) => void;
  onSuccess?: () => void;
}

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.