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.
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>"
},
}
Generate an SDK token
SDK tokens are required to authenticate the SDKs for Studio workflows, generated by making a call to the Onfido API.
$ curl https://api.eu.onfido.com/v3.6/sdk_token \
-H 'Authorization: Token token=<YOUR_API_TOKEN>' \
-F 'applicant_id=<APPLICANT_ID>' \
-F 'application_id=<YOUR_APPLICATION_BUNDLE_IDENTIFIER>'
SDK tokens expire after 90 minutes. The native iOS and Android facility to configure an expiration handler is not currently supported for the React Native SDK.
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.