Quickstart

Add face authentication to a React app and mint a real Supabase session from it. Start to finish, this is about five minutes.

What you need

• A FaceGate API key (fg_test_… for development). Grab one from the dashboard.
• A Supabase project — its URL and anon key.
• React 18 or 19.

1. Install

npm install @facegate/react @facegate/supabase

@facegate/react is the drop-in camera + liveness component. @facegate/supabase turns a successful face scan into a real Supabase session, so your existing Row Level Security and queries keep working unchanged.

2. Drop in the component

The <FaceGate /> component handles the camera, the liveness challenge, and the QR fallback for devices without a camera. You give it your API key and an onAuthenticated callback.

import { FaceGate } from '@facegate/react';
 
export function SignIn() {
  return (
    <FaceGate
      apiKey="fg_test_your_key_here"
      mode="verify"
      onAuthenticated={(session) => {
        // session.token            — signed JWT
        // session.user             — { id, name, role }
        // session.provider_session — Supabase tokens (Tier 2)
        console.log('Signed in as', session.user.name);
      }}
    />
  );
}

That is the entire client integration. No camera permission UI to build, no liveness logic to write — it ships inside the component.

3. Turn the scan into a Supabase session

A FaceGate verification returns provider tokens. The Supabase adapter sets them on your client so the rest of your app sees a normal authenticated user.

import { createFaceGateSupabaseClient } from '@facegate/supabase';
 
const { supabase, adapter } = createFaceGateSupabaseClient({
  supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
  supabaseAnonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
});
 
// inside onAuthenticated(session):
await adapter.setSessionFromFaceGate(session);
// supabase.auth.getUser() now returns the signed-in user — RLS works as usual.

No service-role key. No bypass. The user is signed in through Supabase's own session, so every policy you already wrote still applies.

How the tiers fit

FaceGate meets you at whatever layer you already run.

The Supabase path above is Tier 2 — the beachhead for most apps, because it leaves your data model untouched.

Next steps

• React SDK — every <FaceGate /> prop, enrollment mode, and theming.
• Supabase adapter — how sessions are minted, and enrollment.
• REST API — if you would rather call the endpoints directly.
• Security — liveness, anti-spoofing, and how face data is stored.