react-native-onfido-auth-sdk

Table of contents

• Overview
• Installation
• Usage
  • 1. Creating the SDK configuration
  • 2. Parameter details
  • 3. Success Response
  • 4. Failure Response
• UI Customization
  • iOS
  • Android
• Contributing
• License

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:

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:

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