smarteye-protect

A component that brings the Smart Eye technology to React apps. Smart Eye authenticates user with the continuous face monitoring and liveness checks to ensure that only the intended users can see the sensitive content or perform the sensitive transactions. The liveness challenges require user to move their face in a certain way. The number of liveness challenges presented to the user, the maximum challenge retry attempts, face match percentage threshold can be customized using the SDK options.

Installation

Install smarteye-protect with npm

  npm install smarteye-protect

Usage/Examples

smarteye-protect can be used to protect the:

1. The sensitive content like the component hosting the account balance. To protect, just wrap the component hosting the data with SetiProtect

import { SetiProtect } from 'smarteye-protect';


function App() {
  return <SetiProtect
            x_api_key={api_key}
            successfulChallengeCountRequired={1}
            max_liveness_check_challenge_retries_attempt={1}
            onLivenessCheckComplete={() => console.log('Liveness check completed')}
            onMaxChallengeRetries={() => console.log('Liveness challenge max retries')}
            referenceImageURI={imageURI}
            onFaceCountChange={(faceCount) => console.log('Face count', faceCount)}
            onFaceMatchFailed={() => console.log('Face Match failed')}
            onFaceMatchSuccess={() => console.log('Face Match success')}
            onFaceMatchError={(error) => console.log('Face Match error', error)}
            matchPercentageThreshold={90}>
            <AccountBalance>
            <SetiProtect>
}

2. Protect the sensitive actions (like the money transfer action)

import { SetiProtect } from 'smarteye-protect';


function App() {
 const [protectSensitiveAction, setProtectSensitiveAction] = useState(false);
 const transferFund = () => {
     //Transfer the fund
 }
 ...

 return 
 <>
         {protectSensitiveAction && <SetiProtect
         x_api_key={api_key}
         successfulChallengeCountRequired={1}
         max_liveness_check_challenge_retries_attempt={1}
         onLivenessCheckComplete={() => console.log('Liveness check completed')}
         onMaxChallengeRetries={() => console.log('Liveness challenge max retries')}
         referenceImageURI={imageURI}
         onFaceCountChange={(faceCount) => console.log('Face count', faceCount)}
         onFaceMatchFailed={() => console.log('Face Match failed')}
         onFaceMatchSuccess={() => transferFund()}
         onFaceMatchError={(error) => console.log('Face Match error', error)}
         matchPercentageThreshold={90}/>
         }

         <input type="submit" className="btn" value="Transfer Fund"  onClick={()=>setProtectSensitiveAction(true)}/>

 </>
}

Demo

Demo of the SDK is available at the link below in a sample bank app:

https://d37f1m5o1oc40t.cloudfront.net/

To be able to use the demo app, just share with us your photo that will be used for face matching and the preferred username. Please refer the contact details in the contact section.

Options

Following props can be customized: | Properties | Type | Description | Default value | Is Required | | -------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------ | ------------- | ----------- | | key | string | API key to initialize the SDK. | NA | Yes | | successfulChallengeCountRequired | number | Number of liveness challenges required to be completed. | 1 | No | | max_liveness_check_challenge_retries_attempt | number | Maximum allowed liveness check challenge retry attempts. | 2 | No | | onLivenessCheckComplete | () => void | Callback that is called when liveness check is complete. | NA | No | | onMaxChallengeRetries | () => void | Callback that is called when maximum retry attempts are exhausted. | NA | No | | referenceImageURI | string | Image against which the user's face photo will be verified. | NA | Yes | | onFaceCountChange | (number) => void | Callback that is called when the face count changes. | NA | No | | onFaceMatchFailed | () => void | Callback that is called when the face verification fails. | NA | No | | onFaceMatchSuccess | () => void | Callback that is called when the face verification succeeds. | NA | No | | onFaceMatchError | () => void | Callback that is called when the face verification throws error. | NA | No | | matchPercentageThreshold | number | Minimum face match percentage value at which facial verification is considered successful. | 90 | No |

Keywords

react, smart eye technology, secure data, facial recoginition, liveness check, authentication, anti-spoofing

Contact