ResetPasswordPage

Landing page for the password-reset email link. Reads `?token=…` from the URL, takes new password + confirm, calls onSubmit({ token, password }). Built-in min-length and "passwords don't match" validation.

Install

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

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

Or import from the workspace package:

import { ResetPasswordPage, ResetPasswordPageProps } from "@8maverik8/auth";

Examples

Default

In production, wrap with `<Suspense>` and read the token via `useSearchParams()`.

archi

Set a new password

Choose something you don't use elsewhere.

Remembered it? Back to sign in.

"use client";
import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { ResetPasswordPage } from "@8maverik8/auth";
import { authClient } from "@/lib/auth-client";

export default function Page() {
  return (
    <Suspense fallback={null}>
      <Inner />
    </Suspense>
  );
}

function Inner() {
  const token = useSearchParams().get("token") ?? "";
  return (
    <ResetPasswordPage
      wordmark="archi"
      token={token}
      onSubmit={async ({ token, password }) => {
        const res = await authClient.resetPassword({ token, newPassword: password });
        if (res.error) return { error: res.error.message ?? "Could not reset." };
        return { error: null };
      }}
    />
  );
}

Guidelines

Extract the token from the URL in the page wrapper and pass it as a prop. The component itself doesn't read query params.
Reuse the form for first-time password set after invite.That's `<InvitePage>` — different copy, different success path, different state shape.