# Auth forms

> Five card-sized auth forms — sign in, sign up with live strength, magic link, one-time code and a three-step reset — with inline validation, a shake on error and crossfading success states.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/auth-forms
- Install: `npx shadcn@latest add @geturui-pro/auth-forms`
- Dependencies: motion, lucide-react

## Variants

### Sign in

Email and password with an animated reveal toggle, Google and passkey buttons, a remember-me option and a shake on a bad attempt.

Install: `npx shadcn@latest add @geturui-pro/auth-forms-sign-in`

```tsx
import { SignInCard } from "@/components/examples/auth-forms/sign-in";

export function Login() {
  return <SignInCard onSubmit={(v) => auth.signIn(v)} onProvider={(p) => auth.oauth(p)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| product | `string` | "Northwind" | Name used in the copy. |
| defaultEmail | `string` | — | Prefill the email field. |
| onSubmit | `(v: SignInValues) => void | Promise<void>` | — | Throw an Error to show its message and shake. |
| onProvider | `(p: "google" | "passkey") => void` | — | Provider buttons. |
| forgotHref / signUpHref | `string` | "#" | Link targets. |
| className | `string` | — | Extra classes on the root element. |

### Sign up

Name, email and password with a four-segment strength meter, requirement checks that tick in and a verify-your-email success state.

Install: `npx shadcn@latest add @geturui-pro/auth-forms-sign-up`

```tsx
import { SignUpCard } from "@/components/examples/auth-forms/sign-up";

export function Register() {
  return <SignUpCard onSubmit={(v) => auth.register(v)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| product | `string` | "Northwind" | Name used in the success copy. |
| defaultValues | `Partial<SignUpValues>` | — | Prefill name, email or password. |
| onSubmit | `(v: SignUpValues) => void | Promise<void>` | — | Resolve to show the verify state. |
| termsHref / signInHref | `string` | "#" | Link targets. |
| className | `string` | — | Extra classes on the root element. |

### Magic link

Passwordless email form that slides to a sent state with a dropping envelope and a resend countdown.

Install: `npx shadcn@latest add @geturui-pro/auth-forms-magic-link`

```tsx
import { MagicLinkCard } from "@/components/examples/auth-forms/magic-link";

export function EmailLogin() {
  return <MagicLinkCard onSend={(email) => auth.sendLink(email)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| product | `string` | "Northwind" | Name used in the error copy. |
| defaultEmail | `string` | — | Prefill the field. |
| resendAfter | `number` | 30 | Seconds before resend unlocks. |
| expiresIn | `number` | 15 | Minutes, shown in the copy. |
| onSend | `(email: string) => void | Promise<void>` | — | Send the link. |
| className | `string` | — | Extra classes on the root element. |

### One-time code

Six digit boxes with paste, auto-advance and arrow keys; a wrong code shakes and clears, a right one pops a check, with attempts and a resend timer.

Install: `npx shadcn@latest add @geturui-pro/auth-forms-otp`

```tsx
import { OtpCard } from "@/components/examples/auth-forms/otp";

export function Verify() {
  return <OtpCard destination="maya@northwind.studio" onVerify={(code) => auth.verify(code)} onResend={auth.resend} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| destination | `string` | — | Where the code went. |
| length | `number` | 6 | Number of digits. |
| resendAfter | `number` | 30 | Seconds before resend unlocks. |
| onVerify | `(code: string) => boolean | Promise<boolean>` | — | Return true when valid. The default accepts 246810. |
| onResend | `() => void` | — | Resend handler; also resets attempts. |
| className | `string` | — | Extra classes on the root element. |

### Forgot password

Email, code and new password steps with a progress track, direction-aware crossfades and a card that springs to each step's height.

Install: `npx shadcn@latest add @geturui-pro/auth-forms-forgot-password`

```tsx
import { ForgotPasswordCard } from "@/components/examples/auth-forms/forgot-password";

export function Reset() {
  return <ForgotPasswordCard onRequest={auth.sendReset} onVerify={auth.checkCode} onReset={auth.setPassword} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| defaultEmail | `string` | — | Prefill step one. |
| onRequest | `(email: string) => void | Promise<void>` | — | Send the reset code. |
| onVerify | `(email: string, code: string) => boolean | Promise<boolean>` | — | Validate the code; default accepts any 6 digits. |
| onReset | `(password: string) => void | Promise<void>` | — | Save the new password. |
| signInHref | `string` | "#" | Back to sign in link. |
| className | `string` | — | Extra classes on the root element. |

## Accessibility

- Every field has a visible label; errors set aria-invalid, are linked with aria-describedby and move focus to the first invalid field.
- Loading, sent and success states are announced through status and alert regions, and buttons stay real buttons with clear names.
- The error shake, slides and pops are skipped under reduced motion; only fades remain.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.