@vouched.id/vouched-react-native

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

Note: Be sure to review the IDScreen, BackIDScreen and FaceScreen in the example app to get a sense of possible behaviors you can use in your app's verification flow. Some IDs require processing both front and back sides.

1. Determine the steps needed (ID, ID + Selfie, Reverification)
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 Back Id image

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

Parameters - CardDetectResult, Params Returns - Job

POST Selfie image

const job = await session.postFace(faceDetectionResult);

Parameters - FaceDetectResult
Returns - Job

POST Re-verification

Reverification requires a job ID to match against, and photoType of "selfie" or "id", which indicates whether to match the reverification selfie against the original selfie or photo ID

const authResult = await session.postReverify(
  faceDetectionResult,
  jobId,
  photoType
);

Parameters - FaceDetectResult, String, String
Returns - Job

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();

BarcodeCamera

Import and add to View

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

    <VouchedBarcodeCamera
        ref={cameraRef}
        onBarcodeStream={async (barcodeResult) => {
                cameraRef.current.stop();
                setMessage("Processing Image");
                try {
                    let job = await session.postBarcode(barcodeResult);
                    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
onBarcodeStream	Callback<BarcodeResult>

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?
}

BarcodeResult Object

{
    "image": String?,
    "value": 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"