A reset screen that measures strength in bits of entropy on a calibrated track and shows the password's makeup as colored tiles without revealing a character. It warns about reused or common passwords, points to the exact character where the confirmation differs, counts down the reset link and ends by listing the sessions it signed out.
Resetting the password for maya.chen@northwind.io. Every other session is signed out once you save.
npx shadcn@latest add https://hyperblur.dev/r/auth-flow-reset-password.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-flow-reset-password.tsx.
import { AuthFlowResetPassword } from "@/components/hyperblur/auth-flow-reset-password"
<AuthFlowResetPassword email={user.email} onSubmit={async (password) => api.resetPassword(token, password)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Choose a new password" | Heading of the screen. |
| string | "maya.chen@northwind.io" | Account being reset, shown in the lead. | |
| expiresIn | number | 892 | Seconds left on the reset link. At zero the form locks. |
| minBits | number | 60 | Entropy required to save. Also positions the Strong mark on the track. |
| previous | string[] | ["Northwind2024!"] | Passwords that may not be reused. Compare hashes on the server; this is only for the inline warning. |
| sessions | string[] | 3 devices | Sessions listed as signed out on the success screen. |
| defaultPassword | string | "" | Prefills both fields. |
| onSubmit | (password: string) => void | Promise<unknown> | Called with the new password. A promise keeps the button loading; a rejection shows its message. | |
| continueHref | string | "#signin" | Target of the link on the success screen. |
| headingAs | "h1" | "h2" | "h3" | "h2" | Heading level of the title. |
| accent | string | "#a3e635" | Top of the strength gradient, focus ring and success color. |