Password recovery

Present account recovery without issuing reset credentialsLink to section

PasswordRecoveryPanel gives an application a bounded recovery surface while keeping the sensitive work outside the Block. Supply your own form, error/status copy, help content and footer navigation; your application owns reset-link issuance, email delivery, tokens and password updates.

Canonical identityLink to section

• Category: Authentication, slug auth.
• Block: password-recovery, export PasswordRecoveryPanel.
• Canonical source: apps/marketing/content/blocks/auth/password-recovery/.
• Complete entry point: index.tsx.

Copy sourceLink to section

Configure the public UI package and tokens, then create src/components/blocks/password-recovery/index.tsx in your application. Use the Source tab's copy button when available.

If clipboard access is unavailable, select the code manually.

The Preview tab renders the real canonical PasswordRecoveryPanel through a deterministic local fixture. It creates no token, sends no email and performs no network request. The Source tab is the complete canonical file included at build time, not a duplicated implementation.

Install by copying sourceLink to section

Keep the complete file at the application-owned path above. Connect it to your own recovery endpoint or auth provider only after copying, then validate it in your application.

"use client";

import { PasswordRecoveryPanel } from "./blocks/password-recovery";

export function PasswordRecoveryScreen() {
  return (
    <PasswordRecoveryPanel
      description="Enter the email associated with your account."
      form={
        <form
          className="space-y-4"
          onSubmit={(event) => event.preventDefault()}
        >
          <label className="grid gap-2 text-sm">
            Email
            <input
              className="rounded-md border bg-background px-3 py-2"
              name="email"
              type="email"
              autoComplete="email"
            />
          </label>
          <button className="rounded-md border px-4 py-2" type="submit">
            Request recovery link
          </button>
        </form>
      }
      help={<span>Use the address your application recognizes.</span>}
      footer={<a href="/sign-in">Back to sign in</a>}
    />
  );
}

Use "use client" only in the consumer component that owns interactive state or handlers. The canonical Block remains presentation-only.

What the application ownsLink to section

form is required. error, status, help, footer, title, description and className are optional. Use error for an actual failed recovery attempt and status for truthful consumer-owned progress or success copy.

Do not reveal whether an account exists unless your security policy explicitly permits it. Token lifetime, replay protection, rate limiting, password policy, email delivery, recovery URLs and account updates belong to your auth/backend implementation.

Responsive and accessibility notesLink to section

The Block keeps a narrow readable layout and semantic theme classes. Keep every input labelled and preserve visible focus. Error content uses role="alert"; status content uses role="status". Avoid conflicting simultaneous messages unless your application has a clear reason and test the real flow with keyboard and assistive technology.

Ownership and updatesLink to section

Your application owns the copied source and does not receive automatic updates. Review future canonical changes deliberately, preserve local customizations and validate it in your application before adoption.

Boundaries and next stepsLink to section

No password-reset token generation, email delivery, account lookup, password mutation, session update, Auth.js configuration, authorization, persistence, analytics or production secret is implemented here.

Explore the Blocks catalog, return to Sign in, or compare Starters for a complete application foundation.