Faceverify.io React Integration

Faceverify is an identity verification platform that provides identity verification solutions. This SDK is an easy way to integrate faceverify's solution into your React Application. It's also compatible with Next.JS and Preact.

Table of contents

• Faceverify.io React Integration
  • Table of contents
  • Requirements
  • Installation
  • Getting started
    • 1. Wrap your whole application with FaceVerifyProvider component (Optional)
    • 2. To start the verification, you can use one of these methods
      • a. Use the useFaceVerify() hook in your components to start verification
      • b. Use the <FaceVerifyFrame /> component
  • API
  • Support and feedback
  • License

Requirements

• React 18 or higher
• For Preact users: Preact 10.3 or higher
• For Next.js users: Next.js 13.1 or higher
• For Typescript users: Typescript 4.8 or higher

Installation

Using npm:

npm install faceverify-sdk-react

Using yarn:

yarn add faceverify-sdk-react

Using pnpm:

pnpm add faceverify-sdk-react

Getting started

In order to get started with verifying your users, you'll need an account on faceverify.io (you can sign up for free). To get your API key, go to integrations and create a integration, then you can find the API Key in its details page.

1. Wrap your whole application with FaceVerifyProvider component (Optional)

This step is optional, but setting up the provider allows you to pass the config here and you can just call the components and hooks from any other place inside the tree, else you have to pass these configs on every call/use of component and hooks

Set apiKey to your Fingerprint Public API Key.

import { FaceVerifyProvider } from 'faceverify-sdk-react';

<FaceVerifyProvider apiKey="018ed448...f6c8402">
  {/* your other components */}
</FaceVerifyProvider>;

2. To start the verification, you can use one of these methods

a. Use the useFaceVerify() hook in your components to start verification

import { useFaceVerify } from 'faceverify-sdk-react';

function App() {
  const { startVerification } = useFaceVerify();
  const verificationFrameRef = useRef(null);

  return (
    <>
      <div
        ref={verificationFrameRef}
        style={{ height: '800px', width: '800px' }}
      />
      <button
        onClick={() => {
          startVerification(verificationFrameRef, {
            height: "100vh",
            width: "100vw",
            apiKey: "018ed448...f6c8402" // (Optional)
            {/* ...other options similar to FaceVerifyProvider props */}
          });
        }}
      >
        Start Verification
      </button>
    </>
  );
}

export default App;

b. Use the <FaceVerifyFrame /> component

import { FaceVerifyFrame } from 'faceverify-sdk-react';

function App() {
  return (
    <FaceVerifyFrame
      style={{ height: '800px', width: '800px' }}
      apiKey="018ed448...f6c8402(optional)"
      onClose={() => {
        console.log("closed verification popup");
      }}
      {/*...you can pass other options similar to <FaceVerifyProvider /> */}
    />
    );
}

export default App;

API

set - returned by useFaceVerify hook. You can set uniqueId , metaData, firstname and lastname

// Ex: you can set uniqueId
set.uniqueId('uniqueId-123');

// Or firstname etc...
set.firstname({
  value: '',
  hide: false,
  label: 'Your firstname',
});

This is the available options for FaceVerifyProvider props, FaceVerifyFrame props,

  apiKey: string;
  host:  'https://start.faceverify.ai' // or your base url for your integration
  ui?: {
    firstname?: {
      label?: string; // placeholder text on firstname input field
      hide?: boolean; // whether this field will be hidden or not
      value?: string; // default value for this input field
    };
    lastname?: {
      label?: string;
      hide?: boolean;
      value?: string;
    };
  };
  uniqueId: string;
  metaData?: Object // length must be under 100 characters
  country?: "US" // ISO 2 country code if passed this will be set as the country for the user's verification process

Support and feedback

To ask questions or provide feedback, email us at mail account.

License

This project is licensed under the MIT license. See the LICENSE file for more info.