fma-ds

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).

originalMITexperimentalChangelogRegistry JSON

Overview

  • `AuthLayout`: puts the logo on top and the content centered. With brand (product message, illustration) the page splits in two on wide screens, the brand area on a muted surface or, with brandSurface="brand", the theme's brand color; without it, the column sits on a muted page.
  • `AuthCard`: the form's card — title as the page's h1, description, your fields, and a centered footer for the links between screens.
  • `AuthSubmit`: the full-width submit button, with a spinner while isPending.
  • `ResendCode`: "Resend code" behind a cooldown (cooldown seconds, 60 by default, started on mount). It's disabled with an m:ss countdown, then onResend (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

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/auth

    Files land in components/fma-ds/auth/auth.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0