auth pattern

Reset password

New-password entry after clicking the email link. Token validation + strength.

When to use it

User clicked email reset link with a token in the URL.

  • New password set in two clicks
  • Real-time strength feedback
  • Auto-sign-in on success

Layout regions

  • header
  • card

States

  • default
  • unauthorized
  • loading
  • success

Example

<Card><CardHeader><CardTitle>Choose a new password</CardTitle></CardHeader><CardContent><form onSubmit={reset}><Field label="New password"><PasswordInput variant="with-strength" /></Field><Field label="Confirm"><PasswordInput /></Field><Button type="submit">Update password</Button></form></CardContent></Card>

The full Reset password pattern specifies 4 exact microcopy strings, 1 motion spec, 5 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Reset password pattern in your project.