AuthLayout
Composable authentication shell for sign-in, sign-up, and recovery flows.
Quick Preview
Composition
Use this public composition when building Auth Layout:
AuthLayout
├── AuthLayoutBrandPanel
│ ├── AuthLayoutBrandLogo
│ ├── AuthLayoutBrandContent
│ └── AuthLayoutMedia
└── AuthLayoutMain
└── AuthLayoutCard
├── AuthLayoutMobileLogo
├── AuthLayoutTopAction
├── AuthLayoutHeader
├── AuthLayoutForm
└── AuthLayoutFooterUsage
<AuthLayout>
<AuthLayoutBrandPanel>{/* marketing content */}</AuthLayoutBrandPanel>
<AuthLayoutMain>
<AuthLayoutCard>
<AuthLayoutHeader>
<AuthLayoutTitle>Sign In</AuthLayoutTitle>
<AuthLayoutDescription>Continue your journey.</AuthLayoutDescription>
</AuthLayoutHeader>
<AuthLayoutForm>{/* dynamic form fields and actions */}</AuthLayoutForm>
</AuthLayoutCard>
</AuthLayoutMain>
</AuthLayout>Examples
Default Auth Layout
Use the layout slots for visual structure only. Keep auth mutations, routing, OAuth handlers, validation, and field configuration in the consuming app.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to each underlying element. |
Accessibility
- Render one page-level heading in either the brand title or the form title.
- Keep labels associated with dynamic form controls.
- Use semantic buttons or links for auth actions, password recovery, and contact affordances.
- Keep provider-specific OAuth copy and icons in the consuming app.