Skip to content

React Quick Start

Add liveness detection to your React web application in minutes using the @moveris/react SDK.

In plain terms

Wrap your app in MoverisProvider and render LivenessView. The component shows the camera, captures frames, calls the API, and displays the result. Configure it with your API key (ideally via a backend proxy) and you're done.

Installation

npm install @moveris/react @moveris/shared

Minimal Example

The fastest way to integrate is with MoverisProvider and LivenessView:

import { MoverisProvider, LivenessView } from '@moveris/react';

function App() {
  return (
    <MoverisProvider
      config={{
        apiKey: 'sk-your-api-key',
        baseUrl: 'https://api.moveris.com',
      }}
    >
      <LivenessCheck />
    </MoverisProvider>
  );
}

function LivenessCheck() {
  return (
    <LivenessView
      onResult={(result) => {
        console.log('Verdict:', result.verdict);
        console.log('Score:', result.score);
      }}
      onError={(error) => {
        console.error('Error:', error.message);
      }}
    />
  );
}

That's it. LivenessView handles everything: camera access, face guide overlay, frame capture, API calls, and result display.

API Key Security

The example above includes the API key directly for simplicity. In production, always proxy requests through your backend. You can configure a custom baseUrl pointing to your proxy endpoint.

Using the Hook

For more control over the UI, use the useLiveness hook directly:

import { MoverisProvider, useLiveness } from '@moveris/react';

function LivenessCheck() {
  const {
    status,           // 'idle' | 'capturing' | 'processing' | 'complete' | 'error'
    result,           // LivenessResult | null
    error,            // Error | null
    framesReceived,   // number
    framesRequired,   // number
    start,            // () => void
    reset,            // () => void
  } = useLiveness();

  return (
    <div>
      <p>Status: {status}</p>
      <p>Frames: {framesReceived}/{framesRequired}</p>

      {status === 'idle' && (
        <button onClick={start}>Start Verification</button>
      )}

      {result && (
        <div>
          <p>Verdict: {result.verdict}</p>
          <p>Score: {(result.realScore).toFixed(0)}</p>
        </div>
      )}

      {error && <p>Error: {error.message}</p>}

      <button onClick={reset}>Reset</button>
    </div>
  );
}

With Face Detection

Enable smart frame capture that only captures frames when a face is properly positioned:

import {
  MoverisProvider,
  LivenessView,
  createMediaPipeAdapter,
} from '@moveris/react';

function App() {
  return (
    <MoverisProvider
      config={{
        apiKey: 'sk-your-api-key',
        baseUrl: 'https://api.moveris.com',
      }}
    >
      <LivenessView
        enableFaceDetection
        faceDetectorAdapter={createMediaPipeAdapter()}
        onResult={(result) => console.log(result)}
        onError={(error) => console.error(error)}
      />
    </MoverisProvider>
  );
}

This requires the optional MediaPipe dependency:

npm install @mediapipe/tasks-vision

Using the Modal

Wrap the liveness check in a modal for inline verification flows:

import { useState } from 'react';
import { MoverisProvider, LivenessModal } from '@moveris/react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <MoverisProvider config={{ apiKey: 'sk-your-api-key' }}>
      <button onClick={() => setIsOpen(true)}>
        Verify Identity
      </button>

      <LivenessModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onResult={(result) => {
          console.log('Verdict:', result.verdict);
          setIsOpen(false);
        }}
        onError={(error) => console.error(error)}
      />
    </MoverisProvider>
  );
}

Proxy Setup

In production, create a backend endpoint that forwards requests to Moveris:

// Your backend (e.g., Express.js)
app.post('/api/liveness/*', async (req, res) => {
  const response = await fetch(`https://api.moveris.com${req.path}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.MOVERIS_API_KEY, // Server-side only
    },
    body: JSON.stringify(req.body),
  });
  const data = await response.json();
  res.status(response.status).json(data);
});

Then point the SDK to your proxy:

<MoverisProvider config={{ baseUrl: '/api/liveness' }}>

Next Steps