Auth Template

1import * as React from 'react';
2 
3// @interlace/auth-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/auth-template
5// What changed since: https://ds.interlace.tools/c/auth-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — AuthTemplate
10 *
11 * Full-page surface for sign-in / sign-up / password-reset / verify-email
12 * flows. Centred narrow column with brand mark at top, form in the middle,
13 * helper link at the bottom ("Already have an account?" / "Forgot password?").
14 *
15 * One template, four variants — pick via the `variant` prop. The form
16 * itself is consumer-supplied (most apps want a custom action / OAuth
17 * row); the template wraps it in the canonical layout.
18 *
19 * ## MIN_VIEWPORT — 320
20 *
21 * ## Anatomy
22 *
23 *   <main data-slot="auth-template" data-min-viewport="320">
24 *     <Container size="prose">
25 *       <SectionBoundary name="auth-header">{logo} {title} {description}</SectionBoundary>
26 *       <SectionBoundary name="auth-form">{form}</SectionBoundary>
27 *       <SectionBoundary name="auth-footer">{footer}</SectionBoundary>
28 *     </Container>
29 *   </main>
30 */
31 
32import { cn } from '@/lib/utils';
33import { Container } from '@/components/ui/container';
34import { SectionBoundary } from '@/components/ui/section-boundary';
35import { Stack } from '@/components/ui/stack';
36import { Typography } from '@/components/ui/typography';
37import { Skeleton } from '@/components/ui/skeleton';
38 
39export const MIN_VIEWPORT = 320 as const;
40 
41type AuthVariant = 'signin' | 'signup' | 'reset' | 'verify';
42 
43interface AuthTemplateProps extends Omit<React.ComponentProps<'main'>, 'title'> {
44  /** Which auth flow this surface represents. Drives default copy. */
45  variant?: AuthVariant;
46  /** Brand mark / logo at the top of the page. */
47  logo?: React.ReactNode;
48  /**
49   * Page title. Default per `variant` (e.g. "Sign in to your account").
50   * Pass to override.
51   */
52  title?: React.ReactNode;
53  /** One-line description under the title. */
54  description?: React.ReactNode;
55  /** The auth form. Consumer-supplied. */
56  form: React.ReactNode;
57  /** Optional footer (e.g. "Already have an account? Sign in"). */
58  footer?: React.ReactNode;
59}
60 
61const DEFAULT_TITLE: Record<AuthVariant, string> = {
62  signin: 'Sign in to your account',
63  signup: 'Create your account',
64  reset: 'Reset your password',
65  verify: 'Verify your email',
66};
67 
68function AuthTemplate({
69  variant = 'signin',
70// … truncated