AuthResetPassword

'Set a new password' page paired with a reset link. Two fields (new password + confirm) with manual confirm-match validation; the opaque token is forwarded verbatim to adapter.resetPassword.

Installation

pnpm

pnpm dlx @hex-core/cli add auth-reset-password

Usage

tsx

import { AuthResetPassword } from "@/components/ui/auth-reset-password"

Mock adapter (showcase / tests)

Demo with the in-memory mock adapter; pass any non-empty token.

tsx

import { AuthResetPassword, mockAuthAdapter } from "@hex-core/components";

// Token typically comes from useSearchParams() or page-level searchParams prop.
<AuthResetPassword adapter={mockAuthAdapter} token="demo-token" />

Reading the token from Next.js searchParams

In an App Router page, await searchParams server-side and pass the token through to a client wrapper that owns the AuthAdapter binding.

tsx

export default async function ResetPasswordPage({ searchParams }) {
  const params = await searchParams;
  const token = typeof params.token === "string" ? params.token : "";
  return <ResetPasswordClient token={token} />;
}

API Reference

Prop	Type	Default	Description
`adapter`required	`object`	—	AuthAdapter implementation. The block calls adapter.resetPassword({ token, password }) on submit.
`token`required	`string`	—	Reset token forwarded verbatim to adapter.resetPassword. Typically read from a `?token=…` URL parameter by the consumer's route. The block does NOT validate the token shape — that's the adapter's responsibility.
`signInHref`	`string`	/sign-in	Href for the 'Back to sign in' link rendered below the form.
`passwordMinLength`	`number`	8	Minimum password length used by client-side validation and the helper text below the password field.
`className`	`string`	—	Additional classes applied to the outer flex wrapper.
`onSuccess`	`function`	—	Called after the password is updated successfully with the adapter's redirect target: (redirect: string \| undefined) => void.

AI Guidance

When to use

Use as the destination of the reset link sent by auth-forgot-password. Pair the two: forgot dispatches the link, this block consumes the token from the URL and lets the user pick a new password.

When not to use

Don't use to validate the token — that's the adapter's job. Don't use for in-app password change while signed in (use a settings panel with the form components instead).

Common mistakes

Hard-coding `token` to an empty string when the URL param is absent — the block surfaces a 'link is invalid or expired' error, but the consumer should redirect to /forgot-password instead. Read searchParams in the route and pass it through.
Validating the token shape inside the block — the block treats it as opaque on purpose. Validate inside adapter.resetPassword and surface the error via { ok: false, error }.
Skipping onSuccess and relying on adapter.redirect alone — the redirect is informational; the consumer's onSuccess handler is what actually navigates after the password is saved.
Setting passwordMinLength inconsistently between sign-up and reset-password — keep them aligned (both default to 8) so users don't hit a stricter check on reset than they did on signup.

Accessibility

Both inputs use autoComplete='new-password' and have explicit Label htmlFor pairing. The password helper text is wired via aria-describedby. Submit button uses the canonical loading prop (sets aria-busy + disabled). Errors render in an Alert with role='alert' so they're announced.

Related components

Token budget: 1300

Verified against @hex-core/components@1.9.0

Edit this page on GitHub