AuthLayout

A deterministic authentication page frame with focused and responsive brand-split presentations.@gemologic/sheen-patterns · application

Playground

contentWidth

Northstar

<AuthLayout label="Sign in" brand={<strong>Northstar</strong>} contentWidth="md"><Button variant="solid" tone="accent">Continue with SSO</Button></AuthLayout>

Variant matrix

Low-level focused frame

Northstar

contentWidth: sm

Northstar

contentWidth: md

Northstar

Anatomy

Package

@gemologic/sheen-patterns

Source

packages/patterns/src/AuthLayout.tsx

Tokens

--sheen-color-bg
--sheen-color-bg-raised
--sheen-color-bg-subtle
--sheen-color-border
--sheen-color-accent-subtle
--sheen-space-section
--sheen-elevation-raised

Accessibility

Role: main, complementary, section, heading, footerKeyboard: Tab, Shift+Tab

Do

Render AuthLayout as the page's single main landmark.
Keep provider configuration, network requests, errors, redirects, and session state in the application.
Use complete server-known brand and authentication markup so hydration has one owner.

Do not

Do not mount AuthLayout inside AppShell or another main landmark.
Do not put secrets, authorization codes, or raw identity-provider errors in client markup.
Do not branch the initial layout on browser width; the split collapse is CSS-only.

Generated props

Name	Type	Default	Description
`presentation`	`"focused" \| "brand-split" \| undefined`	`focused`	Centered focused layout or two-pane brand-split layout. The split mode requires its aside contract.
`aside`	`JSX.Element`	—	Required product context, illustration, or testimonial in brand-split mode.
`asideLabel`	`string \| undefined`	—	Required accessible name for the brand-split complementary region.
`asidePosition`	`AuthLayoutAsidePosition \| undefined`	`start`	Logical placement of the brand region in split mode.
`ref`	`HTMLElement \| ((element: HTMLElement) => void) \| undefined`	—	Native main-landmark reference.
`label` *	`string`	—	Required accessible name for the authentication page's main landmark.
`brand` *	`JSX.Element`	—	Persistent app-owned product identity displayed above the authentication surface.
`children` *	`JSX.Element`	—	Authentication controls and status. The application owns providers, requests, errors, redirects, and session state.
`footer`	`JSX.Element`	—	Optional support, privacy, terms, or implementation links below the authentication surface.
`contentWidth`	`AuthLayoutContentWidth \| undefined`	`md`	Bounded authentication-content width.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.