SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsfrontend-auth-flow-contracts

frontend-auth-flow-contracts

Frontend & websites

View repository

Updated 10-16 06:44

About this skill

Frontend auth flow contracts

Auth UI is a browser/backend contract, not just a form. Use this skill when the frontend must preserve auth intent, expose the right browser hints, handle retry and expiry states, and avoid turning auth navigation into an open redirect or unusable passkey flow.

Boundary with sibling skills

  • Use frontend-security-baseline for token storage, cookies, SameSite, CSRF, Origin/content-type gates, CSP, XSS, source maps, and open-redirect security primitives.
  • Use deeplink-hydration for generic router readiness, cold direct-navigation tests, and URL-to-screen reconstruction. This skill owns the auth-specific returnTo/callback contract layered on top.
  • Use a11y-contract-testing for generic role/name/focus semantics. This skill adds auth-specific autofill, error, fallback, and passkey test cases.
  • Use constraint-validation-contracts for native HTML form-validity wiring: the Constraint Validation API, :invalid/:user-invalid timing, and setCustomValidity()/reportValidity(). This skill owns only the auth-specific autocomplete fields and credential-handling rules layered on top.
  • Do not implement backend crypto here: Argon2/Bcrypt, CBOR, ECDSA/RSA/EdDSA, and session-token storage are server/security implementation details. Translate them only into frontend contracts such as expiry, retry, challenge, and fallback behavior.

For detailed checklists, read references/browser-auth-contracts.md.

Default workflow

  1. Identify the flow: login, signup, password reset, email verification, one-time code sign-in, passkey registration/authentication, auth callback, or sensitive account action.
  2. Define the browser-visible contract before editing: URL inputs, allowed return destinations, form fields/autocomplete, pending/expired/retry states, error copy, and fallback paths.
  3. Add or update tests that enter from a cold URL, assert accessible form/error semantics, and cover failure states (expired code, invalid return URL, passkey cancel/unsupported/pending).
  4. Keep backend constraints explicit in the UI contract: server-issued challenges, one-time code invalidation, rate-limit/retry windows, and fresh verification for high-risk actions.

Quick contract map

Area Frontend contract
Auth redirects Preserve intended destination, but validate returnTo/next/callback targets before restoring.
Password forms Do not silently trim/normalize/sanitize credentials; use correct autocomplete and generic login errors.
Email/code flows Show expiry/retry/resend state; always set autocomplete="one-time-code" (a standard hint — iOS/macOS Safari autofills from it) and add the WebOTP API for Android Chrome's SMS retrieval; avoid account enumeration.
Passkeys/WebAuthn Use server challenges, feature detection, conditional mediation fallback (its promise can stay pending indefinitely — never gate the login UI on awaiting it), and passkey autofill hints.
Sensitive actions Require fresh identity verification before password/email/passkey/account destructive changes.
Tests Direct-navigation auth URLs, accessible errors, autocomplete attributes, invalid-return rejection, expired-code and passkey-cancel paths.

PR-worthiness gate

Require one concrete auth flow and a browser-visible contract failure: lost or unsafe return destination, incorrect credential/autocomplete behavior, enumerating error, expired/retry state with no recovery, passkey fallback failure, or missing fresh verification for a sensitive action. Add the smallest flow test.

Reject weak findings: token/cookie/CSP/CSRF primitives owned by frontend-security-baseline, backend cryptography choices, generic form validation with no auth-specific contract, or a passkey/OTP API mention whose cancel, expiry, fallback, and error paths already work.

Output shape

A good auth-flow review deliverable names the specific flow under review (login, signup, reset, verification, one-time code, passkey, callback, or sensitive action). It states the browser-visible contract that flow must uphold: URL inputs, returnTo/ callback validation, autocomplete/credential fields, and pending/expired/retry/error states. It identifies the one failing contract with concrete evidence (URL, field, state, or test), then gives the minimal fix direction rather than a backend redesign.

Sources