Bridge between onfido-auth and react-native

Overview

react-native-onfido-auth-sdk

Table of contents

Overview

The Onfido Authentication SDK provides a set of screens for React Native applications to capture 3D face scans for the purpose of identity authentication.

Installation

yarn add react-native-onfido-auth-sdk

Usage

You can launch the app with a call to OnfidoAuth.start.

import { OnfidoAuth } from 'react-native-onfido-auth-sdk';
// ...
OnfidoAuth.start({ sdkToken: 'sdkToken' })
  .then(/* ... */)
  .catch(/* ... */);

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 = {
  sdkToken: 'EXAMPLE-TOKEN-123',
  retryCount: 2,
}

2. Parameter details

  • sdkToken: Required. This is the JWT sdk token obtained by making a call to the SDK token API.
  • retryCount: Optional. This value is used to set the number of repeat attempts a user can do after the first unsuccessful try.

3. Success Response

Success is when the user has reached the end of the flow. The result has the verified, uuid and token properties. If authentication was successful, verified will be true and token will be the JWT. This JWT token can be used to validate the response.

Example:

{
  token: 'EXAMPLE-TOKEN-456',
  uuid: 'uuid',
  verified: true,
}

4. Failure Response

The SDK will reject the promise any time the OnfidoAuth SDK exits without a success. Error messages are not in a presentable format to the end user and are not localised.

UI Customization

iOS

You can customize the iOS UI by adding a customization.ios.json file to your project at the same level as your node_modules directory. The file should contain a single json object with the desired keys and values. For example:

{
  "onfidoPrimaryTextColor": "",
  "onfidoPrimaryTextDynamicDimmingColor": "",

  "onfidoPrimaryButtonColor": "#4BC0B1",
  "onfidoPrimaryButtonDynamicDimmingColor": "",
  "onfidoPrimaryButtonPressedColor": "#2EAC9C",
  "onfidoPrimaryButtonDisabledColor": "",
  "onfidoPrimaryButtonDisabledDynamicDimmingColor": "",
  "onfidoPrimaryButtonTextColor": "#FFFFFF",
  "onfidoPrimaryButtonTextDynamicDimmingColor": "",
  "onfidoPrimaryButtonTextPressedColor": "",
  "onfidoPrimaryButtonTextDisabledColor": "",
  "onfidoPrimaryButtonTextDisabledDynamicDimmingColor": "",

  "onfidoSecondaryButtonPressedColor": "",
  "onfidoDualSpinnerColor": "",
  "onfidoRetryScreenOvalStrokeColor": "",
  "onfidoUploadProgressFillColor": "",

  "onfidoButtonCornerRadius": 24,

  "onfidoFontRegular": "",
  "onfidoFontMedium": "", 
  "onfidoFontBold": ""
}

Once you've added the customization.ios.json to your project, you should add customization.ios.json file to your xcode project as bundle resource. You can create symbolic link (rather than copy paste) to prevent redundancy. Then when running on an iOS device the values will be picked up dynamically at runtime.

Below is a description of all available keys:

Color Description
onfidoPrimaryTextColor Color of most text
onfidoPrimaryTextDynamicDimmingColor Color of text in Dynamic Dimming mode

Dynamic Dimming mode is automatically enabled in certain lighting conditions and will include UI differences such as the background turning black
onfidoPrimaryButtonColor Background color of buttons
onfidoPrimaryButtonDynamicDimmingColor Background color of buttons in Dynamic Dimming mode

Dynamic Dimming mode is automatically enabled in certain lighting conditions and will include UI differences such as the background turning black
onfidoPrimaryButtonPressedColor Background color of buttons while being pressed
onfidoPrimaryButtonDisabledColor Background color of buttons that are disabled
onfidoPrimaryButtonDisabledDynamicDimmingColor Background color of buttons that are disabled in Dynamic Dimming mode

Dynamic Dimming mode is automatically enabled in certain lighting conditions and will include UI differences such as the background turning black
onfidoPrimaryButtonTextColor Color of text in buttons
onfidoPrimaryButtonTextDynamicDimmingColor Color of text in buttons in Dynamic Dimming mode

Dynamic Dimming mode is automatically enabled in certain lighting conditions and will include UI differences such as the background turning black
onfidoPrimaryButtonTextPressedColor Color of text in buttons while being pressed
onfidoPrimaryButtonTextDisabledColor Color of text in buttons that are disabled
onfidoPrimaryButtonTextDisabledDynamicDimmingColor Color of text in buttons that are disabled in Dynamic Dimming mode

Dynamic Dimming mode is automatically enabled in certain lighting conditions and will include UI differences such as the background turning black
onfidoSecondaryButtonPressedColor Background color of secondary button (currently this is only the “Do not accept” button in the optional consent screen)
onfidoDualSpinnerColor Color of dual spinner rotating around selfie preview
onfidoRetryScreenOvalStrokeColor Stroke color of oval on ideal selfie image in retry screen
onfidoUploadProgressFillColor Color of completed portion of upload progress bar
onfidoButtonCornerRadius Corner radius of buttons (should be set to 40 maximum, otherwise will not work on some buttons)
onfidoFontRegular Name of font to use on regular text
onfidoFontMedium Name of font to use on medium text
onfidoFontBold Name of font to use on bold text

Android

You can customize the Android UI by adding a customization.android.json file to your project at the same level as your node_modules directory. The file should contain a single json object with the desired keys and values. For example:

{
  "onfidoColorPrimaryDark": "",
  "onfidoTextColorPrimary": "",

  "onfidoPrimaryButtonTextColor": "#FFFFFF",
  "onfidoPrimaryButtonDisabledTextColor": "#FFFFFF",
  "onfidoPrimaryButtonColor": "#4BC0B1",
  "onfidoPrimaryButtonColorPressed": "#2EAC9C",
  "onfidoPrimaryButtonColorDisabled": "",

  "onfidoSecondaryButtonColor": "",
  "onfidoSecondaryButtonColorPressed": "",

  "onfidoColorAccent": "#4BC0B1",
  "onfidoAuthDualSpinnerColor": "",
  "onfidoAuthRetryScreenOvalStrokeColor": "",
  "onfidoUploadProgressFillColor": "",

  "onfidoPrimaryButtonColorDynamicDimmingMode": "",
  "onfidoPrimaryButtonColorPressedDynamicDimmingMode": "",
  "onfidoPrimaryButtonColorDisabledDynamicDimmingMode": "",

  "onfidoButtonCornerRadius": 32
}

Below is a description of all available keys:

Color Description
onfidoColorPrimaryDark Color of the status bar
onfidoColorAccent Default color of certain UI elements such as dual spinner around selfie preview, oval around images in retry screen, and upload progress color. These elements can also be customised individually
onfidoTextColorPrimary Primary color of the texts used throughout the screens
onfidoPrimaryButtonTextColor Color of the text inside the primary action buttons
onfidoPrimaryButtonDisabledTextColor Color of the text inside the primary action buttons when disabled
onfidoPrimaryButtonColor Background color of the primary action buttons
onfidoPrimaryButtonColorPressed Background color of the primary action buttons when pressed
onfidoPrimaryButtonColorDisabled Background color of the primary action buttons when disabled
onfidoSecondaryButtonColor Background color of the secondary action buttons
onfidoSecondaryButtonColorPressed Background color of the secondary action buttons when pressed
onfidoAuthDualSpinnerColor Color of dual spinner rotating around selfie preview. This will override the default color provided by onfidoColorAccent
onfidoAuthRetryScreenOvalStrokeColor Stroke color of oval on ideal selfie image in retry screen. This will override the default color provided by onfidoColorAccent
onfidoUploadProgressFillColor Fill color of the uploading progress indicator bar. This will override the default color provided by onfidoColorAccent
onfidoPrimaryButtonColorDynamicDimmingMode Background color of the primary action buttons in dark mode
onfidoPrimaryButtonColorPressedDynamicDimmingMode Background color of the primary action buttons when pressed in dark mode
onfidoPrimaryButtonColorDisabledDynamicDimmingMode Background color of the primary action buttons when disabledin dark mode

You can customize the corner radius of all buttons by providing onfidoButtonCornerRadius in your customization.android.json resource file.

Once you've added the customization.android.json to your project, you should run the following command at the same level of your node_modules directory.

$ npm --prefix node_modules/react-native-onfido-auth-sdk/ run customizeAndroid

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

You might also like...
React Native package for interacting with HomeKit devices

React Native package for interacting with HomeKit devices

react native esptouch

react-native-esptouch One should know that This is a Unofficial project. The official demo is below: EsptouchForAndroid EsptouchForIOS Getting started

React Native Template for Taro

React Native Template for Taro requirement taro: @tarojs/cli@^3.2.0 framework: 'react' quick start install react native library install peerDependenci

A suite of IoT tools to use with React Native.

react-native-iot-tools WIP. A suite of IoT tools for React Native applications. Package iOS Android @react-native-iot-tools/bluetooth ✅ ❌ @react-nativ

A testing MQTT react native library

react-native-awesome-testing abc Installation npm install react-native-awesome-testing Usage import { multiply } from "react-native-awesome-testing";

Encryption/Decryption for React Native

@dhairyasharma/react-native-encryption Encryption/decryption for React Native. Benchmark File Details File Link http://bit.do/benchmarkfile File Size

Encryption/Decryption for React Native

@dhairyasharma/react-native-encryption Encryption/decryption for React Native. Benchmark File Details File Link http://bit.do/benchmarkfile File Size

React Native Photo Editor (RNPE)
React Native Photo Editor (RNPE)

React Native Photo Editor (RNPE) 🌄 Image editor using native modules for iOS an

All my React Native examples

ReactNativeExamples All my React Native examples and experiements can be found here. This repo is divided into two sub folders, Instructions git clone

Releases(0.2.5)
Owner
null
This provides a bridge to use Sync with Tokamak instead of SwiftUI

Sync Tokamak This provides a bridge to use Sync with Tokamak instead of SwiftUI.

Mathias Quintero 5 May 7, 2022
React Native library that implements PayPal Checkout flow using purely native code (swift).

react-native-paypal-swift React Native library that implements PayPal Checkout flow using purely native code (swift). Installation npm install react-n

Tibb 6 Nov 28, 2022
React Native utility library around image and video files for getting metadata like MIME type, timestamp, duration, and dimensions. Works on iOS and Android using Java and Obj-C, instead of Node 🚀.

Qeepsake React Native File Utils Extracts information from image and video files including MIME type, duration (video), dimensions, and timestamp. The

Qeepsake 12 Oct 19, 2022
Blazing⚡️Fast BTC and ETH Wallet Generator library for React Native, Android and iOS

Blazing ⚡️ Fast BTC and ETH Wallet Generator library for React Native, Android and iOS.

Coingrig 3 Feb 21, 2022
iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android).

FinanceReactNative iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android). Data is pulled from Yahoo Finance

kf 2k Dec 29, 2022
Discover Movies and TV shows - React Native

movieapp Discover Movies and TV shows Download APK file Download from Google Drive - v2.2.1 What's included Name Description React Native Build Native

June Domingo 1.8k Dec 28, 2022
🏀 iOS and Android NBA app created with React Native

Swish An iOS and Android NBA app created with React Native. If you would like to request a feature, find a bug, have a question, or would like to leav

James Kuczmarski 108 Nov 11, 2022
A react native interface for integrating payments using Braintree

A react native interface for integrating payments using Braintree

eKreative 17 Dec 30, 2022
React Native 实现无侵入自定义下拉刷新组件

react-native-ly-refresh-control 下拉刷新 iOS 基于MJRefresh 通过RCTCustomRefreshContolProtocol实现RefreshControl组件封装 JS端可以无侵入自定义下拉刷新只需要替换对应的refreshControl Androi

少言 12 Jul 2, 2022
iOS 15 share play API in react-native

react-native-shareplay iOS 15 share play API in react-native Installation yarn add react-native-shareplay And go to Xcode Capabilities and enable "Gro

Popshop Live 27 Oct 16, 2022