Auth
The frame of sign-in, sign-up and password recovery screens. The fields are the app's (TextField, password-input, input-otp, password-rules).
Overview
- `AuthLayout`: puts the
logoon top and the content centered. Withbrand(product message, illustration) the page splits in two on wide screens, the brand area on a muted surface or, withbrandSurface="brand", the theme's brand color; without it, the column sits on a muted page. - `AuthCard`: the form's card —
titleas the page'sh1,description, your fields, and a centeredfooterfor the links between screens. - `AuthSubmit`: the full-width submit button, with a spinner while
isPending. - `ResendCode`: "Resend code" behind a cooldown (
cooldownseconds, 60 by default, started on mount). It's disabled with anm:sscountdown, thenonResend(pending while its promise runs) restarts it.
The stories show sign-in, forgot password and a two-step reset (the server checks the code, then the new password follows the rules).
Built-in text is in English; translate ResendCode with i18n.labels.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/auth/auth.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- cn@^0.5.0
- Registry
- @fma-ds/button@fma-ds/card@fma-ds/spinner@fma-ds/brand