Dojah KYC SDK (React Native)

Installation

npm install dojah-kyc-sdk-react_native

Android Setup

Requirements

• Minimum Android SDK version - 21
• Supported targetSdkVersion - 35

In your android root/build.gradle file set maven path:

...
allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Or Set maven path in your root/settings.gradle file:

...
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Enable Jetifier

Enable Jetifier in android/gradle.properties

  android.enableJetifier=true

Permissions

For Android you don't need to declare permissions, its already included in the Package.

IOS Setup

Requirements

• Minimum iOS version - 14

Add the following POD dependencies in your Podfile app under your App target

  pod 'Realm', '~> 10.52.2', :modular_headers => true
  pod 'DojahWidget', :git => 'https://github.com/dojah-inc/sdk-swift.git', :branch => 'pod-package'

example

target 'Example' do
  ...
  pod 'Realm', '~> 10.52.2', :modular_headers => true
  pod 'DojahWidget', :git => 'https://github.com/dojah-inc/sdk-swift.git', :branch => 'pod-package'
  ...
end

and run pod install in your ios folder:

cd ios
pod install

Make some few changes in your AppDelegate.mm file

• Add the following imports:

#import <React/RCTBridge.h>
#import <React/RCTRootView.h>

• Then replace application function in your AppDelegate with the following:

REMEMBER TO CHANGE THE Your App Name,to the actual name of your App

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // Initialize the React Native bridge
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Your App Name"
                                            initialProperties:nil];

  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;

  // Wrap rootViewController in a UINavigationController
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.rootViewController = navigationController;
  [self.window makeKeyAndVisible];

  return YES;
}

Permissions

For IOS, Add the following keys to your Info.plist file:

NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor.

NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor.

NSLocationWhenInUseUsageDescription - describe why your app needs access to the location, if you intend to verify address/location. This is called Privacy - Location Usage Description in the visual editor.

Usage

To start KYC, import Dojah in your React Native code, and launch Dojah Screen

import {launchDojahKyc } from 'dojah-kyc-sdk-react_native';


/**
 * The following parameters are available
 * for launching the flow.
*/

/**
* This is your widget ID, a unique identifier for your Dojah flow. You can find it in your Dojah Dashboard after creating and publishing a flow. Replace `'your-widget-id'` with the actual widget ID from your dashboard.
*/
const widgetId = 'your-widget-id';

/**
 * Reference ID: This is an optional parameter that allows you to initialize the SDK for an ongoing verification process.
 */
const referenceId = 'your-reference-id';

/**
 * Email: This is an optional parameter that allows you to initialize the SDK with the user's email address.
 */
const email = '[email protected]';

/**
 * User Data: This object contains personal information about the user, such as their first name, last name, date of birth, and email.
 */
const userData = {
  firstName: 'John',
  lastName: 'Doe',
  dob: '1990-01-01',
  email: email
};

/**
 * Government Data: This object contains government-issued identifiers such as BVN, driver's license, NIN, and voter ID.
 */
const govData = {
  bvn: 'your-bvn',
  dl: 'your-dl',
  nin: 'your-nin',
  vnin: 'your-vnin'
};

/**
 * Government ID: This object contains various types of government-issued IDs, such as national ID, passport, driver's license, voter ID, and others.
 */
const govId = {
  national: 'your-national-id',
  passport: 'your-passport-id',
  dl: 'your-dl-id',
  voter: 'your-voter-id',
  nin: 'your-nin-id',
  others: 'your-others-id'
};

/**
 * Location: This object contains the latitude and longitude of the user's location, which can be used for address verification.
 */
const location = {
  latitude: 'your-latitude',
  longitude: 'your-longitude'
};

/**
 * Business Data: This object contains business-related information, such as the CAC (Corporate Affairs Commission) registration number.
 */
const businessData = {
  cac: 'your-cac'
};

/**
 * Address: This is the user's address, which can be used for address verification.
 */
const address = 'your-address';

/**
 * Metadata: This object contains additional key-value pairs that can be used to pass custom data to the SDK.
 */
const metadata = {
  key1: 'value1',
  key2: 'value2'
};

/**
 * to launch the flow only [widgetId] is mandatory
 * @returns - the Promise of the result, promise
 * will return a status that you can use to track
 * the immidiate progress.
 * @throws - an error if the Dojah KYC flow fails
*/
launchDojahKyc(
      widgetId,
      ref,
      mail,
      userData,
      govData,
      govId,
      location,
      businessData,
      address,
      metadata)
.then((status) => {
  console.log('Result: ', status);
  switch(result){
    case 'approved':
      //kyc approved
      console.log('KYC Approved');
      break;
    case 'pending':
      //kyc pending
      console.log('KYC Pending');
      break;
    case 'failed':
      //kyc failed
      console.log('KYC Failed');
      break;
    case 'closed':
      //user has cancelled the KYC
      console.log('KYC Closed');
  }
});

SDK Parameters

• WidgetID - a REQUIRED parameter. You get this ID when you sign up on the Dojah platform, follow the next step to generate your WidgetId.
• Reference ID - an OPTIONAL parameter that allows you to initialize the SDK for an ongoing verification.
• Email Address - an OPTIONAL parameter that allows you to initialize the SDK for an ongoing verification.
• ExtraUserData - an OPTIONAL parameter that allows you to pass custom data to the SDK.

How to Get a Widget ID

To use the SDK, you need a WidgetID, which is a required parameter for initializing the SDK. You can obtain this by creating a flow on the Dojah platform. Follow these steps to configure and get your Widget ID:

1. Log in to your Dojah Dashboard: If you don’t have an account, sign up on the Dojah platform.

2. Navigate to the EasyOnboard Feature: Once logged in, find the EasyOnboard section on your dashboard.

3. Create a Flow:

    - Click on the 'Create a Flow' button.
    - Name Your Flow: Choose a meaningful name for your flow, which will help you identify it later.

4. Add an Application:

    - Either create a new application or add an existing one.
    - Customise your widget with your brand logo and color by selecting an application.

5. Configure the Flow:

    - Select a Country: Choose the country or countries relevant to your verification process.
    - Select a Preview Process: Decide between automatic or manual verification.
    - Notification Type: Choose how you’d like to receive notifications for updates (email, SMS, etc.).
    - Add Verification Pages: Customize the verification steps in your flow (e.g., ID verification, address verification, etc.).

6. Publish Your Widget: After configuring your flow, publish the widget. Once published, your flow is live.

7. Copy Your Widget ID: After publishing, the platform will generate a Widget ID. Copy this Widget ID as you will need it to initialize the SDK as stated above.

TroubleShooting

Android ProGuard/R8 Configuration for Release Builds

When building your Android application in release mode with code shrinking (R8/ProGuard) enabled, you might encounter issues where the SDK or its dependencies fail to function correctly. This happens because R8, the default code shrinker, might remove classes or methods that are used by the SDK but aren't explicitly referenced in a way R8 can detect.

If you experience crashes or unexpected behavior related to missing classes (often indicated by errors like ClassNotFoundException or Missing classes detected while running R8), you'll need to add specific "keep" rules to your project's ProGuard configuration.

How to Apply ProGuard Rules

Locate your ProGuard file: In your Flutter project, navigate to android/app/proguard-rules.pro. If this file doesn't exist, create it.

Add the necessary rules: Open the proguard-rules.pro file and add the following lines. These rules instruct R8 to preserve the essential components of the Dojah SDK and its underlying libraries during the build process.

# These are essential for React Native's internal mechanisms and module linking.
-keepclassmembers class com.facebook.react.bridge.JavaModule$$Props { *; }
-keepclassmembers class com.facebook.react.bridge.ModuleSpec { *; }
-keepclassmembers class * implements com.facebook.react.bridge.JavaScriptModule { *; }
-keepclassmembers class * implements com.facebook.react.bridge.NativeModule { *; }

# Prevents the stripping of unused methods in classes that are accessed dynamically.
-keep public class * extends com.facebook.react.bridge.ViewManager { *; }
-keep public class * extends com.facebook.react.uimanager.ViewManager { *; } # Older versions might use this

# Keep React Native module classes and their constructors.
# This is crucial for autolinking and manual linking.
-keep class * implements com.facebook.react.bridge.NativeModule {
    <init>(...);
}
-keep class * extends com.facebook.react.bridge.BaseJavaModule {
    <init>(...);
}
-keep class * extends com.facebook.react.uimanager.ViewManager {
    <init>(...);
}

# Standard dontwarn rules for common React Native dependencies
-dontwarn com.facebook.react.**
-dontwarn com.facebook.jni.**
-dontwarn com.facebook.soloader.**
-dontwarn com.facebook.yoga.**
-dontwarn javax.annotation.**

# Keep gRPC-related classes
-keep class io.grpc.** { *; }
-keep class com.google.android.libraries.places.** { *; }


-keepnames class io.grpc.internal.**
-keepclassmembers class io.grpc.internal.** { *; }
-dontwarn io.grpc.**


-keep class com.dojah.kyc_sdk_kotlin.domain.** { *; }
-keep class com.dojah.kyc_sdk_kotlin.core.Result

#For retrofit
-keepattributes Signature, InnerClasses, EnclosingMethod
-keepattributes RuntimeVisibleAnnotations, RuntimeVisibleParameterAnnotations
-keepattributes AnnotationDefault
-keepclassmembers,allowshrinking,allowobfuscation interface * {
    @retrofit2.http.* <methods>;
}
-dontwarn javax.annotation.**
-dontwarn kotlin.Unit
-dontwarn retrofit2.KotlinExtensions
-dontwarn retrofit2.KotlinExtensions$*
-if interface * { @retrofit2.http.* <methods>; }
-keep,allowobfuscation interface <1>
-keep,allowobfuscation,allowshrinking interface retrofit2.Call
-keep,allowobfuscation,allowshrinking class retrofit2.Response
-keep,allowobfuscation,allowshrinking class kotlin.coroutines.Continuation

#For Okio
-dontwarn org.codehaus.mojo.animal_sniffer.*

#For Gson
-keep class sun.misc.Unsafe { *; }
-keep class com.google.gson.examples.android.model.** { *; }

#For Glide
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep class * extends com.bumptech.glide.module.AppGlideModule {
 <init>(...);
}
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
-keep class com.bumptech.glide.load.data.ParcelFileDescriptorRewinder$InternalRewinder {
  *** rewind();
}

Ensure ProGuard is enabled: Verify that proguardFiles is pointing to the default Android ProGuard rules and your custom proguard-rules.pro file. This tells R8 to use your added rules. Your release build type block should look similar to this:

android {
    buildTypes {
        release {
            // ... other configurations like signingConfig
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}