# Biometric Gate

Face or fingerprint lock that keeps your app dimmed until it’s unlocked. A missed scan flickers once, repeated misses bring up a passcode keypad, and unlocking lights the app back up.

> Composed · Pro · Mobile-Native — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/biometric-gate
```

## Import

```tsx
import { BiometricGate } from "@/components/ui/biometric-gate/biometric-gate";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `locked` | `boolean` | While true the content sits dim behind the lock. |
| `onAuthenticate` | `() => void` | Start a biometric check (e.g. expo-local-authentication's authenticateAsync). |
| `authenticating?` | `boolean` | The check is running — the glyph's strokes draw on. |
| `error?` | `string | null` | Message from the last refused check. Each new message counts one failure. |
| `title?` | `string` | Heading. Default "Locked". |
| `subtitle?` | `string` | Line under the heading. |
| `header?` | `React.ReactNode` | Optional content above the padlock (e.g. the app mark). |
| `method?` | `"face" | "fingerprint"` | Which glyph to draw. Default from `icon`, else "face". |
| `icon?` | `IconName` | @deprecated Use `method`. "fingerprint" picks the fingerprint glyph. |
| `unlockLabel?` | `string` | Primary button label. Default "Unlock". |
| `fallbackLabel?` | `string` | Fallback link label. Default "Use passcode". |
| `onFallbackPress?` | `() => void` | Fallback handler when there is no built-in passcode (`onPasscode`). |
| `onPasscode?` | `(code: string) => boolean | Promise<boolean>` | Built-in passcode: verify the code, set `locked={false}` and return true;  return false to refuse (the dots flicker and clear). |
| `passcodeLength?` | `number` | Passcode digits. Default 6. |
| `maxAttempts?` | `number` | Refused scans before the keypad takes over. Default 3. |
| `failedAttempts?` | `number` | Controlled failure count. Default: counted from `error` changes. |
| `autoPrompt?` | `boolean` | Start a scan as soon as the gate locks. Default false. |
| `children` | `React.ReactNode` | The gated screen. Each top-level child switches on in turn on unlock. |
| `className?` | `string` | — |

## Icons rendered

- `delete` — /icons.html?i=delete

Source: https://lumioui.com/components/biometric-gate