MfaSetup
Sets up an authenticator app: scan, confirm a code, save backup codes.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Badge, Button, MfaSetup, Stack, Toaster} from '@kerf-js/veneer'export function Authenticator() { const open = state(false) const on = state(false) return ( <> <Stack gap="related" align="center" > <Badge tone={on.value ? 'positive' : 'neutral'} dot > {on.value ? 'Two-step is on' : 'Two-step is off'} </Badge> <Button emphasis="outline" tone="neutral" onClick={() => (open.value = true)} > Set up two-step sign-in </Button> </Stack> <MfaSetup open={open} qr={<SampleQr />} secret="SAMPLE SECRET" codes={BACKUP_CODES} onVerify={(code) => code === '123456'} onDownload={() => {}} onDone={() => (on.value = true)} /> <Toaster /> </> )}const sampleQrPath = 'M0 0h3v3H0zM5 0h3v3H5zM0 5h3v3H0zM4 ' + '4h1v1H4zM6 6h1v1H6zM4 1h1v1H4zM1 ' + '4h1v1H1z'const SampleQr = () => ( <svg viewBox="0 0 8 8" width="148" height="148" style="background:#fff" role="img" aria-label="Sample QR code" > <path d={sampleQrPath} /> </svg>)const BACKUP_CODES = [ 'SAMP-LE01', 'SAMP-LE02', 'SAMP-LE03', 'SAMP-LE04',]Installation
npm install @kerf-js/veneerUsage
tsx
import { MfaSetup } from '@kerf-js/veneer'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | State<boolean> | — | Whether it shows. You own this state. |
qr | unknown | — | Brings its own light plate, like QRCode: a code must stay dark on light in every theme. |
secret | string | — | The key for "Can't scan?". |
codes | string[] | — | Backup codes, shown once verified. |
| Event | Type | Default | Description |
|---|---|---|---|
onVerify | (code: string) => unknown | — | Checks the code: throw, or resolve false, when it's wrong. |
onDownload | ((codes: string[]) => void) | — | Default: saves backup-codes.txt. |
onDone | (() => void) | — | Called at the end. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="mfa-setup"] [data-part="mfa"]
mfa