Auth Card React component
A sign-in, sign-up and forgot-password card in one: social sign-in buttons, email and password fields with inline validation, a show-password toggle, a password strength meter, a loading state driven by your onSubmit promise and a check-your-email screen.
About the Auth Card component
Auth Card is a complete sign-in screen in one card: it switches between Sign in, Sign up and Forgot password, cross-fading the title and smoothly changing height as fields come and go. It has Google, GitHub and Apple buttons above an "or continue with email" divider, email and password fields with a show-password button, a Forgot password? link and a link at the bottom to switch between signing in and signing up.
Fields are checked when people leave them or press the button: an empty or malformed email, a missing password, a missing name, and on sign up a password shorter than minPasswordLength. On sign up a four-bar meter rates the password. onSubmit receives { mode, email, password, name }; while its promise runs the button shows a spinner and the form is disabled, a rejection or a returned string appears as an error above the button, and in forgot mode success switches to a "Check your email" screen.
When to use it
Use it for the login and registration screen of a SaaS app, a dashboard, a members area or a customer portal, centered on its own page or inside a modal.
Pass brand for your logo and termsHref and privacyHref to show the consent line on sign up.
Installation
Add the Auth Card component to your project with the shadcn CLI. It lands in components/auth-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/auth-cardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AuthCard /> accepts 13 props, all optional.
| Prop | Type | Default |
|---|---|---|
| mode | "sign-in" | "sign-up" | "forgot" | — |
| defaultMode | "sign-in" | "sign-up" | "forgot" | "sign-in" |
| onModeChange | (mode: AuthMode) => void | — |
| onSubmit Called with the form data. Return a promise: the button shows a spinner while it runs, and a rejection (or a resolved string) is shown as the form error. In forgot mode a resolved promise shows the "check your email" screen. | (data: AuthSubmitData) => void | string | Promise<void | string> | — |
| providers Social sign-in buttons, in this order. Pass [] to hide them. | ("google" | "github" | "apple")[] | ["google", "github"] |
| onProviderClick | (provider: AuthProvider) => void | — |
| brand Logo or mark shown above the title. | React.ReactNode | — |
| showName Ask for a name when signing up. | boolean | true |
| minPasswordLength Minimum password length when signing up. | number | 8 |
| termsHref | string | — |
| privacyHref | string | — |
| theme | "dark" | "light" | "dark" |
- mode"sign-in" | "sign-up" | "forgot"
- defaultMode"sign-in" | "sign-up" | "forgot"Default: "sign-in"
- onModeChange(mode: AuthMode) => void
- onSubmit
Called with the form data. Return a promise: the button shows a spinner while it runs, and a rejection (or a resolved string) is shown as the form error. In forgot mode a resolved promise shows the "check your email" screen.
(data: AuthSubmitData) => void | string | Promise<void | string> - providers
Social sign-in buttons, in this order. Pass [] to hide them.
("google" | "github" | "apple")[]Default: ["google", "github"] - onProviderClick(provider: AuthProvider) => void
- brand
Logo or mark shown above the title.
React.ReactNode - showName
Ask for a name when signing up.
booleanDefault: true - minPasswordLength
Minimum password length when signing up.
numberDefault: 8 - termsHrefstring
- privacyHrefstring
- theme"dark" | "light"Default: "dark"
Show all 13 propsShow fewer
| className | string | — |
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Auth Card FAQ
- How do I connect it to my auth provider?
- Handle onSubmit: call your API, NextAuth, Supabase, Clerk or Firebase with the email, password and name, and throw an Error with a message if it fails; the card shows that message. Redirect yourself after a successful sign in. Social buttons call onProviderClick with "google", "github" or "apple".
- Does it work with password managers?
- Yes. The fields use autocomplete email, current-password on sign in, new-password on sign up and name, so browsers and password managers fill and save them.
- Can I open it on the sign-up form?
- Set defaultMode="sign-up", or control it with mode and onModeChange, for example to keep it in sync with /login and /signup routes.
- Can I hide the social buttons?
- Pass providers={[]}. With three providers the buttons show only their marks so they fit in one row; with one or two they show the name as well.
- Are the provider logos the official ones?
- No, they are simple monochrome marks drawn for this component. If a provider's brand rules require their official button, swap the marks in ProviderMark.
