SHEET 02
Auth Card
block / auth
Sign-in / sign-up card combining SSO providers with an optional email + password form.
- type
- block
- files
- 1
- registry deps
- button, card, input, label, @automindz/sso-buttons
- npm deps
- lucide-react
installs
- components/automindz/auth-card.tsx
- SSO row plus optional email + password form
- sign-in / sign-up modes from one component
- Inline error region, no toast dependency
Omit onSubmitCredentials for an SSO-only card. Set mode="sign-up" for the register variant.
Variations
one state per section
01
Sign in, SSO and credentials
Submit empty to see field-level validation; errors clear as you type. Submitting locks the whole fieldset, not just the button.
fluid
02
Sign up, rejected by the server
Minimum-length hint until the field is wrong, then the error replaces it. A server rejection renders once, above the submit.
fluid
03
SSO only
Omit onSubmitCredentials and the form, divider and hints disappear. No prop juggling to hide passwords.
fluid
04
Credentials accepted
Pass successMessage and the card swaps to a terminal state instead of leaving a live form behind mid-redirect.
fluid