AuthScreen
A full-screen gate: logo, title, form column, ghost footer links. Sign-in, consent, passphrase and delete-confirm are the same shell with different children.
In context
What’s your date of birth?
We ask to confirm you’re old enough to use Athic.
Before you continue
Please review and accept the following.
We’re sorry
You need to be at least 13 to use Athic right now.
We couldn’t load this
Check your connection and try again.
Round-trip encrypted
Choose a passphrase, separate from your login password. It encrypts every entry on this device before it is sent.
Enter your Reconciliation passphrase
The same passphrase you set up, on any device. It’s checked here only, never stored.
Round-trip encrypted
Choose a passphrase, separate from your login password. It encrypts every entry on this device before it is sent.
Your account
This permanently deletes every discussion, reflection and journal entry. This cannot be undone. First, verify it’s really you.
Your account
Type your email address (maria@example.com) to confirm.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
logo | ReactNode | No | — |
title | ReactNode | No | — |
description | ReactNode | No | — |
children | ReactNode | No | — |
footer | ReactNode | No | — |
tone | "navy" | "cream" | undefined | No | cream |
align | "center" | "start" | undefined | No | center |
header | ReactNode | No | — |
progress | AuthScreenProgress | undefined | No | — |
busy | boolean | undefined | No | false |
backdrop | { image: string; overlay?: string | undefined; } | undefined | No | — |
fieldStyle | "solid" | "translucent" | undefined | No | — |
buttonStyle | "default" | "classic" | undefined | No | — |
linkStyle | "default" | "plain" | undefined | No | — |
lead | ReactNode | No | — |
columnWidth | string | number | undefined | No | — |
frame | "full" | "column" | undefined | No | — |
footerPlacement | "pinned" | "inline" | undefined | No | — |
Accessibility
A <section> with one h1 (the title). The form column is a real <fieldset>, so busy disables every field in it natively and sets aria-busy on the screen. Footer links keep a 44px target. progress renders a role="progressbar" with "Step 2 of 3" as its name. Put role="alert" on error text you place in the form so a screen reader announces it.
data-rebar-* attributes
data-rebar-component="auth-screen", data-rebar-tone="navy" | "cream", data-rebar-align="center" | "start", data-rebar-busy. Parts: header, main, logo, progress, title, description, form, footer.
Migrating to Ant Design
No AntD equivalent: build it from a Layout, Typography.Title and a Form. The shell is layout only, so the form children carry over unchanged.
Classic appearances (opt-in)
backdrop={{ image, overlay }} paints a cover photo under a gradient (--rebar-auth-backdrop-*). fieldStyle="translucent" makes glass fields, buttonStyle="classic" compact pills (cream primary, outlined secondary, pressed overlay), linkStyle="plain" small plain ghost links, footerPlacement="inline" puts the footer in the column, frame="column" a centred 480px column, columnWidth caps the reading column, lead adds content above the title. Spacing, title, description, field and link values come from --rebar-auth-* tokens (padding, gap, form-gap, form-max-width, logo-display, title-size, description-, field-, footer-, link-). Defaults are unchanged.