# Auth — Page Template for React

> A split-screen sign-in / create-account template: a branded left panel (logo, an oversized value line, checkmarked highlights, and a soft WebGL gradient mesh) beside a centered card that toggles between Sign in and Create account. Labeled email + password fields with a reveal toggle, a genuine validating submit (email format + minimum length, a pending state, and an aria-live error slot), an OAuth / SSO row of generic providers, plus forgot-password and switch-mode links. One signature accent knob; the WebGL surface freezes and every reveal pins its resting pose under reduced motion; the brand panel hides below lg where a compact brand header sits above the full-width card.

- Page: https://crucibleui.com/components/templates/auth
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: ogl
- npm dependencies: motion, ogl

## Install

```bash
npx shadcn@latest add @crucible/auth
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/auth`.

## Props (`AuthTemplateProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand?` | `string` | `"Northlight"` | Product / company name, shown in both the brand panel and the card header. |
| `logo?` | `React.ReactNode` | `a monogram` | Inline logo mark (a 1em-scalable SVG using currentColor). |
| `tagline?` | `string` | — | The oversized value line on the brand panel. |
| `kicker?` | `string` | `"Welcome back"` | Short kicker above the tagline. |
| `highlights?` | `AuthHighlight[]` | — | Checkmarked value points listed beneath the tagline. |
| `quote?` | `{ text: string; attribution: string }` | — | A short attributed quote shown at the foot of the brand panel. |
| `defaultMode?` | `AuthMode` | `"signin"` | Which pane the card opens on. |
| `providers?` | `AuthProvider[]` | — | OAuth / SSO providers. Pass `[]` to hide the row entirely. |
| `onSubmit?` | `(payload: AuthSubmitPayload) => void \| Promise<void>` | — | Genuine submit handler. Receives the typed values (after built-in email / password validation passes). May return a promise — the button shows a pending state until it settles, and a thrown error surfaces in the error slot. |
| `onProvider?` | `(providerId: string) => void` | — | Fires when an OAuth provider button is pressed. |
| `forgotHref?` | `string` | `"#"` | "Forgot password" link target. |
| `termsHref?` | `string` | `"#"` | Terms-of-service link target. |
| `privacyHref?` | `string` | `"#"` | Privacy-policy link target. |
| `accent?` | `string` | `"#6366f1"` | The single signature accent used for the primary button, links, focus rings, and the brand glow. Use a 6-digit hex — it also tints the WebGL mesh and is alpha-suffixed for the highlight discs. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSubmit">`.

## Usage example

```tsx
import { AuthTemplate } from "@/components/crucible/auth";

export default function AuthTemplateDemo() {
  return (
    <div className="relative isolate h-[560px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <AuthTemplate className="h-full overflow-y-auto overflow-x-hidden overscroll-contain" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.