Before integrating Passbase, we suggest you read first our best practice on how to integrate Passbase in your system in the overview section and complete the initial setup steps.
You can either follow the integration guide or watch the integration tutorial that shows the same steps. Please be aware that some property or function names might have slightly changed with newer versions. Make sure to compare your implementation with the latest code snippets here in the documentation.
At the root level of your project, install the package with yarn or npm inside the terminal:
# yarnyarn add @passbase/react-native-passbase@2.1.1# npmnpm i @passbase/react-native-passbase@2.0.7 -s
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
Please follow these steps to complete the installation and integrate the SDK in the iOS project.
Navigate inside your iOS project folder and add the following lines at top of the Podfile. (If you con't have a Podfile yet, please create one by running the commansd pod init
inside the ios folder)
source 'https://github.com/CocoaPods/Specs.git'source 'https://github.com/passbase/zoomauthentication-cocoapods-specs.git'source 'https://github.com/passbase/cocoapods-specs.git'source 'https://github.com/passbase/microblink-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 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 Podfile# 1. Add this heresource 'https://github.com/CocoaPods/Specs.git'source 'https://github.com/passbase/zoomauthentication-cocoapods-specs.git'source 'https://github.com/passbase/cocoapods-specs.git'source 'https://github.com/passbase/microblink-cocoapods-specs.git'# 2. Add the platform requirement to at least iOS 11platform :ios, '11.0'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'target 'ReactNativeTest' douse_frameworks!# Pods for ReactNativeTest# ... (not all listed)target 'ReactNativeTestTests' doinherit! :search_paths# Pods for testingenduse_native_modules!endtarget 'ReactNativeTest-tvOS' do# Pods for ReactNativeTest-tvOStarget 'ReactNativeTest-tvOSTests' doinherit! :search_paths# Pods for testingendend
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).
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 a user's camera to run a verification. You can do this in the property list view or by code.
Right-click somewhere outside the table and select Add Row
. Now add the entries like below.
Or if you prefer to do this step 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! 🎉
After installing the Passbase React Native package with yarn
or npm
, please complete the following steps to set up the Android environment correctly:
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:
Set minSdkVersion
to 21
or higher
Set kotlin_version
to "1.3.21"
or higher
Add in dependencies
the line classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
Add in repositories the line maven { url 'https://button.passbase.com/__android' }
// In the different lines to your projcet's build.gradle filebuildscript {ext {...minSdkVersion = 21 // 1. Add minSdkVersionkotlin_version = "1.3.21" // 2. Add kotlin_version}dependencies {...// 3. Add classpathclasspath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"}}allprojects {repositories {...// 4. Add maven blockmaven { url 'https://button.passbase.com/__android' }}}
Sync the gradle & run. You've successfully installed the Passbase SDK for Android! 🎉
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!
First, add the following import statement to the top of the component where you want to render Passbase: import { PassbaseSDK } from '@passbase/react-native-passbase'
Then, initialize Passbase with your own API key. You can do this via a promise like in the code snippet below, and replace YOUR_PUBLISHABLE_API_KEY
for your own publishable API key from your developer dashboard's API settings:
const res = await PassbaseSDK.initialize('YOUR_PUBLISHABLE_API_KEY')
You can initialize the SDK either via a promise or a callback. The methods for these two possibilities slightly differ:
Type | Method |
Promise Based |
|
Callback Based |
|
You can find an example implementation with both types below:
import { PassbaseSDK } from '@passbase/react-native-passbase';// 1. promise based implementationconst res = await PassbaseSDK.initialize('YOUR_PUBLISHABLE_API_KEY')if (res && res.success) {// Do your stuff here, you have successfully initialized.} else {// check res.message for the error message}// 2. Callback based implementationPassbaseSDK.initialize('YOUR_PUBLISHABLE_API_KEY',(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! 🎉
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.
Either by using a PassbaseButton
component
Or by using the startVerification
method
Using a PassbaseButton
component is the simplest way to show a Passbase Button and start the verification process. The following code snippet shows how to use the PassbaseButton
component inside your components render method.
import { PassbaseButton } from '@passbase/react-native-passbase'; // import statement on top// ...render() {return (<PassbaseButton style={{ backgroundColor: 'white' }}/>)}
If you want to make your own UI or want to start verification programmatically, you can use thestartVerification
method. As previously mentioned, you can receive callbacks or you can use a promise based approach. Below are examples of how to start the verification based on promise or callback:
Type | Method |
Promise Based |
|
Callback Based |
|
You can find an example implementation using both methods below:
import { PassbaseSDK } from '@passbase/react-native-passbase' // at the top import// Promise based method callconst res = await PassbaseSDK.startVerification();if (res.success) {// successfully started verification.}//Callback based callPassbaseSDK.startVerification((res) => {if (res && res.success) {// successfully started verification.}}, (err) => {// ooops! something went wrong. analyze `err`})
You have successfully started your first verification! 🎉
Often it is useful to know if a users completes the verification or cancels it. For this, you can implement the following callback methods:
Method | Description |
| This callback method is triggered once a user starts the verification flow. |
| This callback method is triggered once a user completes the full verification flow. You receive an object called |
| This callback method is triggered when a user canceled the verification flow or the verification finished with an error. You can use this to find out if people dropped out of your verification flow. Error codes:
|
You can subscribe to those events like in the code example below.
import { NativeEventEmitter } from 'react-native';import { PassbaseSDK } from '@passbase/react-native-passbase';// now in your component's componentDidMount lifecycle methodcomponentDidMount () {this.subscription = new NativeEventEmitter(PassbaseSDK);this.subscription.addListener('onError', event => {// do your stuff here// event.errorCode});this.subscription.addListener('onFinish', event => {// do your stuff here.// event.identityAccessKey can be used for further interactions with passbase server});this.subscription.addListener('onStart', event => {// do your stuff here.});}// you should removeListeners on componentWillUnmoutcomponentWillUnmount(){if (this.subscription) {this.subscription.removeListener('onError', (event) => {})this.subscription.removeListener('onFinish', (event) => {})this.subscription.removeListener('onStart', (event) => {})}}
We recommend the following process for handling identity verifications:
Obtain the identityAccessKey
of a successful completed identity verifications from the callback metho and save them to your db e.g. a user's profile
Set up webhooks to be notified once the identity verification has been processed by our system. Also once you have approved or declined the user in your dashboard
Now you can use your own backend to query the details about this identity verification with e.g. the Get Identity call to obtain the details
Our SDK currently supports a set of customization options which will influence the appearance. To customize the verification flow, please navigate to your developer dashboard's customization section. Here you can choose amongst a variety of colors, fonts, accepted countries & much more.
We also offer a darkmode, which will be automatically started if a user has activated this in his system settings.
We support a variety of different languages for the verification flow. As of this writing more than 10 including (English, Spanish, German & many more). If one is missing and you want us to add support for it, please reach out to our customer support.
The SDK automatically detects the language of the user's phone settings. If we support the language, the verification flow will be set to it. Otherwise the default is English.
If you are using ProGuard you might need to add the following options:
-dontwarn okio.**-dontwarn retrofit2.Platform$Java8-dontwarn com.facetec.zoom.sdk.**
to ProGuard exceptions
buildTypes {release {minifyEnabled trueproguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'}}
You can find a code example of a whole class in the code section below. Also we have a full example on our Github: React Native Demo App
import React from 'react';import { NativeEventEmitter, Platform, View, StyleSheet, TouchableOpacity, Text, Alert, ActivityIndicator } from 'react-native';import { PassbaseSDK, 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(PassbaseSDK);this.subscription.addListener('onError', (event) => {console.log("##onError##", event)})this.subscription.addListener('onFinish', (event) => {console.log("##onFinish##", event)})this.subscription.addListener('onStart', (event) => {console.log("##onStart##", event)})}handlePassbaseClick = async () => {const { initSucceed, loading } = this.stateif (loading ) {return}this.setState({loading: true}, async () => {if (initSucceed) {// Promise based method callconst res = await PassbaseSDK.startVerification();this.setState({loading: false})if (!res.success) {alert('something went wrong. while starting verification.')}} else {// promise based implementationconst res = await PassbaseSDK.init('YOUR_PUBLISHABLE_API_KEY')console.log("initRes: ", res)if (res && res.success) {this.setState({initSucceed: true, loading: false})}}})}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('onFinish', (event) => {console.log("##removing listener onFinish##", event)})this.subscription.removeListener('onError', (event) => {console.log("##removing listener onError##", event)})this.subscription.removeListener('onStart', (event) => {console.log("##removing listener onStart##", 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! 🎉
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
Go to General -> Frameworks, Libraries, and Embedded Content & Select Embed & Sign
for ZoomAuthenticationHybrid.framework.
Now clean project & build & run.
The problem is both OneSignal and Passbase are requiring different versions of some of services from com.google.firebase
& com.google.android.gms
groups.
Add resolutionStrategy
to the project level build.gradle
inside the allProjects
block as follows:
allprojects {repositories {// other repositories ...maven { url 'https://maven.google.com' } // THIS ONE ADDED FOR ONE-SIGNALgoogle()jcenter()maven { url 'https://jitpack.io' }maven { url 'https://button.passbase.com/__android' }}configurations.all { // THIS BLOCK ADDED FOR ONE-SIGNAL & PASSBASE CONFLICTSresolutionStrategy {eachDependency { DependencyResolveDetails details ->if (details.requested.group == 'com.google.firebase') {details.useVersion "+"}if (details.requested.group == 'com.google.android.gms') {details.useVersion "+"}}}}}
sync
the project and then build
and run
If you have similar error in your project:
Could not determine the dependencies of task ':app:lintVitalRelease'.> Could not resolve all artifacts for configuration ':app:releaseAndroidTestRuntimeClasspath'.> Could not resolve io.intercom.android:intercom-sdk-base:5.+.Required by:project :app > project :react-native-intercom> Failed to list versions for io.intercom.android:intercom-sdk-base.> Unable to load Maven meta-data from https://button.passbase.com/__android/io/intercom/android/intercom-sdk-base/maven-metadata.xml.> Could not get resource 'https://button.passbase.com/__android/io/intercom/android/intercom-sdk-base/maven-metadata.xml'.> Could not GET 'https://button.passbase.com/__android/io/intercom/android/intercom-sdk-base/maven-metadata.xml'. Received status code 403 from server: Forbidden
A workaround may help:
maven {url 'https://button.passbase.com/__android'content {excludeGroupByRegex "io\\.intercom.*"}}
sync
the project and then build
and run
If you experience that camera is not starting in release build make sure you set enableProguardInReleaseBuilds in build.gradle to false. Or add exeptions as described in ProGuard section above.