berbix-react-native

React Native SDK for use with the Berbix service.

Usage no npm install needed!

<script type="module">
  import berbixReactNative from 'https://cdn.skypack.dev/berbix-react-native';
</script>

README

Table of contents

Overview

The Berbix React Native SDK is a React Native wrapper around the Berbix native mobile SDKs for Android and iOS. It enables customers of Berbix to quickly get up and running with best-in-class identity verification in a React Native setting. If you're interested in using Berbix for identity verification and you are not already a customer, you can learn more at berbix.com.

  • Supports iOS 11+
  • Supports Android API level 21+

Getting started

1. Obtaining a client token

In order to start integration, you will need to generate a short-lived client token. The Berbix Verify API needs to be integrated in your backend. See Create a Transaction documentation.

2. Adding the Berbix React Native SDK to your project

This SDK cannot be used with Expo; If your project already uses Expo, you will need to follow the eject process.

2.1 Installation

$ npm install berbix-react-native

2.2 iOS

Change ios/Podfile to use version 11 and to include Berbix iOS Cocoapod spec

platform :ios, '11.0'
use_frameworks!

target 'YourProject' do
  ...
  source 'https://github.com/CocoaPods/Specs.git'
  source 'https://github.com/berbix/berbix-ios-spec.git'
  ...
end

Add description for camera permissions to ios/YourProjectName/Info.plist:

<plist version="1.0">
<dict>
  <!-- Add these two elements: -->
    <key>NSCameraUsageDescription</key>
    <string>Required for document capture</string>
  <!-- ... -->
</dict>
</plist>

Install the pods:

cd ios
pod install
cd ..

2.3 Android

Add the Berbix Maven repository to your Gradle repositories in your project's build.gradle file.

allprojects {
    repositories {
        // Existing repositories, like google() and jcenter()
        maven {
            url "https://storage.googleapis.com/berbix-mobile-releases/repo"
        }
    }
}

Ensure that you have enabled camera and internet access in your app manifest.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

Usage

You can launch the Berbix verify flow with a call to Berbix.startFlow. Here's a very simple example on how that might look like:

import * as React from 'react';
import { StyleSheet, View, Text, Button, Platform } from 'react-native';
import Berbix from 'berbix-react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  welcome: {
    fontSize: 22,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    marginTop: 40,
  },
});

const config = {
  clientToken: 'client_token',
};

export default function App() {
  const [error, setError] = React.useState(null);
  const [sessionCreated, setSessionCreated] = React.useState(false);

  const startFlow = async () => {
    setError(null);

    try {
      await Berbix.startFlow(config);
    } catch (err) {}
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to Berbix rn sdk</Text>
      <Text
        style={styles.instructions}
      >{`Press "Start Flow" to start Berbix flow automatically`}</Text>
      <Button title="Start Flow" onPress={startFlow} />
    </View>
  );
}

On iOS, you also have the option to create the session (Berbix.createSession) and starting the verify flow whenever you like (Berbix.displayFlow). Here's a simple example on how to do that;

import * as React from 'react';
import { StyleSheet, View, Text, Button, Platform } from 'react-native';
import Berbix from 'berbix-react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  welcome: {
    fontSize: 22,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    marginTop: 40,
  },
});

const config = {
  clientToken: 'client_token',
};

export default () => {
  const [error, setError] = React.useState(null);
  const [sessionCreated, setSessionCreated] = React.useState(false);

  const createSession = async () => {
    setError(null);

    try {
      await Berbix.createSession(config);
      setSessionCreated(true);
    } catch (err) {}
  };

  const displayFlow = async () => {
    setError(null);

    try {
      await Berbix.displayFlow();
      setSessionCreated(true);
    } catch (err) {}
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to Berbix rn sdk</Text>
      <Text style={styles.instructions}>
        {`Press "Create session" to start a handled Berbix flow`}
      </Text>
      <Button title="Create Session" onPress={createSession} />
      <Text>{sessionCreated ? 'Session created' : 'No session'}</Text>
      <Button title="Display Flow" onPress={displayFlow} />
    </View>
  );
};

1. Creating the SDK configuration

Once you have an added the SDK as a dependency and you have a SDK token, you can configure the SDK:

Example configuration:

config = {
  clientToken: 'client_token_example',
};

2. Configuration details

Prop Description Type Default
clientToken Used to initialise the Berbix Verify user flow String Required
baseUrl BaseUrl description String null

3. Success Response

Upon completion, no data is returned from the SDK.

4. Failure Response

The SDK will reject the promise any time the Berbix SDK exits without a success, such as invalid configuration, or user dismissed the verification flow.

Example

{
  code: "berbix_error",
  domain: "client token is invalid",
  message: "client token is invalid"
}

Example app

Clone the repository

git clone https://github.com/berbix/berbix-react-native-wrapper.git

Setup the example app

cd berbix-react-native-wrapper/
yarn bootstrap

You may want to force using a local berbix-react-native-wrapper instead of the published version. To do this, run the following before running the app:

yarn example preinstall

To revert back to the published version:

yarn example postinstall

Run the ios app

yarn example ios

Run the android app. If this fails, you might need to first open the project in Android studio before re-running the command.

yarn example android

Beware that the verify flow will fail if a valid clientToken is not supplied in /example/src/App.tsx

More Information

Copyright 2021 Berbix. All rights reserved.

License

MIT license