# Implementation Guide

### Authentication

A unique access token should be created upon each SDK entry. In order to generate an access token, please refer to Valify's [Authentication](https://valify.gitbook.io/documentation/apis/oauth-token) Documentation.

{% hint style="warning" %}
**Security Warning:** For improved security, consider implementing the access token fetching logic outside the Activity. This helps keep sensitive credentials secure and reduces potential exposure within the Activity/Fragment code.
{% endhint %}

### Importing

Import the module’s function in App.js/App.tsx file using the following line

```javascript
import { startLiveness } from '@valifysolutions/react-native-vidvliveness';
```

### Configurations

The plugin builder is separated into two components.

#### Required Configurations

Initialize the required parameters as follows while adding the required configurations

```javascript
const token = "token";
const baseUrl = "ValifyEnvironment_base_url";
const bundleKey = "bundle_key";

```

#### Optional Configurations

Initialize the required parameters as follows while adding the desired configurations

```javascript
const language = "<insert_language>"; // "en" is set as default
const enableSmile= <boolean>; // true is set as default
const enableLookLeft= <boolean>; // true is set as default
const enableLookRight= <boolean>; // true is set as default
const enableCloseEyes= <boolean>;// true is set as default
const trials= <string>; // default is "3"
const instructions= <string>; // default is "4"
const timer= <string>; // default is "10"
const primaryColor = ”<hex_color_code>”; //
const enableVoiceover= <boolean>; // true is set as default

//One of the following lines is required to enable face match 
const faceMatchImage=<base64_String_Image>;//string
const ocrTransactionID="<ocr_transaction_id>";//string

const showErrorMessage=true; // true is set as default
const headers={}; // default is empty

```

### Configurations Breakdown

This section shows the breakdown of all optional builder configurations.&#x20;

1. The following line is where the user interface language is set.&#x20;

```javascript
const language = "<insert_language>"; // ["ar" or "en"] 
```

{% hint style="info" %}
The currently supported languages are Arabic and English
{% endhint %}

2. If the following line is set to true, the SDK requires the user to smile during the experience

```javascript
const enableSmile= <boolean>;
```

3. If the following line is set to true, the SDK requires the user to look to the left during the experience

```javascript
const enableLookLeft= <boolean>;
```

4. If the following line is set to true, the SDK requires the user to look to the right during the experience

```javascript
const enableLookRight= <boolean>;
```

5. If the following line is set to true, the SDK requires the user to close their eyes during the experience

```javascript
const enableCloseEyes= <boolean>;
```

6. The integer set in the following line determines how many failed attempts the user has during a single SDK experience.

```javascript
const trials= <string>;
```

7. The integer set in the following line determines how many instructions the user will need to follow to successfully complete a single SDK experience.

```javascript
const instructions= <string>;
```

8. The integer set in the following line determines how much time (in seconds) the user will be given to complete each task.

```javascript
const timer= <string>;
```

9. The following line is optional and can be used to set your company's branding color to the SDK's user interface.

```javascript
const primaryColor = ”<hex_color_code>”;
```

10. If the following line is set to true, voice-over will be added to the SDK experience dictating the actions expected from the user.

```javascript
const enableVoiceover= <boolean>;
```

11. If this field has the OCR transaction ID filled, then the face match service is enabled and the referenced transaction ID will be compared with an image captured of the user's face during the SDK experience.

```javascript
const ocrTransactionID=”<ocr_transaction_id>”;//string
```

12. If the following line is set to true, then an error message will appear in the user interface in the case that the user did not pass the face match or the liveness service.

```javascript
const showErrorMessage=true;
```

13. The following line is optional and can be used to set any headers that may be required for purposes specific to your application. Any headers set will be sent along with each API call made by the SDK.&#x20;

```javascript
const headers = {};
```

14. If this field has an base64-encoded image filled, then the face match service is enabled and the image will be compared with an image captured of the user's face during the SDK experience.

```javascript
const faceMatchImage=<base64_String_Image>;//string
```

### Parameter Declaration

Declare the SDK parameters with the configuration variables previously created

```javascript
const liveness_params={
access_token:token,
base_url:baseUrl,
bundle_key:bundleKey,
language:language,
enable_smile:enableSmile,
enable_look_left:enableLookLeft,
enable_look_right:enableLookRight,
enable_close_eyes:enableCloseEyes,
Liveness_number_of_failed_trials:trials,
liveness_number_of_instructions:instructions,
liveness_time_per_action:timer,
facematch_ocr_transactionId:ocrTransactionID,
enable_voiceover:enableVoiceover,
facematch_image: facematchImage,
show_error_message:showErrorMessage,
primary_color:primaryColor,
headers:headers
};
```

### Start the SDK

Use the following code snippet to run the plugin

```javascript
export default function App() {

    startLiveness(liveness_params).then(function(value){
        console.log(value);
        const s = value.toString();
        const json = JSON.parse(s);
        if(json.nameValuePairs.state=="SUCCESS"){
        //an example code for using the response of the SDK , base64 will have the base64 String of the captured image during the successfull liveness process.
        final base64 = nameValuePairs.livenessResult.livenessResult.capturedImage;
        alert("success");
        }
        
        else if(json.nameValuePairs.state=="ERROR")
        alert("error");
        else alert("exit");
    },
        function(error){
            alert(error);
        })
}
```

### Sample Integration Example

Check out our [GitHub repository](https://github.com/Valify-Solutions/React_VIDOCR_LIVENESS_Simple_Integration_App) for a simple integration app demonstrating how to use our SDK. The repository includes step-by-step instructions and sample code to help you get started quickly.
