Skip to content

Cognito Check Quick Start

@moveris/cognito-check is a framework-agnostic Web Component for human verification. Drop <cognito-check> anywhere in your app: Angular, Vue, Svelte, Astro, WordPress, plain HTML, or any stack that can render HTML elements.

In plain terms

You render a <cognito-check> element, and the widget handles the verification flow (checkbox, camera modal, liveness capture). Your app listens for cognitoSuccess or cognitoError to decide what to do next.

React user?

Use @moveris/cognito-check-react for idiomatic React props and callbacks instead of DOM events.

How It Works

  1. The user clicks the widget checkbox (it is disabled once verified and cannot be clicked again).
  2. A camera modal opens with an oval guide for liveness capture.
  3. Frames are sent to Moveris for analysis.
  4. The widget fires cognitoSuccess or cognitoError.
  5. Your app decides what to do next (enable a submit button, redirect, show an error).

Install

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

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

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

Peer dependencies

react and react-dom are required peer dependencies. The widget uses React internally for its UI, but this is transparent to your app.

Quick Start (Plain HTML)

<!DOCTYPE html>
<html>
  <body>
    <form id="signup-form">
      <input type="email" placeholder="Email" />

      <cognito-check id="verify" api-key="your-api-key"></cognito-check>

      <button type="submit" id="submit-btn" disabled>Create account</button>
    </form>

    <script type="module">
      import '@moveris/cognito-check';

      const widget = document.getElementById('verify');
      const submitBtn = document.getElementById('submit-btn');

      widget.addEventListener('cognitoSuccess', (e) => {
        // e.detail: { outcome: 'pass', sessionId: string }
        // Always verify sessionId on your server before granting access.
        submitBtn.disabled = false;
      });

      widget.addEventListener('cognitoError', (e) => {
        // e.detail: { outcome: 'fail' | 'cancelled', reason: string }
        console.warn('Verification failed:', e.detail.reason);
      });
    </script>
  </body>
</html>

Backend security

Always validate sessionId on your backend before enabling sensitive actions (checkout, transfers, account creation).

When to Use This Package

  • You are not using React, or you need a framework-agnostic integration.
  • You want a quick integration with minimal UI code.
  • You prefer DOM events (cognitoSuccess, cognitoError) over React callbacks.

Next Steps