Skip to content

Authentication flows

Preview Available in release assets

Compose sign-in, recovery, verification, and sign-out pages from native forms and links while leaving identity and security truth on the server.

Server contract

Use .thin-auth-flow on a stable main or section and a real form method/action. Applications must supply secure transport, CSRF protection, session cookies, rate limits, validation, recovery tokens, and redirect allowlists. Datastar is optional transport only.

Real links and server-submitted forms retain complete authentication and preference workflows without Datastar or JavaScript.

Authentication flows primary example

Show code
<main class="thin-auth-flow" id="auth-flow">
  <h1>Sign in</h1>
  <form action="/api/advanced/auth-settings?flow=sign-in" method="post" data-on:submit="@post('/api/advanced/auth-settings?flow=sign-in')">
    <label class="thin-field">Email address<input class="thin-input" name="email" type="email" autocomplete="username" required />
  </label>
  <label class="thin-field">Password<input class="thin-input" name="password" type="password" autocomplete="current-password" required />
</label>
<input type="hidden" name="csrf" value="server-issued-token">
<div class="thin-auth-actions">
  <button class="thin-button">Sign in</button>
  <a href="/forgot-password">Forgot password?</a>
</div>
</form>
<p class="thin-auth-status">The server owns sessions, throttling, verification, redirects, and generic credential errors.</p>
</main>

Anatomy

  • Page heading
  • Server-submitted credential form
  • Explicit labels and autocomplete tokens
  • Server-issued anti-forgery value
  • Primary submit
  • Durable recovery or alternate-flow links
  • Server status/error region

Variants and sizes

  • Sign in
  • Forgot password
  • Reset password
  • Email verification
  • Sign out confirmation

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Idle
  • Pending
  • Generic credential error
  • Rate limited
  • Expired link
  • Verification sent
  • Authenticated redirect
  • Network failure
  • Reconnect after morph

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Submit posts native named values. The server performs authentication, anti-forgery checks, throttling, session rotation, authorization, audit, and safe redirect selection. Optional Datastar replaces the whole identified flow with the same server response; it never stores credentials or claims success optimistically.

Accessibility

Use labelled native inputs, correct autocomplete tokens, visible instructions, generic but actionable errors, and predictable focus on the returned heading or error summary. Do not disable paste, reveal account existence, use color alone, or make a live region announce password contents.

Contract
NATIVE
Basis
Native labelled forms, inputs, checkboxes, selects, and recovery links
Evidence
  • tests/unit/library/auth-settings-recipes.test.ts

API

Use .thin-auth-flow on a stable main or section and a real form method/action. Applications must supply secure transport, CSRF protection, session cookies, rate limits, validation, recovery tokens, and redirect allowlists. Datastar is optional transport only.

Behavior tier: datastar-optional

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Real links and server-submitted forms retain complete authentication and preference workflows without Datastar or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/auth-settings/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes