AuthScreen
The page around a sign-in form. On wide screens it adds a brand panel.
SourcePackage @weft-js/warp
Preview
tsx
import { AuthScreen, SignIn } from '@weft-js/warp'export function Split() { return ( <AuthScreen name="weft" quote="We moved forty services in a quarter and never missed a deploy." cite="Mara Lindqvist · weft"> <SignIn heading="h3" title="Welcome back" lede="Sign in to your workspace." providers={PROVIDERS} onSubmit={() => void wait(900)} onForgot={() => {}} onSignUp={() => {}} /> </AuthScreen> )}const wait = (ms: number) => new Promise(done => { setTimeout(done, ms) })const PROVIDERS = [{ id: 'google', label: 'Google', glyph: 'M12 3a9 9 0 1 0 8.5 12H12' }, { id: 'github', label: 'GitHub', glyph: 'M9 8l-5 4 5 4M15 8l5 4-5 4' }]Installation
npm install @weft-js/warpUsage
tsx
import { AuthScreen } from '@weft-js/warp'Accessibility
- The brand panel is decorative, so it is hidden from assistive tech.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
logo | unknown | — | Your logo. |
name | unknown | — | Your product's name. |
quote | unknown | — | A line on the brand panel. |
cite | unknown | — | Who said it. |
brand | unknown | — | Your own brand panel. |
children | unknown | — | What it contains. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="auth"] [data-part="layout"]
layoutbrandmainpanel