# AuthCard and AuthLayout

> The sign-in card: a solid card on a deep field, with a logo slot, icon tile, title, footer strip and back link.

Category: Shell. Docs page: https://rime.mjsons.net/components/auth-card

## Installation

```bash
npx shadcn@latest add KezLahd/rime/auth-card
```

AuthLayout paints the auth field (--auth-background, --auth-floor, --auth-sky), centres its child, and takes an optional header (your brand mark, a help link) and footer (a security note). AuthCard frames sign-in, sign-up, MFA, reset and onboarding steps: a logo slot, an optional icon tile, the title (the page's h1) with an optional inline badge, the form, an optional back link and a footer strip.

## Usage

```tsx
import { AuthCard, AuthLayout } from "@/components/shell/AuthCard";

<AuthLayout>
  <AuthCard logo={<Logo />} title="Sign in" subtitle="Use the email you signed up with.">
    …form…
  </AuthCard>
</AuthLayout>
```

## Props: AuthCard

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `ReactNode` |  |  |
| `subtitle` | `ReactNode` |  |  |
| `logo` | `ReactNode` |  | Your logo or wordmark, centred above the title. |
| `icon` | `ReactNode` |  | Icon tile above the title (MFA screens). |
| `badge` | `ReactNode` |  | A small tag beside nothing else: "Admin", "Staging". Sits above the title on one line with it. |
| `children` (required) | `ReactNode` |  |  |
| `footer` | `ReactNode` |  | A strip under the card body: a trust line, a terms link. |
| `width` | `"sm" \| "md" \| "lg"` | `"sm"` | sm 440 (sign-in, MFA), md 520 (set password), lg 720 (onboarding). |
| `back` | `{ href: string; label: string }` |  | A way out, under the form: "Back to sign in". |

## Props: AuthLayout

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` (required) | `ReactNode` |  |  |
| `header` | `ReactNode` |  | A bar across the top of the page: your brand mark at the left, a help link at the right. |
| `footer` | `ReactNode` |  | A strip at the foot of the page: a security note, legal links. |
| `contained` | `boolean` |  | Fill a fixed-height parent instead of the viewport (docs previews). |

## Examples

### Sign in with multi-factor authentication

A brand bar in the header, the card centred, the security note in the footer. Switch between the password, MFA code and authenticator setup steps.

```tsx
<AuthLayout
  header={<Logo />}
  footer={<><IconShield size={14} /> Protected by multi-factor authentication.</>}
>
  <AuthCard icon={<IconLock size={22} />} title="Sign in" subtitle="Use your work email.">
    <Field label="Work email"><TextInput type="email" autoComplete="username" /></Field>
    <Field label="Password"><TextInput type="password" revealable autoComplete="current-password" /></Field>
    <Button size="lg" fullWidth>Continue</Button>
  </AuthCard>
</AuthLayout>
```

### MFA code step

```tsx
<AuthCard icon={<IconShield size={22} />} title="Enter your code" subtitle="Open your authenticator app and enter the 6-digit code.">
  <OtpInput aria-label="Authentication code" value={code} onChange={setCode} onComplete={verify} />
  <Button size="lg" fullWidth disabled={code.length < 6}>Verify</Button>
</AuthCard>
```

### Authenticator setup step

```tsx
<AuthCard width="md" icon={<IconShield size={22} />} title="Set up your authenticator">
  <QrCode value={otpauthUrl} />
  <code>{secret}</code>
  <OtpInput aria-label="Code from your authenticator app" value={code} onChange={setCode} />
  <Button size="lg" fullWidth>Turn on two-step sign-in</Button>
</AuthCard>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--auth-ink` | `var(--ink-inverse)` |
| `--auth-ink-muted` | `rgba(255, 255, 255, 0.78)` |
| `--heading-case` | `none` |
| `--heading-tracking` | `var(--tracking-display)` |

System tokens it reads: `--auth-background`, `--auth-floor`, `--auth-sky`, `--brand-deep`, `--brand-fill`, `--brand-gradient-soft`, `--brand-ink`, `--brand-line`, `--font-body`, `--font-display`, `--ink-brand`, `--ink-heading`, `--ink-inverse`, `--ink-muted`, `--line-brand`, `--line-soft`, `--r-full`, `--r-lg`, `--r-xl`, `--shadow-auth-card`, `--surface-solid`, `--surface-sunken`, `--text-auth-title`, `--text-caption`, `--text-micro`, `--tracking-display`.

## Accessibility

- The title is the page's h1; the layout renders the main landmark.

## Do

- One primary action, full width, size lg.

## Don't

- Don't put navigation inside the card beyond the back link.