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. Add the FaceVerify component in your code <FaceVerify />.
    • 2. Use the useFaceVerify() hook in your components to start verification
  • 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. Add the FaceVerify component in your code <FaceVerify />.

• Set apiKey to your Fingerprint Public API Key.
• Set host if your plan supports it and you have a custom base url.
• Set rootId if you are going to open the verification in an iframe.

<FaceVerify
  host="https://start.faceverify.io"
  apiKey="018ed448...f6c8402"
  rootId="faceverify-root"
/>

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

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

function App() {
  const { startVerification, startVerificationInFrame } = useFaceVerify();

  return (
    <>
      <button
        onClick={() => {
          startVerification();
        }}
      >
        Start Verification
      </button>

      {/* Or if you want to start verification in your website within an iframe */}

      <button
        onClick={() => {
          startVerificationInFrame({
            width: '800px',
            height: '800px',
          });
        }}
      >
        Start Verification in iframe
      </button>
    </>
  );
}

export default App;

API

For the <FaceVerify /> component these are the available props:

  apiKey: string;
  host: 'https://start.faceverify.io' // or your base url for your integration
  rootId: string;
  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?: {
      label?: string;
      hide?: boolean;
      value?: string;
    };
  };

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.