React Native

This guide helps you to integrate the Passbase SDK into your React Native project

General

To integrate the Passbase Package you first need to sign up on our developer dashboard. Integration of the Passbase React Native Package follows a few simple steps:

  1. Install the package in your project

  2. Initialization of the package with your API key

  3. Start a new verification process

  4. Handling verifications

  5. UI Customizations

1. Install the Package

At the root level of your project, install the package with yarn or npm inside the terminal:

# yarn
yarn add @passbase/react-native-passbase
# npm
npm i @passbase/react-native-passbase -s

For React Native <0.60

If your React Native version is larger than >= 0.60, you can ignore this step. Otherwise, please run the following command to link the package:

react-native link @passbase/react-native-passbase

iOS Specific Steps

Please follow these steps to complete the installation and integrate the SDK in the iOS project.

Adding Sources to Podfile

Navigate inside your iOS project folder and add the following three lines at top of the Podfile. You need to do this step to tell the Cocoapods where the Passbase iOS SDK is (our iOS SDK is a closed source project). If you forget this step, Cocoapods won't find our SDK.

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/passbase/zoom-cocoapods-specs.git'
source 'https://github.com/passbase/cocoapods-specs.git'

The minimum iOS version is 11.0. Make sure to include this in the Podfile.

platform :ios, '11.0'

Then, navigate inside the terminal into your project folder (cd ios) and run the following command to install the Passbase iOS SDK as a dependency:

pod install

pod install can take longer (up to 20 minutes) depending upon the speed of you internet. You can monitor the network activity in the activity monitor.

Example of a complete Podfile

# Example of a Podfile
# 1. Add this here
source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/passbase/zoom-cocoapods-specs'
source 'https://github.com/passbase/cocoapods-specs.git'
# 2. Add the platform requirement to at least iOS 11
platform :ios, '11.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
target 'ReactNativeTest' do
# Pods for ReactNativeTest
# ... (not all listed)
target 'ReactNativeTestTests' do
inherit! :search_paths
# Pods for testing
end
use_native_modules!
end
target 'ReactNativeTest-tvOS' do
# Pods for ReactNativeTest-tvOS
target 'ReactNativeTest-tvOSTests' do
inherit! :search_paths
# Pods for testing
end
end

Create Objective-C Bridging if your iOS project is in Objective-C

After the pods are installed, open your project's .xcworkspace file in Xcode. If you have an Objective-C project, add a blank Swift file to your project (File -> New -> Swift File), with a bridging header (it will prompt you to auto-create one).

1. right click on project's name directory & select new file.
2. select swift file & click next
3. give name to your file & click Create
4. select Create Bridging Header

Adding Camera Permissions in Info.plist

If you made it here, you successfully installed the Passbase SDK for iOS. Now let's adjust your last settings and start your first verification.

Please add the following permissions to your app's Info.plist, so that the Passbase iOS SDK can access your users' cameras, to run a verification. You can do it in the property list view or by code:

Right click somewhere outside the table and select Add Row. Now just type Privacy and add a Camera Usage Description + explain why you need to access the camera. Repeat the same step for Photo Library.

If you are more comfortable with code, right click on Info.plist and select Open As -> Source Code. Add the lines below somewhere inside the <dict> </dict>

<!-- permission strings to be include in info.plist -->
<key>NSCameraUsageDescription</key>
<string>Please give us access to your camera, to complete the verification.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Please give us access to your photo library to verify you.</string>

You have successfully finished setting up the Passbase iOS SDK! 🎉

Android Specific Steps

After installing the Passbase React Native package with yarn or npm, please complete the following steps to set up the Android environment correctly:

Adding Kotlin, Maven and minSdkVersion

Note: Make sure your Android Studio also supports Kotlin. As of this writing, Android Studio Version 3.5.1 has Kotlin support. If you're using an older version, you can install Kotlin support under Android Studio → Preferences… → Plugins → Browse Repository → Type “Kotlin” in search box → Install

Kotlin support is required in the main Android project. Please add the following lines to your project'sandroid/build.gradle file:

  1. Set minSdkVersion to 21 or higher

  2. Set kotlin_version to "1.3.21" or higher

  3. Add in dependencies the line classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")

  4. Add in repositories the line maven { url 'http://maven.facetec.com' }

Code Example

// In the different lines to your projcet's build.gradle file
buildscript {
ext {
...
minSdkVersion = 21 // 1. Add minSdkVersion
kotlin_version = "1.3.21" // 2. Add kotlin_version
}
dependencies {
...
// 3. Add classpath
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
allprojects {
repositories {
...
// 4. Add maven block
maven { url 'http://maven.facetec.com' }
}
}

Sync the gradle & run. You've successfully installed the Passbase SDK for Android! 🎉

2. Initialize the SDK

Passbase uses API keys to allow access to the SDK and routes it back to your dashboard. You need to register on our website using your publishable API key from your developer dashboard's API settings. If you don't have a developer account yet, you can create one here: developer dashboard.

First, add the following import statement to the top: import { PassbaseModule } from '@passbase/react-native-passbase'

Then, initialize the SDK with your own API key. In promise based implementation like in the code snippet below, you need to replace YOUR_PUBLISHABLE_API_KEY for your own API key from your developer dashboard:

const res = await PassbaseModule.init(
'YOUR_PUBLISHABLE_API_KEY',
'EMAIL',
{ // object of String:String based additional Params you want, **must be string (key, value) e.g.
"userId":"a2ab4-f2jc4-k2dd4-1fa3x"
}
)

Please use the publishable API key for all integrations. The secret key should never be exposed or used in a web integration or mobile app since it can accesas sensitive user data if leaked!

In the example below you can see both a Promise based & Callback based approach for initializing the SDK:

Type

Method

Promise Based

init(apiKey, email, additionParams)

Callback Based

init(apiKey, email, additionParams, onSuccess, onFailure)

You can find an example implementation with both types below:

import { PassbaseModule } from '@passbase/react-native-passbase'; // at the top import
// promise based implementation
const res = await PassbaseModule.init(
'YOUR_PUBLISHABLE_API_KEY',
'EMAIL',
{ // object of String:String based additional Params you want, **must be string (key, value) e.g.
"userId":"a2ab4-f2jc4-k2dd4-1fa3x"
}
)
if (res && res.success) {
// Do your stuff here, you have successfully initialized.
} else {
// check res.message for the error message
}
//Callback based implementation
PassbaseModule.init(
'YOUR_PUBLISHABLE_API_KEY',
'EMAIL',
{
// String based additional Params you want, **must be string (key, value)
"userId":"a2ab4-f2jc4-k2dd4-1fa3x"
},
(res) => { // it is onSuccess callback.
// do your stuff here.
},
(err) => { // it is onError callback
// oops! something went wrong. analyze `err`
}
)

You have successfully initialized the Passbase SDK! 🎉

3. Start Verification

Please make sure, you've initialized the SDK before starting a new verification. Otherwise you can't start the verification.

Keep in mind that in order to successfully finish a verification, you need to pass our liveness detection. Hence, if you develop on a Simulator (e.g. iPhone Simulator via Xcode), you won't be able to get past this step. Therefore please use a real device (e.g. an attached iPhone) to fully test and develop with our SDK.

There are two ways to start verification.

  1. Using PassbaseButton component

  2. Using startVerification method

Using PassbaseButton component is the simplest way to show ready made Passbase Button UI and start the verification process. The following code snippet shows how to use PassbaseButton component provided by the SDK:

import { PassbaseButton } from '@passbase/react-native-passbase'; // import statement on top
...
<PassbaseButton style={{ backgroundColor: 'white' }}/>
...

This will render the Passbase Button on UI and will automatically start verification on its press.

If you want to make your own UI or button but want to start verification programmatically, you can use the method,startVerification. As previously mentioned, you can receive callbacks or you can use a promise based approach:

  1. Callback based or

  2. Promise based

Below are examples of how to start the verification based on promise or callback:

Type

Method

Promise Based

startVerification()

Callback Based

startVerification(onSuccess, onError)

You can find an example implementation using both methods below:

import { PassbaseModule } from '@passbase/react-native-passbase' // at the top import
// Promise based method call
const res = await PassbaseModule.startVerification();
if (res.success) {
// successfully started verification.
}
//Callback based call
PassbaseModule.startVerification((res) => {
if (res && res.success) {
// successfully started verification.
}
}, (err) => {
// ooops! something went wrong. analyze `err`
})

You have successfully started your first verification! 🎉

4. Handling Verifications

To recognize if a verification was successful or a user cancelled it you can implement 2 callback functions. These are onCancelPassbase & onCompletePassbase. You can addlisteners to listen for these & based upon the the results these will be triggered.

Method

Description

onCompletePassbase

This callback activates once a user completes the full verification flow. You receive an object called authKey to track the status of the verification. Please see our section about Webhooks and API for more information.

onCancelPassbase

This callback method activates if a user cancels the verification flow. You can use this to see if people drop out of your verification flow.

import { NativeEventEmitter } from 'react-native';
import { PassbaseModule } from '@passbase/react-native-passbase';
// now in your component's componentDidMount lifecycle method
componentDidMount () {
this.subscription = new NativeEventEmitter(PassbaseModule);
this.subscription.addListener('onCancelPassbase', (event) => {
// do your stuff here
})
this.subscription.addListener('onCompletePassbase', (event) => {
// do your stuff here.
// event.authKey can be used for further interactions with passbase server
})
}
// you should removeListeners on componentWillUnmout
componentWillUnmount(){
if (this.subscription) {
this.subscription.removeListener('onCompletePassbase', (event) => {})
this.subscription.removeListener('onCancelPassbase', (event) => {})
}
}

5. UI Customizations

We offer a variety of UI customizations for the button and within verification flow. For example, you can customize the color of the progress bar, button, title text & subtitle text etc.

Customizing styles of the PassbaseButton can be done directly into style prop of the PassbaseButton, like in the code snippet below:

import {PassbaseButton} from '@passbase/react-native-passbase';
...
<PassbaseButton style={{ backgroundColor: '#d2d2d2', width: 300, height: 60 }}/>

Customizations of the UI within the verification flow can be done by following setter methods exposed in PassbaseModule

Make sure you call these customizations after init & before startVerification.

Also make sure to pass valid hexadecimal value as color value. e.g. #ffffff

Attribute

Description

setLoadingIndicatorColor

This is the background color of the loading animation. The default is set to blue.

setActionButtonBgColor

This is the background color of the action button. The default is set to blue.

setActionButtonDeactivatedBgColor

This is the background color of the deactivated action button. The default is set to a lighter blue or lighter color from setActionButtonBgColor.

setActionButtonTextColor

This is the text color of the action button. The default is set to a lighter white.

setDisclaimerTextColor

This is the text color of the disclaimer, that the users agree to. The default is set to gray.

setTitleTextColor

This is the text color of the title. The default is set to black.

setSubtitleTextColor

This is the text color of the sub title. The default is set to black.

If you'd like to change the color of the progress bar and action button, or the font color of the flow, you can use the example code below before starting the flow:

import {PassbaseModule} from '@passbase/react-native-passbase'; // import on top
//call this after init & before startVerification
PassbaseModule.setLoadingIndicatorColor('#A49E8D')
PassbaseModule.setActionButtonBgColor('#504136')
PassbaseModule.setActionButtonDeactivatedBgColor('#d2d2d2')
PassbaseModule.setActionButtonTextColor('#ffffff')
PassbaseModule.setDisclaimerTextColor('#800000')
PassbaseModule.setTitleTextColor('#008080')
PassbaseModule.setSubtitleTextColor('#B2E6D4')

Example & Demo App

You can find a code example of a whole class in the code section below. Also we have a full example integration app hosted on our Github Page.

React Native Demo App

import React from 'react';
import { NativeEventEmitter, Platform, View, StyleSheet, TouchableOpacity, Text, Alert, ActivityIndicator } from 'react-native';
import { PassbaseModule, PassbaseButton } from '@passbase/react-native-passbase';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
initSucceed: false,
loading: false
};
}
async componentDidMount() {
this.subscription = new NativeEventEmitter(PassbaseModule);
this.subscription.addListener('onCancelPassbase', (event) => {
console.log("##onCancelPassbase##", event)
})
this.subscription.addListener('onCompletePassbase', (event) => {
console.log("##onCompletePassbase##", event)
})
}
handlePassbaseClick = async () => {
const { initSucceed, loading } = this.state
if (loading ) {
return
}
this.setState({loading: true}, async () => {
if (initSucceed) {
// Promise based method call
const res = await PassbaseModule.startVerification();
this.setState({loading: false})
if (!res.success) {
alert('something went wrong. while starting verification.')
}
//Callback based call
// PassbaseModule.startVerification((res) => {
// if (res && res.success) {
// this.setState({loading: false})
// }
// console.log('StartVerification: ', res)
// }, (err) => {
// console.log('errorStartVerification: ', err)
// })
} else {
// promise based implementation
const res = await PassbaseModule.init(
'YOUR_PUBLISHABLE_API_KEY',
'', // EMAIL HERE OR EMPTY STRING.
{}
)
console.log("initRes: ", res)
if (res && res.success) {
PassbaseModule.setLoadingIndicatorColor('#A49E8D')
PassbaseModule.setActionButtonBgColor('#504136')
PassbaseModule.setActionButtonDeactivatedBgColor('#d2d2d2')
PassbaseModule.setActionButtonTextColor('#ffffff')
PassbaseModule.setDisclaimerTextColor('#800000')
PassbaseModule.setTitleTextColor('#008080')
PassbaseModule.setSubtitleTextColor('#B2E6D4')
this.setState({initSucceed: true, loading: false})
}
//Callback based implementation
// PassbaseModule.init(
// 'YOUR_PUBLISHABLE_API_KEY',
// '', // EMAIL HERE OR EMPTY STRING.
// {},
// (res) => {
// console.log('***onSuccess:*** ', res)
// if (res.success) {
// if (res && res.success) {
// this.setState({initSucceed: true, loading: false})
// }
// }
// },
// (err) => {
// this.setState({loading: false})
// console.log('onFailure: ', err)
// }
// )
}
})
}
render() {
const { initSucceed, loading } = this.state;
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}
onPress={this.handlePassbaseClick}>
<Text style={styles.btnText}>
{initSucceed ? 'start verification' : 'initialize SDK'}
</Text>
{
loading && <View style={styles.loadingContainer}>
<ActivityIndicator size={'large'}/>
</View>
}
</TouchableOpacity>
{
initSucceed && <PassbaseButton style={{ margin: 10, backgroundColor: 'white' }}/>
}
</View>
);
}
componentWillUnmount(){
if (this.subscription)
this.subscription.removeListener('onCompletePassbase', (event) => {
console.log("##removing listener didCompletePassbaseVerification##", event)
})
this.subscription.removeListener('onCancelPassbase', (event) => {
console.log("##removing listener didCancelPassbaseVerification##", event)
})
}
}
export default App;
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center'
},
button: {
width: 250,
padding: 10,
margin: 10,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center'
},
btnText: {
color: 'white',
fontWeight: 'bold'
},
component: {
width: 100,
height: 100,
margin: 5
},
loadingContainer: {
position: 'absolute',
left: 0, right: 0, top: 0, bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});

You have completed the integration for React Native! 🎉

Troubleshooting

(Sometimes) Adding ZoomAuthenticationHybrid.framework

If you experience a crash with the error, "ZoomAuthenticationHybrid.framework, no image present," please add it manually. Otherwise, skip this step.

Sometimes, there is a bug where we need to add another framework to our iOS Project. Try to build and run your project. If the above bug occurs, please download the ZoomAuthenticationHybrid.framework from this link.

Unzip the file, locate the ZoomAuthenticationHybrid.framework file in the folder and copy it to your ios directory in the react native project.

Next, open your project's xcworkspace file and drag the ZoomAuthenticationHybrid.framework inside the left pane to your project's dependencies in XCode.

Tick the box for Copy items if needed

Add a copy file phase to your Xcode project and have ZoomAuthenticationHybrid.framework copied to destination Frameworks

For Xcode >= 11 only

Go to General -> Frameworks, Libraries, and Embedded Content & Select Embed & Sign for ZoomAuthenticationHybrid.framework.

Now clean project & build & run.