Auth

Composed authentication templates — screens, not primitives. Six flows: login, signup, forgot password, reset password, verify (OTP code · magic-link-sent), and MFA code. Two layouts each: centered card (default, SaaS apps) and --split with a swappable brand panel (marketing-led products). Pure CSS scaffolding — every control is an existing primitive (.lb-field, .lb-input, .lb-btn, .lb-checkbox, .lb-link, brand icons). The auth engine is yours — Clerk, Supabase, or your own; forms ship unwired. Consumed here: Card · Forms · Input · Checkbox · Button · Link · brand Icons.

a11y & 2026 patterns (built in): visible labels on every field — never placeholder-only; full autocomplete set (WCAG 1.3.5): username webauthn on the login email (passkey autofill, the FIDO-primary pattern), current-password / new-password, one-time-code. OTP entry is a single input — six separate boxes break SMS autofill and screen readers. A passkey button is an optional secondary slot, never the signup credential (enrollment is post-signup).

A · Login — centered card

Social row trailing (below the form fields it's leading — flip by markup order around the divider). Email carries autocomplete="username webauthn"; the fingerprint button is the optional passkey slot.

B · Login — --split with brand panel

Same card, second layout. The left panel is a slot — drop in a product shot, testimonial, or brand art. Collapses to form-only below 768px. Applies identically to every screen on this page.

C · Signup — social leading

Social row leading (before the form). Password uses autocomplete="new-password"; no password-confirm field — the eye toggle covers verification. Terms consent is a required checkbox. Passkey enrollment happens after signup, never here.

D · Forgot password — request + reset

Two separate screens, per the production flow: request (email only) → email link/code → reset (new password only, shown after identity is verified).

E · Verify — OTP code · magic-link sent

Two variants of one skeleton, because providers ship both strategies. The code field is one input with autocomplete="one-time-code" + inputmode="numeric" — SMS/email autofill just works.

F · MFA — two-factor code

Reuses the verify skeleton — authenticator-app flavor, with the backup-code escape hatch.

Usage

Pure CSS — nothing to init (the password eye-toggle comes from the existing data-lb-password field behavior). Forms ship unwired: attach your own submit handlers to your auth provider. On a real page, .lb-auth fills the viewport (min-height: 100vh on the host or body-level layout).

<div class="lb-auth">                             <!-- or .lb-auth.lb-auth--split -->
  <!-- split layout only: -->
  <!-- <div class="lb-auth__panel">…brand slot…</div> <div class="lb-auth__main"> -->
  <div class="lb-card lb-card--padded lb-card--elevated lb-auth__card">
    <div class="lb-auth__head">
      <span class="lb-auth__logo" data-lb-icon="letbe"></span>
      <h1 class="lb-auth__title">Welcome back</h1>
      <p class="lb-auth__subtitle">Log in to continue.</p>
    </div>
    <div class="lb-auth__social">                   <!-- optional; --row for icon-only -->
      <button class="lb-btn lb-btn--secondary lb-btn--medium"><span class="lb-btn__icon" data-lb-icon="google"></span> Continue with Google</button>
    </div>
    <div class="lb-auth__divider">or</div>
    <form class="lb-form lb-form--compact">
      <div class="lb-field">
        <label class="lb-label" for="email">Email</label>
        <div class="lb-input-wrap"><input class="lb-input lb-input--medium" id="email" type="email" autocomplete="username webauthn"></div>
      </div>
      <div class="lb-field" data-lb-password>
        <label class="lb-label" for="pw">Password</label>
        <div class="lb-input-wrap"><input class="lb-input lb-input--medium" id="pw" type="password" autocomplete="current-password"></div>
      </div>
      <button class="lb-btn lb-btn--primary lb-btn--medium" type="submit">Log in</button>
    </form>
    <p class="lb-auth__meta">No account? <a class="lb-link" href="/signup">Sign up</a></p>
  </div>
</div>