ForgotPasswordPage

Ready-made password-reset request screen. Two states inside one component — email form, then "check your inbox" confirmation. Wire onSubmit to your provider's `forgetPassword` and the host doesn't need to manage success-state UI.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/forgot-password-page.json

Or import from the workspace package:

import { ForgotPasswordPage, ForgotPasswordPageProps } from "@8maverik8/auth";

Examples

Default

archi

Reset your password

Enter the email associated with your account and we'll send you a reset link.

Remembered it? Back to sign in.

import { ForgotPasswordPage } from "@8maverik8/auth";
import { authClient } from "@/lib/auth-client";

<ForgotPasswordPage
  wordmark="archi"
  onSubmit={async ({ email }) => {
    const res = await authClient.forgetPassword({
      email,
      redirectTo: "/reset-password",
    });
    if (res.error) return { error: res.error.message ?? "Could not send reset link." };
    return { error: null };
  }}
/>

Guidelines

Use the success state's email display — it confirms to the user which inbox to check (catches typos).
Reveal whether the email exists in your system in the response.Always return success even for unknown emails — otherwise you leak account existence. The component already shows generic "check your inbox" copy.