Auth Layout
Build a shared auth route layout with a composable image panel and centered content area.
Use the auth layout primitives in app/auth/layout.tsx. They handle the full-height responsive
two-column frame while each route supplies its own page content.
Import layout primitives from @tulip-systems/auth/components. They are presentational components, not
server-only auth behavior.
import {
AuthLayout,
AuthLayoutContent,
AuthLayoutImage,
AuthLayoutImageFooter,
AuthLayoutImageHeader,
} from "@tulip-systems/auth/components";
import { AuthProvider } from "@tulip-systems/auth/client";
import Link from "next/link";
import { config } from "@/lib/config/base";
import { authClient } from "@/server/auth/client";
export default function Layout(props: { children: React.ReactNode }) {
return (
<AuthProvider authClient={authClient}>
<AuthLayout>
<AuthLayoutImage src="/images/auth-background.jpeg" alt="">
<AuthLayoutImageHeader>
<Link href="/">{config.general.name}</Link>
</AuthLayoutImageHeader>
<AuthLayoutImageFooter>Developed by NewCode</AuthLayoutImageFooter>
</AuthLayoutImage>
<AuthLayoutContent>{props.children}</AuthLayoutContent>
</AuthLayout>
</AuthProvider>
);
}Layout primitives
| Component | Responsibility |
|---|---|
AuthLayout | Outer responsive auth screen. |
AuthLayoutImage | Decorative image column, hidden below the large-screen breakpoint. |
AuthLayoutImageHeader | Top-positioned image-panel content, usually a brand link. |
AuthLayoutImageFooter | Bottom-positioned image-panel content, usually a credit or quote. |
AuthLayoutContent | Centered content column for route page content. |
AuthLayoutImage accepts src, alt, priority, sizes, and className. Use an empty alt
for a decorative background image.
Custom image content
The header and footer are positioning slots, not required content. You can render your own content inside the image panel when the standard top/bottom convention is not appropriate.
<AuthLayoutImage src="/images/auth-background.jpeg" alt="">
<div className="relative z-20">A custom message</div>
</AuthLayoutImage>Keep application branding and marketing copy in the app. The auth package only provides layout and positioning.