# React Native ## Requirements Installation of the Authenteq Flow npm requires React Native `v0.61.5`. ## Getting started Install the required NPM `react-native-authenteq-flow`: `$ npm install react-native-authenteq-flow --save` or `$ yarn add react-native-authenteq-flow` Optionally install the Live ID document scanner and its DB with the NPM: * `react-native-authenteq-flow-docscanner` * `react-native-authenteq-flow-docscanner-db` #### For iOS setup check [here](https://docs.authenteq.com/mo/ios#ios-setup). For Android setup check [here](https://docs.authenteq.com/mo/android#android-setup). ## Start an Identification Import AuthenteqFlow in JS file before usage: `import AuthenteqFlow from 'react-native-authenteq-flow';` #### Start identification: ```javascript AuthenteqFlow .identification("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET") .then((res) => { console.log(res); }).catch((error) => { console.error(error); }) ``` To use a token identification or specify a custom theme use `identificationWithParameters` specifying a dictionary: ```javascript AuthenteqFlow .identificationWithParameters({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", theme: { // iOS or Android custom theme } }) .then((res) => { console.log(res); }).catch((error) => { console.error(error); }) ``` Parameter fields description: | Key name | Type | Description | | -------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | | `clientId` | String | Client ID value from Customer Dashboard *(required)* | | `clientSecret` | String | Client Secret value from Customer Daskboard *(required unless token is specified)* | | `flowId` | String | In conjunction with Client Secret, Flow ID specify a verification flow defined in customer's dashboard (optional) | | `token` | String | Authentication token *(required unless clientSecret is specified)* | | `theme` | Dictionary | Customized theme settings *(optional)* | #### Android theme property: | Key name | Type | Description | | -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------- | | `AndroidStyle` | String | Android style name (for definition details see [Android customization](https://docs.authenteq.com/mo/android/customization)) | #### iOS theme properties: | Property name | Type | Description | | --------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------- | | `primaryColor` | String (hex value) | Main color of your scheme | | `textColor` | String (hex value) | Text color | | `screenBackgroundColor` | String (hex value) | Background color for all screens | | `viewBackgroundHighlightColor` | String (hex value) | Color for some highlighted area in screen background | | `separatorColor` | String (hex value) | Color for table view cells separator | | `selectedButtonTextColor` | String (hex value) | Color for selected buttons text | | `selectedButtonBackgroundColor` | String (hex value) | Background color for selected buttons | | `successColor` | String (hex value) | Color for success flow symbols | | `font` | String | Font name for text | | `boldFont` | String | Font name for bold text | |


identificationInstructionImageForSelfie

| Image | Custom image for liveness instructions. We recommend using images smaller than 300dp | | `identificationInstructionImageForPassport` | Image | Custom image for passport scan instructions. We recommend using images smaller than 300dp | | `identificationInstructionImageForDriverLicense` | Image | Custom image for driver's license scan instructions. We recommend using images smaller than 300dp | | `identificationInstructionImageForIdCard` | Image | Custom image for ID card scan instructions. We recommend using images smaller than 300dp | | `identificationNfcSymbolCheck` | Image | Custom image NFC chip presence verification instructions in the document | | `identificationNfcInstruction` | Image | Custom image NFC document scan instructions | | `identificationNfcScanInside` | Image | Custom image for NFC document inside scan instructions | | `identificationInstructionImageForProofOfAddress` | Image | Custom image for proof of address scan instructions. We recommend using images smaller than 300dp | | `identificationIconForIdDocument` | Image | Custom icon for ID document. We recommend using images smaller than 250dp | | `identificationIconForProofOfAddress` | Image | Custom icon for proof of address. We recommend using images smaller than 250dp | ## Example of **identification JSON output for single document (driver's license)** ```json { "verificationId": "3EF7784D-CBBB-4737-98F9-322E895EC667", "selfieImageFilePath": "path/to/jpeg_file", "proofOfAddressFilePath": "path/to/document_file", "documents": [ { "dateOfBirth": "1987-01-12", "dateOfExpiry": "2045-05-22", "dateOfIssue": "2015-05-22", "documentFrontImageFilePath": "path/to/jpeg_file", "documentBackImageFilePath": "path/to/jpeg_file", "documentNumber": "DXY191672", "documentType": "DL", "givenNames": "ANNA MARIA", "surname": "SCHMIDT", "surnameAndGivenNames": "SCHMIDT ANNA MARIA", "address": "2345 ANYPLACE AVE ANYTOWN NY 12345", "isEighteenPlus": true, "isSixteenPlus": true, "issuingCountry": "DEU", "isTwentyOnePlus": true, "licenseClass": "A1 A B1 B", "licenseClassDetails": { "A": { "from": "2015-05-22" }, "A1": { "from": "2015-05-22" }, "B": { "from": "2004-08-27" }, "B1": { "from": "2004-08-27" } } } ] } ``` ## Example of identification JSON output for multiple documents (passport and driver's license) ```json { "verificationId": "3EF7784D-CBBB-4737-98F9-322E895EC667", "selfieImageFilePath": "path/to/jpeg_file", "proofOfAddressFilePath": "path/to/document_file", "documents": [ { "dateOfBirth": "1987-01-12", "placeOfBirth": "BERLIN", "dateOfExpiry": "2027-01-30", "documentFrontImageFilePath": "path/to/jpg_file", "documentNumber": "8136431812", "personalNumber": "123456", "documentType": "PP", "givenNames": "ANNA MARIA", "surname": "SCHMIDT", "surnameAndGivenNames": "SCHMIDT ANNA MARIA", "address": "2345 ANYPLACE AVE ANYTOWN NY 12345", "isEighteenPlus": true, "isSixteenPlus": true, "issuingCountry": "DEU", "issuingAuthority": "FOREIGN OFFICE", "isTwentyOnePlus": true, "nationality": "DEU", "sex": "F" }, { "dateOfBirth": "1987-01-12", "dateOfExpiry": "2045-05-22", "dateOfIssue": "2015-05-22", "documentFrontImageFilePath": "path/to/jpeg_file", "documentBackImageFilePath": "path/to/jpeg_file", "documentNumber": "DXY191672", "documentType": "DL", "givenNames": "ANNA MARIA", "surname": "SCHMIDT", "surnameAndGivenNames": "SCHMIDT ANNA MARIA", "address": "2345 ANYPLACE AVE ANYTOWN NY 12345", "isEighteenPlus": true, "isSixteenPlus": true, "issuingCountry": "DEU", "isTwentyOnePlus": true, "licenseClass": "A1 A B1 B", "licenseClassDetails": { "A": { "from": "2015-05-22" }, "A1": { "from": "2015-05-22" }, "B": { "from": "2004-08-27" }, "B1": { "from": "2004-08-27" } } } ] } ``` ## Deprecated fields `selfieImageFile` is deprecated and is now available as `selfieImageFilePath` `documentFrontFile` is deprecated and is now available as `documentFrontImageFilePath` `documentBackFile` is deprecated and is now available as `documentBackImageFilePath` ## Face Authentication To perform a face authentication, set the parameters for authentication (`clientSecret` or `token`) and the `verificationId` to match: ```javascript AuthenteqFlow .faceAuthenticationWithParameters({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", verificationId: "VERIFICATION ID TO MATCH", theme: { // iOS or Android custom theme } }) .then((res) => { console.log(res); }).catch((error) => { console.error(error); }) ``` {% hint style="warning" %} We suggest to use the token authentication in production environment. {% endhint %} #### Example of face authentication JSON output ```json { "code": "xy4q6o" } ``` With the code obtained it is possible to get the face authentication result using the following API: ## Obtain the result of a face authentication `GET` `https://api.app.authenteq.com/mobile-sdk/face-authentication-result` This endpoint is authorized with Basic Authorization. You should use your `Client ID` and `Client Secret` from the Customer Dashboard as the credentials. #### Query Parameters | Name | Type | Description | | -------------------------------------- | ------ | -------------------------------------------------------------- | | code\* | string | The code provided at the conclusion of SDK face authentication | #### Headers | Name | Type | Description | | ----------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------- | | Authorization\* | string | Your client credentials combined with a colon separator, base64-encoded and prefixed with "Basic ". | {% tabs %} {% tab title="200 " %} ``` { "accessToken": "81e4cbce-cdad-11eb-8fc3-784f4385af2b" } ``` {% endtab %} {% tab title="401 Full authentication is required to perform document recognition." %} ``` { "errorCode": "API_KEYS_MISSING", "errorMessage": "No API Keys in the Authorization header" ``` {% endtab %} {% tab title="403 The authenticated customer is disabled and cannot get a token." %} ``` { "errorCode": "ACCOUNT_DEACTIVATED", "errorMessage": "Account deactivated. Please contact your Authenteq Sales Representative in order to keep using this service" }huiHjio ``` {% endtab %} {% endtabs %} When successful the response will contain a single boolean property named `success`: ```json { "success": true } ```