Skip to content

Cognito Check React Quick Start

@moveris/cognito-check-react is the React wrapper for the embeddable Cognito Check widget. Drop <CognitoCheck /> anywhere in your React app. The widget handles the full oval/camera/liveness capture flow and calls your onSuccess or onError callback when done.

In plain terms

You render <CognitoCheck /> and handle onSuccess and onError callbacks in your component state.

Not using React?

Use @moveris/cognito-check -- the framework-agnostic Web Component that works with Angular, Vue, plain HTML, and any other stack.

How It Works

  1. The user clicks the widget checkbox.
  2. A camera modal opens with an oval guide for liveness capture.
  3. Frames are sent to Moveris for analysis.
  4. onSuccess or onError fires in your component.
  5. You decide what to do next (enable a submit button, update state, redirect).

Install

npm install @moveris/cognito-check-react @moveris/cognito-check

pnpm add @moveris/cognito-check-react @moveris/cognito-check

yarn add @moveris/cognito-check-react @moveris/cognito-check

Quick Start

import { useState } from 'react';
import { CognitoCheck } from '@moveris/cognito-check-react';

export function SignupForm() {
  const [verified, setVerified] = useState(false);

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" />

      <CognitoCheck
        apiKey="your-api-key"
        onSuccess={({ sessionId }) => {
          // Optionally verify sessionId on your server before enabling submit.
          setVerified(true);
        }}
        onError={({ outcome, reason }) => {
          if (outcome === 'cancelled') return; // user closed the modal
          console.warn('Verification failed:', reason);
        }}
      />

      <button type="submit" disabled={!verified}>
        Create account
      </button>
    </form>
  );
}

Use shared state

Gate sensitive actions with app state (for example, disable submit buttons until onSuccess fires).

When to Use This Package

  • Your app is built with React.
  • You want an embeddable verification widget instead of a full camera-based flow.
  • You prefer declarative React props over DOM event listeners.

Next Steps