# AuthLayout

> Centered card shell for auth flows - login, signup, forgot-password, magic-link. Optional brand lockup above the card, optional footer below, optional background pattern for a little texture.

- Category: layout
- Status: stable (since 0.3.0)
- A11y pattern: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
- Tokens: --background-primary, --background-quaternary, --background-tertiary, --foreground-primary, --foreground-secondary, --border-width-thin, --fs-sm
- Playground: https://design.freecodecamp.org/playground#auth-layout
- npm dependencies: `react@>=18 <20`
- Registry dependencies: [theme](https://design.freecodecamp.org/registry/theme.md)
- Files:
  - `AuthLayout.tsx` → `src/ui/auth-layout/AuthLayout.tsx` (raw: https://design.freecodecamp.org/registry/auth-layout/AuthLayout.tsx)
  - `auth-layout.css` → `src/ui/auth-layout/auth-layout.css` (raw: https://design.freecodecamp.org/registry/auth-layout/auth-layout.css)

## Install (copy source)

1. Ensure the theme is installed once per project - tokens.css + base.css imported globally, fonts available. See https://design.freecodecamp.org/registry/theme.md and https://design.freecodecamp.org/registry/starter.md.
2. Copy the files below into `src/ui/auth-layout/` (adjust to your project layout) and import the CSS once from your global stylesheet, e.g. `@import './ui/auth-layout/auth-layout.css';`.
3. Colors, spacing and type come from tokens - tailor the component by editing the copied source; recolour by editing tokens.css, not the component CSS.

## Usage

AuthLayout is the centered-card shell for login, signup, forgot-password,
and magic-link flows. Drop your form inside as children; add a brand
lockup above and a legal footer below via the `brand` and `footer`
slots. Enable `pattern` to turn the background into a muted grid
texture for a little visual interest on otherwise-empty auth routes.

## Accessibility

The card wrapper is a native `<main>` - nothing fancier needed.
Ensure the form inside carries an accessible heading (`<h1>` like
"Sign in") so screen reader users know the purpose of the route.

## Example

```tsx
import { AuthLayout } from './ui/auth-layout/AuthLayout';
import { Input } from './ui/input/Input';
import { Button } from './ui/button/Button';

<AuthLayout brand="freeCodeCamp" footer={<Link href="/forgot">Forgot your password?</Link>}>
  <Input label="Email" type="email" />
  <Button variant="cta" block>Continue</Button>
</AuthLayout>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `brand` | `ReactNode` | no | - |  |
| `footer` | `ReactNode` | no | - |  |
| `pattern` | `boolean` | no | - |  |

## Source: AuthLayout.tsx

```tsx
import React, { forwardRef } from 'react';

export interface AuthLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
  brand?: React.ReactNode;
  footer?: React.ReactNode;
  pattern?: boolean;
}

export const AuthLayout = forwardRef<HTMLDivElement, AuthLayoutProps>(
  ({ brand, footer, pattern, className = '', children, ...rest }, ref) => {
    const classes = [
      'auth-layout',
      pattern && 'auth-layout--pattern',
      className
    ]
      .filter(Boolean)
      .join(' ');
    return (
      <div ref={ref} className={classes} {...rest}>
        {brand !== undefined && (
          <div className='auth-layout__brand'>{brand}</div>
        )}
        <main className='auth-layout__card'>{children}</main>
        {footer !== undefined && (
          <div className='auth-layout__footer'>{footer}</div>
        )}
      </div>
    );
  }
);
AuthLayout.displayName = 'AuthLayout';
```

## Source: auth-layout.css

```css
.auth-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 100vh;
  padding: 32px 16px;
  background: var(--background-primary);
  color: var(--foreground-primary);
}
.auth-layout--pattern {
  background-color: var(--background-primary);
  background-image:
    linear-gradient(var(--background-tertiary) 1px, transparent 1px),
    linear-gradient(90deg, var(--background-tertiary) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
}
.auth-layout__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
.auth-layout__card {
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--background-quaternary);
  border: var(--border-width-thin) solid var(--foreground-secondary);
}
.auth-layout__footer {
  color: var(--foreground-secondary);
  font-size: var(--fs-sm);
}
```

## HTML / vanilla variant

```html
<div class="auth-layout auth-layout--pattern">
  <div class="auth-layout__card">
    <p class="auth-layout__brand">freeCodeCamp</p>
    <button class="btn btn--cta btn--block">Continue</button>
    <p class="auth-layout__footer"><a class="fcc-link">Forgot?</a></p>
  </div>
</div>
```

Interactive behaviours for plain HTML come from the vanilla runtime (data-uikit-* attributes): https://design.freecodecamp.org/registry/vanilla.md - or download https://design.freecodecamp.org/cdn/uikit.global.js once and self-host it (do not hotlink).

## For coding agents

This library is distributed as copyable source, not an npm package. Start at https://design.freecodecamp.org/registry/starter.md, discover components via https://design.freecodecamp.org/llms.txt, and copy files into the consuming project. Keep token names intact; recolour by editing the copied tokens.css.