React Native SDK

The React Native SDK is a React Native library that allows you to use the OneWelcome Identity Platform Mobile Identity SDKs in your applications.

This article describes how you should get started using the React Native SDK. It outlines how the API is set up, how the React Native SDK generally works, and what the requirements are.

Obtain the Mobile SDK

To begin, ensure you have access to Mobile SDK. To obtain credentials, navigate to the Customer Support Portal and submit a request for access.

• Get access to https://repo.onewelcome.com/artifactory/onegini-sdk
• Use https://github.com/onewelcome/sdk-configurator on your application (instructions can be found there)

Configure your project to use the React Native SDK

Integrate the React Native SDK with an existing React Native project. Follow along using our Native React Example Application

Requirements

Android:

• Minium API level 23
• For more information see Android SDK documentation

iOS:

• Minimum iOS version 13
• For more information see iOS SDK documentation

React Native:

• Minimum version 0.63

Older versions of React Native have not been tested.

Add the plugin to your project

Add the react-native-sdk to your project using npm or yarn.

npm

npm install @onewelcome/react-native-sdk --save

yarn

yarn add @onewelcome/react-native-sdk

Initialize the Mobile SDK

To start working with the plugin, we need to initialize the Mobile SDK by calling startClient. You can pass additional config information here as an argument.

OneWelcomeSdk.startClient()
    .then(() => console.log('Start succeed'))
    .catch(error => console.log('Start failed: ', error.message))


// Start SDK with custom Config
const config: Types.Config = {
  enableFingerprint: true,
  securityControllerClassName:
    'com.onegini.mobile.rnexampleapp.SecurityController',
  enableMobileAuthenticationOtp: true,
  customProviders: [{id: '2-way-otp-api', isTwoStep: true}],
  configModelClassName: null,
};

OneWelcomeSdk.startClient(config)
    .then(() => console.log('Start succeed'))
    .catch(error => console.log('Start failed: ', error.message))

Integrate with Android

Get the Android SDK

The Android SDK is uploaded to a private artifactory repository. In order to obtain credentials, navigate to https://onewelcome.atlassian.net/servicedesk/customer/portals and submit a request for access.

When you have credentials, set the onegini artifactory user and onegini_artifactory_ password at android/gradle.properties or globally for Gradle in ~/gradle/gradle.properties (recommended).

Example gradle.properties

onegini_artifactory_user=<username>
onegini_artifactory_password=<password>

Add this repository to your android/build.gradle for it to be able to download the Native Android SDK.

Example android/build.gradle

allprojects {
    repositories {
                // Previous code here.
        // ...
        if (project.hasProperty('onegini_artifactory_user') && project.hasProperty('onegini_artifactory_password')) {
            maven {
                url "https://repo.onewelcome.com/artifactory/onegini-sdk"
                credentials {
                    username "${onegini_artifactory_user}"
                    password "${onegini_artifactory_password}"
                }
            }
        } else {
            throw new InvalidUserDataException("You must configure the 'artifactory_user' and 'artifactory_password' properties in your project before you can " +
                "build it.")
        }
    }
}

Modify android/app/src/main/AndroidManifest.xml. Add <intent-filter> to your MainActivity for listening for browser redirects, this is how the browser communicates back to the app after successful authentication. The scheme="reactnativeexample" should be changed to your schema (provided by onegini-sdk-configurator):

Example android/app/src/main/AndroidManifest.xml

<intent-filter>
  <action android:name="android.intent.action.VIEW" />

  <category android:name="android.intent.category.DEFAULT"/>
  <category android:name="android.intent.category.BROWSABLE"/>

  <data android:scheme="reactnativeexample"/>
</intent-filter>

Setup the OneWelcome Identity Platform config: Generate a OneginiConfigModel and keystore.bks with the Mobile SDK Configurator. The configurator will put OneginiConfigModel into the RN application's package_classpath.OneginiConfigModel (for example, com.exampleapp.OneginiConfigModel) and the keystore.bks into /res/raw.

After using the configurator, you have two options:

• Keep it as it is.

• If you move OneginiConfigModel from the default location provided by the Mobile SDK configurator, you must specify a custom classpath for OneWelcomeSdk: setConfigModelClassName(className). See the Android setup.

Set up security controller

To change security options, you should create your own instance of SecurityController and pass it to OneWelcomeSdk. By default, debug detection and root detection are enabled in the Mobile SDK. This also means that you cannot run the Mobile SDK on an Android emulator without adjusting these settings. You should add the path to this SecurityController class in the in config when instantiating the Mobile SDK in React Native.

When minifying is enabled, proguard will change the names of classes. This prevents the Mobile SDK from loading a class with reflection. The following rule prevents proguard from modifying the SecurityController class. Ensure you replace the classPath here with the one in your project.

Example add security controller to android/app/proguard-rules.pro

-keep class com.onegini.mobile.rnexampleapp.SecurityController { *; }

Example add SecurityController to project package

package com.rnexampleapp;

@SuppressWarnings({ "unused", "WeakerAccess" })
public final class SecurityController {
  public static final boolean debugDetection = false;
  public static final boolean rootDetection = false;
  public static final boolean debugLogs = true;
}

Integrate with iOS

This section describes how to set up the native iOS SDK and configurations for iOS.

Adding the native SDK

The Mobile SDK is uploaded to the Artifactory repository. To let CocoaPods use an Artifactory repository, you need to install the CocoaPods plugin.

gem install cocoapods-art

The Mobile SDK repository is not a public repository. You must provide credentials to access the repo.

Create a file named .netrc in your Home folder (~/) and add the following contents to it. (Replace the <username> and <password> with the credentials that you use to log in to support.onewelcome.com.).

machine repo.onewelcome.com
   login <username>
   password <password>

Add the OneWelcome Identity Platform CocoaPods repository to your local machine.

pod repo-art add onegini https://repo.onewelcome.com/artifactory/api/pods/cocoapods-public

Update ios/Podfile before the app target.

source 'https://github.com/CocoaPods/Specs.git'
plugin 'cocoapods-art', :sources => ['onegini']

use_frameworks!

platform :ios, "13.0"

Add the following to your post install script in ios/Podfile.

installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings['ENABLE_BITCODE'] = 'NO'
            config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
            config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
        end
    end

Run pod install.

Set up security controller

Add SecurityController.h and SecurityController.m. For more information see iOS SDK security controllers.

Optional: In order to support FaceID or TouchID, add next to ios/<project-name>/info.plist:

<key>NSFaceIDUsageDescription</key>
<string>Application needs access to support authentication with Face/Touch ID</string>

Link React Native code

For React Native version 60.0 or greater:

cd ios && pod install

Link React Native code to Android

1. Open android/app/src/main/java/[...]/MainActivity.java.
2. Add import com.onewelcome.mobile.RNOneWelcomeSdkPackage; to the imports at the top of the file.
3. Add a new RNOneWelcomeSdkPackage() to the list returned by the getPackages() method.
4. Append the following lines to android/settings.gradle:

include ':onewelcome-react-native-sdk'
project(':onewelcome-react-native-sdk').projectDir = new File(rootProject.projectDir,     '../node_modules/onewelcome-react-native-sdk/android')

1. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':onewelcome-react-native-sdk')

Link React Native code to iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name].
2. Go to node_modules ➜ onewelcome-react-native-sdk and add RNOnewelcomeSdk.xcodeproj.
3. In XCode, in the project navigator, select your project. Add libRNOneginiSdk.a to your project's Build Phases ➜ Link Binary With Libraries.
4. Run your project (Cmd+R)<.

React Native SDK release notes

• React Native SDK release notes