FocusedAuthLayout
A centered authentication card for concise OAuth, OIDC, SSO, or credential flows.@gemologic/sheen-patterns · applicationPlayground
Northstar
Welcome back
Use your organization account.
<FocusedAuthLayout brand={<strong>Northstar</strong>} title="Welcome back" description="Use your organization account." contentWidth="sm"><Button variant="solid" tone="accent">Continue with SSO</Button></FocusedAuthLayout>Variant matrix
OIDC-only sign in
Northstar
Welcome back
Use your organization account.
contentWidth: sm
Northstar
Welcome back
Use your organization account.
contentWidth: md
Northstar
Welcome back
Use your organization account.
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/AuthLayout.tsx- Tokens
--sheen-color-bg--sheen-color-bg-raised--sheen-color-border--sheen-color-fg-muted--sheen-space-section--sheen-elevation-raised
Accessibility
Role: main, section, heading, footerKeyboard: Tab, Shift+TabDo
- Prefer this layout when authentication is one or two provider actions.
- Give every provider action explicit visible text.
- Keep errors beside the controls and retain the same form owner while retrying.
Do not
- Do not turn a provider button into a link unless it performs immediate URL navigation.
- Do not imply that the layout performs OAuth or stores credentials.
- Do not replace the card with a spinner during authentication.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
ref | HTMLElement | ((element: HTMLElement) => void) | undefined | — | Native main-landmark reference. |
brand * | JSX.Element | — | Persistent app-owned product identity above the authentication card. |
title * | string | — | Required visible page heading and accessible main-landmark name. |
description | JSX.Element | — | Optional provider, organization, or next-step guidance below the heading. |
children * | JSX.Element | — | App-owned authentication controls and live status. |
footer | JSX.Element | — | Optional support and legal destinations below the card. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 1 | Semantic heading level for the visible authentication title. |
contentWidth | AuthLayoutContentWidth | undefined | sm | Bounded card width. |