Orba One
Search…
React Native
This document explains how to integrate the Orba One authentication flow into your React Native application.
1. Installation
1
npm install @orbaone/react-native-orba-one
2
# OR
3
yarn add @orbaone/react-native-orba-one
Copied!
2. Linking
Linking is automatic, however, you still need to perform a few steps for iOS.
iOS
The Orba One SDK requires that the following permissions be added to the application's
info.plist file:1
<key>NSCameraUsageDescription</key>
2
<string>Required for Facial and Document capture.</string>
3
<key>NSMicrophoneUsageDescription</key>
4
<string>Required for Audio capture.</string>
Copied!
- Ensure that
use_frameworks!is added to your app target in your Podfile. - Run
pod installto retrieve the sdk.
Android
No additional setup is necessary.
3. Usage
1
import { OrbaOne, OrbaOneConfig, OrbaOneFlowStep, OrbaOneDocuments } from '@orbaone/react-native-orba-one';
Copied!
4. Starting the Verification Flow
1
// Initializing the Flow with default settings
2
const init = await OrbaOne.init('publishable-api-key', 'applicant-id');
3
if(init.success) {
4
console.log(init.message)
5
}
6
7
// Starting the Flow
8
const res = await OrbaOne.startVerification();
9
if(res.success) {
10
console.log(res.message)
11
}
Copied!
5. Adding Customizations
1
// Customizing the Flow
2
const verificationConfig = OrbaOneConfig.setFlowSteps([
3
OrbaOneFlowStep.intro, // Welcome step - gives your user a short overview of the flow. [Optional, Default].
4
OrbaOneFlowStep.identification, // Photo ID step - captures the user's identification document. [Default].
5
OrbaOneFlowStep.face, // Selfie Video step - captures a video of the user for liveness detection. [Default].
6
OrbaOneFlowStep.complete // Final Step - informs the user that the verification process is completed. [Optional].
7
])
8
// Customizing the Theme
9
.setAppearance({
10
colorPrimary: '#000000' <Hex String>,
11
colorButtonPrimary: '#000000' <Hex String>,
12
colorTextPrimary: '#000000' <Hex String>,
13
colorButtonPrimaryPressed: '#000000' <Hex String>,
14
enableDarkMode: true <Bool>
15
})
16
// Customizing the Document Capture Step
17
.setExcludeDocument([
18
OrbaOneDocuments.passport, // this will remove the Passport option
19
OrbaOneDocuments.driverslicense, // this will remove the Driver's License option
20
OrbaOneDocuments.nationalid // this will remove the National ID option
21
])
22
// Customizing the Country List
23
.setExcludeCountry([
24
'JM', // this will remove Jamaica from the list of available countries
25
'US' // this will remove the United States from the list of available countries
26
])
27
.build();
28
29
const init = await OrbaOne.init('publishable-api-key', 'applicant-id', verificationConfig);
Copied!
6. Handling Verifications
1
componentDidMount() {
2
OrbaOne.onCompleteVerification((event: any) => {
3
console.log(event.authKey)
4
});
5
6
OrbaOne.onCancelVerification((event: any) => {
7
console.log(event.message)
8
});
9
}
10
11
componentWillUnmount = () => {
12
OrbaOne.removeListeners();
13
};
Copied!
Troubleshooting
When installing or using
@orbaone/react-native-orba-one you may encounter the following problems:[iOS] - If you are using
@react-native-firebase in your project, along with use_frameworks!, you may encounter an error with RNFirebase. To avoid this, add $RNFirebaseAsStaticFramework = true at the top of your Podfile.Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
Last modified 1mo ago