Biometric Gate

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/biometric-gate

Usage

import { BiometricGate } from "@/components/ui/biometric-gate/biometric-gate";
<BiometricGate />

API reference

Prop Type Default
locked* boolean

While true the content sits dim behind the lock.

 —
onAuthenticate* () => void

Start a biometric check (e.g. expo-local-authentication's authenticateAsync).

 —
children* React.ReactNode

The gated screen. Each top-level child switches on in turn on unlock.

 —
authenticating boolean

The check is running — the glyph's strokes draw on.

 false
error string | null

Message from the last refused check. Each new message counts one failure.

 —
title string

Heading. Default "Locked".

 "Locked"
subtitle string

Line under the heading.

 "Authenticate to continue"
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".

 "Unlock"
fallbackLabel string

Fallback link label. Default "Use passcode".

 "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.

 6
maxAttempts number

Refused scans before the keypad takes over. Default 3.

 3
failedAttempts number

Controlled failure count. Default: counted from error changes.

 —
autoPrompt boolean

Start a scan as soon as the gate locks. Default false.

 false
className string —