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.
Sign in
sign-in.tsxEmail and password with an animated reveal toggle, Google and passkey buttons, a remember-me option and a shake on a bad attempt.
| 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
sign-up.tsxName, email and password with a four-segment strength meter, requirement checks that tick in and a verify-your-email success state.
| 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
magic-link.tsxPasswordless email form that slides to a sent state with a dropping envelope and a resend countdown.
| 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
otp.tsxSix 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.
| 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
forgot-password.tsxEmail, code and new password steps with a progress track, direction-aware crossfades and a card that springs to each step's height.
| 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. |
Install the whole set
Installs every auth forms variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
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.