Change Password

Auth40: Change Password

A full-height, centered change-password screen: a heading and description above a bordered card holding a current-password field with an inline forgot-password link, plus new-password and confirm-password fields that each carry an eye/eye-off show/hide toggle, a submit button, and a cancel prompt line beneath the card.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth40?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth40?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth40.tsx, plus the button, input, and field shadcn/ui primitives it uses for the submit and toggle buttons, the password inputs, and the labeled field rows.

Quick start

The installed file exports auth40Demo alongside the block: the exact props behind the preview above. Spread it to get a working change-password screen in one line.

import { Auth40, auth40Demo } from "@/components/beste/block/auth40";

export default function Page() {
  return <Auth40 {...auth40Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Auth40 } from "@/components/beste/block/auth40";

export default function Page() {
  return (
    <Auth40
      heading="Change password"
      description="Update the password you use to sign in."
      labels={{
        currentPassword: "Current password",
        newPassword: "New password",
        confirmPassword: "Confirm new password",
        submit: "Update password",
        passwordToggle: "Toggle password visibility",
      }}
      forgotPasswordLink={{ label: "Forgot password?", href: "/reset" }}
      cancelPrompt={{ text: "Changed your mind?", linkLabel: "Cancel", href: "/account" }}
    />
  );
}

Props

type Labels = {
  currentPassword?: string;
  currentPasswordPlaceholder?: string;
  newPassword?: string;
  newPasswordPlaceholder?: string;
  confirmPassword?: string;
  confirmPasswordPlaceholder?: string;
  submit?: string;
  passwordToggle?: string;
};

Behavior notes

• Each of the three field rows renders only when its label is present: labels.currentPassword, labels.newPassword, and labels.confirmPassword gate the current, new, and confirm blocks respectively, and labels.submit gates the submit button, so an empty labels object renders an empty form.
• Show/hide state is tracked by two independent useState booleans (showNew, showConfirm) that toggle each input's type between "password" and "text"; the current-password input has no toggle and stays type="password".
• The form has no submit handler beyond onSubmit={(e) => e.preventDefault()}; the inputs are uncontrolled with no value, onChange, or validation, so collecting and persisting the entered passwords is left entirely to the integrator.
• The forgot-password link is pushed to the right of the current-password label via ml-auto and only appears when forgotPasswordLink is provided; the toggle Button uses variant="ghost" and swaps the Eye/EyeOff lucide icons based on its state.
• Field ids are derived from a single useId() value suffixed with -current, -new, and -confirm, keeping label/input associations unique across multiple instances on one page.
• The <section> is min-h-screen and vertically centers its max-w-md card, so the block is intended to own the full viewport rather than sit inline within other content.