Skip to main content

AuthLayout

AuthLayout

Centered card layout for authentication pages

Tags: component layout authentication

View Demo

AuthLayout provides a centered card layout for authentication flows like login, signup, password reset, and verification pages.

Import​

<script>
  import { AuthLayout } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<AuthLayout>
  <h2 class="text-2xl font-bold mb-4">Sign In</h2>
  <form>
    <Input label="Email" type="email" />
    <Input label="Password" type="password" class="mt-4" />
    <Button class="mt-6 w-full">Sign In</Button>
  </form>
</AuthLayout>

Props​

Prop Type Default Description
logo Snippet - Custom logo
logoSubtitle string - Subtitle for default logo
logoEnvironment 'local' | 'dev' | 'demo' - Environment indicator
footerLinks FooterLink[] [] Footer links
footer Snippet - Custom footer content
showBackground boolean false Show decorative background
backgroundVariant 'default' | 'gradient' | 'pattern' 'default' Background style
maxWidth 'sm' | 'md' | 'lg' 'sm' Maximum card width
class string - Additional classes
children Snippet required Form content

Types​

interface FooterLink {
  label: string;
  href: string;
  external?: boolean;
}

Add privacy policy, terms, and other links:

<script>
  const footerLinks = [
    { label: 'Privacy Policy', href: '/privacy' },
    { label: 'Terms of Service', href: '/terms' },
    { label: 'Help', href: '/help' },
  ];
</script>

<AuthLayout {footerLinks}>
  <h2>Sign In</h2>
  <!-- Form content -->
</AuthLayout>
<AuthLayout>
  {#snippet logo()}
    <img src="/logo.svg" alt="Company" class="h-12" />
  {/snippet}

  <h2>Welcome Back</h2>
  <!-- Form content -->
</AuthLayout>

With Logo Subtitle​

<AuthLayout logoSubtitle="Sign in to your account">
  <form>
    <!-- Form fields -->
  </form>
</AuthLayout>

Background Variants​

Gradient Background​

<AuthLayout showBackground backgroundVariant="gradient">
  <h2>Create Account</h2>
  <!-- Form content -->
</AuthLayout>

Pattern Background​

<AuthLayout showBackground backgroundVariant="pattern">
  <h2>Reset Password</h2>
  <!-- Form content -->
</AuthLayout>

Card Width​

Adjust card width for different form sizes:

<!-- Narrow (default) -->
<AuthLayout maxWidth="sm">
  <!-- Simple login form -->
</AuthLayout>

<!-- Medium -->
<AuthLayout maxWidth="md">
  <!-- Registration form with more fields -->
</AuthLayout>

<!-- Wide -->
<AuthLayout maxWidth="lg">
  <!-- Multi-step form -->
</AuthLayout>
<AuthLayout>
  {#snippet footer()}
    <p class="text-sm text-muted-foreground">
      Need help? <a href="/support" class="text-primary">Contact support</a>
    </p>
  {/snippet}

  <h2>Verify Email</h2>
  <!-- Content -->
</AuthLayout>

Examples​

Login Page​

<script>
  let email = $state('');
  let password = $state('');
  let loading = $state(false);

  async function handleSubmit() {
    loading = true;
    // Handle login
  }
</script>

<AuthLayout
  logoSubtitle="Sign in to continue"
  footerLinks={[
    { label: 'Privacy', href: '/privacy' },
    { label: 'Terms', href: '/terms' },
  ]}
>
  <form onsubmit={handleSubmit} class="space-y-4">
    <Input label="Email" type="email" bind:value={email} required />
    <Input label="Password" type="password" bind:value={password} required />
    <div class="flex items-center justify-between">
      <Checkbox label="Remember me" />
      <a href="/forgot-password" class="text-sm text-primary"> Forgot password? </a>
    </div>
    <Button type="submit" class="w-full" disabled={loading}>
      {loading ? 'Signing in...' : 'Sign In'}
    </Button>
  </form>

  <p class="mt-6 text-center text-sm text-muted-foreground">
    Don't have an account? <a href="/signup" class="text-primary">Sign up</a>
  </p>
</AuthLayout>

Registration Page​

<AuthLayout maxWidth="md" showBackground backgroundVariant="gradient">
  <h2 class="text-2xl font-bold mb-6">Create your account</h2>

  <form class="space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <Input label="First Name" required />
      <Input label="Last Name" required />
    </div>
    <Input label="Email" type="email" required />
    <Input label="Password" type="password" required />
    <Input label="Confirm Password" type="password" required />

    <Checkbox>
      I agree to the <a href="/terms">Terms of Service</a>
    </Checkbox>

    <Button type="submit" class="w-full">Create Account</Button>
  </form>
</AuthLayout>

Two-Factor Authentication​

<AuthLayout logoSubtitle="Verify your identity">
  <div class="text-center mb-6">
    <p class="text-muted-foreground">Enter the 6-digit code from your authenticator app</p>
  </div>

  <OTPInput bind:value={code} autoFocus onComplete={verifyCode} />

  <p class="mt-6 text-center text-sm text-muted-foreground">
    Can't access your authenticator? <a href="/recovery" class="text-primary">Use recovery code</a>
  </p>
</AuthLayout>

Use Cases​

  • Login / Sign In
  • Registration / Sign Up
  • Forgot Password
  • Password Reset
  • Email Verification
  • Two-Factor Authentication
  • Account Recovery

Accessibility​

  • Centered, focused layout
  • Clear form structure
  • Semantic headings
  • Link indicators
On this page