Onfido logo home page
Watch a demo
Get in touch
Arrow back Back to guides

Onfido Studio: React Native SDK integration

Start here

This is an introductory guide to integrating Onfido Studio - our drag and drop interface for building, managing, and deploying identity verification journeys - with Onfido’s React Native SDK. For more general information regarding Onfido Studio, please see our product guide.

Getting started

All of the interactive tasks of an end-user’s verification journey designed and built using Onfido Studio are managed by our SDKs.

The Onfido React Native SDK communicates directly and dynamically with active Studio workflows to display the relevant screens to ensure the correct capture and upload of user information, such as identity documents, selfie photos and videos. As a result, the SDK flow will vary depending on the workflow configuration. You won't need to specify any steps directly in the SDK integration as these will be overridden when the workflow run ID is passed into the SDK initialization.

SDK tokens are required to authenticate the SDKs for workflows. You can generate SDK tokens using the Onfido API.

The React Native SDK supports:

  • React Native 0.68+
  • iOS 11+
  • Xcode 13+
  • Android API level 21+

Create a workflow run

As a first step, you will need to create a Workflow Run by making a call to the Onfido API. At a minimum, you will need to provide a workflow_id from a valid, active workflow, as well as an Applicant ID. More details on creating a workflow run can be found in our API reference.

The server will return a workflow run object, with a workflow run ID contained in the response:

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": "<WORKFLOW_RUN_ID>",
  "applicant_id": "<APPLICANT_ID>",
  "workflow_id": "<WORKFLOW_ID>",
  "workflow_version_id": 11,
  "status": "approved",
  "dashboard_url":"https://dashboard.onfido.com/results/<WORKFLOW_RUN_ID>"
  "output": {"prop1": "val_1", "prop2": 10}, 
  "reasons": ["reason_1", "reason_2"],
  "error": null,
  "created_at": "2022-06-28T15:39:42Z",
  "updated_at": "2022-07-28T15:40:42Z",
  "link": {
      "completed_redirect_url": "https://example.onfido.com",
      "expired_redirect_url": "https://example.onfido.com",
      "expires_at": "2022-10-17T14:40:50Z",
      "language": "en_US",
      "url": "https://eu.onfido.app/l/<WORKFLOW_RUN_ID>"
  },
}

Add the SDK dependency

Using npm

The SDK is available on npm and you can include it in your project by running the following script from your project folder:

npm install @onfido/react-native-sdk --save​

Update your Android build.gradle files

Update your build.gradle files to reference the Android SDK, and enable multi-dex. If you build your project using the react-native init, with a build.gradle in the android/ and android/app/ directories, you can run this script to do it:

npm --prefix node_modules/@onfido/react-native-sdk/ run updateBuildGradle

Update your iOS configuration files

Change ios/Podfile to use version 11:

platform :ios, '11.0'

Add descriptions for camera and microphone permissions to ios/YourProjectName/Info.plist:

<plist version="1.0">
<dict>
  <!-- Add these four elements: -->
	<key>NSCameraUsageDescription</key>
	<string>Required for document and facial capture</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>Required for video capture</string>
  <!-- ... -->
</dict>
</plist>

Open Xcode and create an empty Swift file in your project root. For example, if your project is called YourProjectName, you can open it from the command line:

open ios/YourProjectName.xcodeproj

Once Xcode is open, add an empty Swift file:

File > New File > Swift > Next > "SwiftVersion" > Create > Don't create Header

This will update your iOS configuration with a Swift version. All changes are automatically saved, so you can close Xcode.

Initialize the SDK for Studio

Now you can initialize the SDK, using your generated SDK token and workflow run ID.

Build a configuration object

const config = {
  sdkToken: '<YOUR_SDK_TOKEN>',
  workflowRunId: '<YOUR_WORKFLOW_RUN_ID>'
};

Start the flow

Onfido.start(config);
// listen for the result

Handling callbacks

To receive the result from a completed workflow, you should use promises. For example:

Onfido.start(config)
      .then(res => console.warn('OnfidoSDK: Success:', JSON.stringify(res)))
      .catch(err => console.warn('OnfidoSDK: Error:', err.code, err.message));

ATTRIBUTE NOTES
.then Callback that fires when the end user completed all interactive tasks in the workflow. If you have configured webhooks, a notification will be sent to your backend confirming the workflow run has finished. You do not need to create a check using your backend as this is handled directly by the workflow
.error(Error) Callback that fires when an unexpected error occurs

Customizing the SDK

The React Native SDK has multiple customizable features that provide flexibility, while also being easy to integrate. For more detailed documentation, read our SDK customization guide.

UI Customization

The SDK supports UI customization. For more information, please see our SDK customization guide.

Language localization

The SDK also supports language localization. Please refer to the SDK language localization documentation for more details.

Onfido

Our solutions

Onfido uses 256-bit SSL encryption 100% of the time on every device.

BSI ISO/IEC27001

Onfido has been certified by BSI to ISO 27001 under certificate number IS 660122.

© Onfido™, 2022. All rights reserved.
Company Registration Number: 07479524.