Profile Settings
Settings
Source and install need .
pnpm dlx shadcn@latest add @assembli/security-settingsSecurity Settings
The Security page of an account, in three cards. Change your password inline with a strength meter. Set up an authenticator by scanning a QR code or typing the key, then entering its code. Keep SMS as a backup and view, copy, download or regenerate recovery codes. Add, rename and remove passkeys, and sign out other sessions one by one or all at once.
- Installs with
- @assembli/otp-input@assembli/password-meter
Props
Other props pass through to the root element.
account
string
Default
"you@example.com"Used in the recovery codes file and the authenticator label.
issuer
string
Default
"Northwind"Product name for the authenticator entry and the codes file.
passwordChangedAt
When | null
Default
nullonChangePassword
(current: string, next: string, signOutOthers: boolean) => Promise<void> | void
Reject with an
Errorwhose message says what went wrong, e.g. a wrong current password.authenticator
{ enabled: boolean; addedAt?: When | null }
Default
{ enabled: false }Whether the authenticator app is already on.
totpSecret
string
Default
"JBSWY3DPEHPK3PXPKRUGS4ZANFZSA3TP"The base32 secret shown under the QR code during setup.
qrCode
React.ReactNode
Your real QR code for the
otpauth://URL. Without it a placeholder pattern is drawn.onVerifyAuthenticator
(code: string) => Promise<boolean> | boolean
Check the code from the app. Resolve true to turn it on.
onDisableAuthenticator
() => Promise<void> | void
phone
string | null
Default
nullA masked number for text-message codes, or null when none is set.
onAddPhone
() => void
onRemovePhone
() => Promise<void> | void
recoveryCodes
RecoveryCode[]
Default
[]onRegenerateCodes
() => Promise<string[]>
Issue a fresh set. The old codes stop working.
passkeys
Passkey[]
Default
[]onAddPasskey
() => Promise<Passkey>
Run the WebAuthn ceremony and resolve with the new passkey.
onRenamePasskey
(id: string, name: string) => Promise<void> | void
onRemovePasskey
(id: string) => Promise<void> | void
sessions
ActiveSession[]
Default
[]onRevokeSession
(id: string) => Promise<void> | void
onRevokeOtherSessions
() => Promise<void> | void
title
React.ReactNode
Default
"Security"description
React.ReactNode
Default
"Keep your account safe with a strong password, a second st…
| Description | |||
|---|---|---|---|
| account | string | "you@example.com" | Used in the recovery codes file and the authenticator label. |
| issuer | string | "Northwind" | Product name for the authenticator entry and the codes file. |
| passwordChangedAt | When | null | null | |
| onChangePassword | (current: string, next: string, signOutOthers: boolean) => Promise<void> | void | – | Reject with an |
| authenticator | { enabled: boolean; addedAt?: When | null } | { enabled: false } | Whether the authenticator app is already on. |
| totpSecret | string | "JBSWY3DPEHPK3PXPKRUGS4ZANFZSA3TP" | The base32 secret shown under the QR code during setup. |
| qrCode | React.ReactNode | – | Your real QR code for the |
| onVerifyAuthenticator | (code: string) => Promise<boolean> | boolean | – | Check the code from the app. Resolve true to turn it on. |
| onDisableAuthenticator | () => Promise<void> | void | – | |
| phone | string | null | null | A masked number for text-message codes, or null when none is set. |
| onAddPhone | () => void | – | |
| onRemovePhone | () => Promise<void> | void | – | |
| recoveryCodes | RecoveryCode[] | [] | |
| onRegenerateCodes | () => Promise<string[]> | – | Issue a fresh set. The old codes stop working. |
| passkeys | Passkey[] | [] | |
| onAddPasskey | () => Promise<Passkey> | – | Run the WebAuthn ceremony and resolve with the new passkey. |
| onRenamePasskey | (id: string, name: string) => Promise<void> | void | – | |
| onRemovePasskey | (id: string) => Promise<void> | void | – | |
| sessions | ActiveSession[] | [] | |
| onRevokeSession | (id: string) => Promise<void> | void | – | |
| onRevokeOtherSessions | () => Promise<void> | void | – | |
| title | React.ReactNode | "Security" | |
| description | React.ReactNode | "Keep your account safe with a strong password, a second st… |
Related
Block
Locale Settings
Settings