MfaSetup
Sets up an authenticator app: scan, confirm a code, save backup codes.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Badge, Button, MfaSetup, Stack, Toaster } from '@weft-js/warp'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 SampleQr = () => ( <svg viewBox="0 0 8 8" width="148" height="148" style="background:#fff" role="img" aria-label="Sample QR code"> <path d="M0 0h3v3H0zM5 0h3v3H5zM0 5h3v3H0zM4 4h1v1H4zM6 6h1v1H6zM4 1h1v1H4zM1 4h1v1H1z" /> </svg>)const BACKUP_CODES = ['SAMP-LE01', 'SAMP-LE02', 'SAMP-LE03', 'SAMP-LE04']Installation
npm install @weft-js/warpUsage
tsx
import { MfaSetup } from '@weft-js/warp'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp'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="stack"] [data-part="mfa"]
mfacodes