Vouched React Native

Get Started

If this is your first time here, Run the Example to get familiar.
If you're ready to add this to your existing project, Install the Package.

Run Example

Clone this repo and change directory to example

git clone https://github.com/vouched/vouched-react-native
cd vouched-react-native/example

Then, follow steps listed on the example README

Prerequisites

• An account with Vouched
• Your Vouched Public Key

Install

Add the package to your existing project

yarn add @vouched.id/vouched-react-native

Link the package

react-native link @vouched.id/vouched-react-native

iOS pods are not automatically installed, so we'll need to manually install them

 cd ios && pod install

Ensure all prerequisites have been met.

Create Verification Flow

1. Determine the steps needed (ID, ID + Selfie, Authentication)
2. Create the Component/Screen(s) for each step
3. Use the appropriate Camera (IdCamera or FaceCamera) for the step.
4. Ensure session.confirm is called once verification is complete to recieve finalized job data.

Reference

VouchedSession

This class handles a user's Vouched session. It takes care of the API calls

Initialize a session

const session = new VouchedSession(apiKey, sessionParams);

Parameters - String, SessionParams

POST Front Id image

const job = await session.postFrontId(cardDetectionResult, params);

Parameters - CardDetectResult, Params
Returns - Job

POST Selfie image

const job = await session.postFace(faceDetectionResult);

Parameters - FaceDetectResult
Returns - Job

POST Authentication

const authResult = await session.postAuthenticate(
  faceDetectionResult,
  jobId,
  matchId
);

Parameters - FaceDetectResult, String, Boolean
Returns - AuthenticateResult

POST confirm verification

const job = await session.confirm();

Returns - Job

VouchedUtils

Utility class

Extract Job Insights

const insights = await VouchedUtils.extractInsights(job);

Parameters - Job
Returns - Insight[]

IdCamera

Import and add to View

import { VouchedIdCamera } from '@vouched.id/vouched-react-native';
...

    <VouchedIdCamera
        ref={cameraRef}
        enableDistanceCheck={true}
        onIdStream={async (cardDetectionResult) => {
            const { instruction, step } = cardDetectionResult;
            if (step === "POSTABLE") {
                cameraRef.current.stop();
                setMessage("Processing Image");
                try {
                    let job = await session.postFrontId(cardDetectionResult);
                    let insights = await VouchedUtils.extractInsights(job);
                    // optionally retry based on insights
                    // proceed to next step
                } catch (e) {
                    // handle error
                }
            } else {
                setMessage(instruction)
            }
        }}
    />

Properties	Type	Default
enableDistanceCheck	Boolean	false
onIdStream	Callback<CardDetectResult>

Stop IdCamera

cameraRef.current.stop();

Restart IdCamera

cameraRef.current.restart();

FaceCamera

Import and add to View

import { VouchedFaceCamera } from '@vouched.id/vouched-react-native';
...

    <VouchedFaceCamera
        ref={cameraRef}
        livenessMode="DISTANCE"
        onFaceStream={async (faceDetectionResult) => {
            const { instruction, step } = faceDetectionResult;
            if (step === "POSTABLE") {
                cameraRef.current.stop();
                setMessage("Processing Image");
                try {
                    let job = await session.postFrontId(faceDetectionResult);
                    let insights = await VouchedUtils.extractInsights(job);
                    // optionally retry based on insights
                    // proceed to next step
                } catch (e) {
                    // handle error
                }
            } else {
                setMessage(instruction)
            }
        }}
    />

Properties	Type	Default
livenessMode	LivenessMode	"NONE"
onFaceStream	Callback<FaceDetectResult>

Stop FaceCamera

cameraRef.current.stop();

Restart FaceCamera

cameraRef.current.restart();

Types

CardDetectResult Object

{
    "instruction" : String,
    "step": String,
    "image": String?,
    "distanceImage": String?
}

Note: shouldn't be POSTed until the step is "POSTABLE"

FaceDetectResult Object

{
    "instruction" : String,
    "step": String,
    "image": String?,
    "userDistanceImage": String?
}

Note: shouldn't be POSTed until the step is "POSTABLE"

Job Object

{
    "result": JobResult,
    "id": String,
    "errors": JobError[],
    "token": String 
}

JobResult Object

{
    "id": String?,
    "issueDate": String?,
    "country": String?,
    "confidences": JobConfidence,
    "expireDate": String?,
    "success": Boolean,
    "state": String?,
    "lastName": String?,
    "firstName": String?,
    "birthDate": String?,
    "type": String?
}

JobConfidence Object

{
    "id": Number?,
    "faceMatch": Number?,
    "idGlareQuality": Number?,
    "idQuality": Number?,
    "idMatch": Number?,
    "nameMatch": Number?,
    "selfie": Number?,
    "birthDateMatch": Number?,
    "idQuality": Number?
}

JobError Object

{
    "type" : String,
    "message": String
}

AuthenticateResult Object

{
    "match": Number
}

SessionParams Object

{
    "callbackURL": String?,
    "groupId": String?,
    "properties": Property[]?
}

Property Object

{
    "name": String,
    "value": String,
}

Params Object

{
    "birthDate": String?,
    "email": String?,
    "firstName": String?,
    "lastName": String?,
    "phone": String?
}

LivenessMode String

"DISTANCE" | "MOUTH_MOVEMENT" | "BLINKING" | "NONE"

Step String

"PRE_DETECTED" | "DETECTED" | "POSTABLE"

Instruction String

"ONLY_ONE" | "MOVE_CLOSER" | "MOVE_AWAY" | "HOLD_STEADY" | "OPEN_MOUTH" | "CLOSE_MOUTH" | "LOOK_FORWARD" | "BLINK_EYES" | "NO_CARD" | "NO_FACE"

Insight String

"UNKNOWN" | "NON_GLARE" | "QUALITY" | "BRIGHTNESS" | "FACE" | "GLASSES"