AuthForgotPassword
Single-field 'forgot password' page. On submit, dispatches a reset link via adapter.requestPasswordReset and swaps to an Empty-based 'check your inbox' confirmation state.
Installation
pnpm dlx @hex-core/cli add auth-forgot-passwordUsage
import { AuthForgotPassword } from "@/components/ui/auth-forgot-password"Mock adapter (showcase / tests)
Demo with the in-memory mock adapter — every method resolves ok:true after 400ms.
import { AuthForgotPassword, mockAuthAdapter } from "@hex-core/components";
<AuthForgotPassword adapter={mockAuthAdapter} signInHref="/sign-in" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
adapterrequired | object | — | AuthAdapter implementation. The block calls adapter.requestPasswordReset({ email }) on submit. |
signInHref | string | /sign-in | Href for the 'Sign in' link rendered below the form and on the confirmation state's CTA. |
className | string | — | Additional classes applied to the outer flex wrapper. |
onSuccess | function | — | Called after the reset link is dispatched successfully. Useful for analytics / toast notifications: () => void. |
AI Guidance
When to use
Use whenever you need a 'forgot password' surface. The block handles the dispatch state (form → confirmation) so consumers don't have to manage transitions themselves.
When not to use
Don't use for password change while signed in (use a settings panel with the existing form components). Don't use for magic-link login (use auth-sign-in-split with sendMagicLink instead).
Common mistakes
- Forgetting to pass the AuthAdapter — the block has no built-in fallback and surfaces an 'unimplemented' error on submit.
- Treating onSuccess as a navigation hook — the block already renders the confirmation state in place; onSuccess is for side effects (analytics, toast). Don't navigate away.
- Skipping client-side email validation in the adapter — the block already runs an EMAIL_REGEX check before calling the adapter, so the adapter only sees plausibly-shaped emails.
Accessibility
Email input has explicit Label htmlFor pairing, autoComplete='email', and required. Submit button uses the canonical loading prop (sets aria-busy + disabled). The post-submit confirmation state uses the Empty primitive's region landmark with aria-labelledby pointing at the title. Errors render in an Alert with role='alert'.
Related components
Token budget: 1100
Verified against @hex-core/components@1.9.0