A professional sign-up & sign-in

The complete authentication experience, frozen as navigable frames before any UI is built. Walk the flow below in order, then open States to see every loading, empty, error, and fail-closed case the implementation must render. Approving these frames approves the component & package plan in the inventory at the bottom.

STEP 01 · /signup

Create account

Name, inline email availability (✓ / taken), password + strength meter (12+ upper/lower/digit/symbol), confirm-match, Cloudflare Turnstile, Google.

STEP 02 · /login

Sign in

Email + password, show/hide, forgot-password, Turnstile, Google. Hands off to the MFA challenge when a factor is required.

STEP 03 · /signup/verify

Check your inbox

Post-signup "we sent a link" screen with a resend button on a cooldown timer. Ready for when SMTP is wired.

STEP 04 · /verify/email

Verify link landing

The one route, three outcomes state machine: verifying → verified, or expired/invalid with a "send a new link" path.

STEP 05 · /reset

Password reset

Request (unconditional 202, no account enumeration) → confirm new password with the same policy + match validation. Expired-token path.

REF · states

All states

Availability idle/checking/available/taken/error, strength weak→strong, confirm mismatch, Turnstile loading/verified/failed, submit-in-flight, form errors, MFA, verify-gate.

Build inventory approve = approve this plan

Flows (orchestrators)

SignUpFlow → /signup
SignInFlow → /login
EmailVerificationFlow → /verify/email
PasswordResetFlow → /reset

Components

AuthCard
InlineAvailabilityField new
PasswordStrengthMeter new
PasswordConfirmField new
TurnstileField new
ResendCooldownButton new
VerifyStatusPanel new
SocialButton (Google)

Packages

@fuzefront/auth-experience-ui
consumes @fuzefront/security-client
consumes @marsidev/react-turnstile

DS primitives to add first frontend-engineer

InlineValidatedInput (adornment slot)
StrengthMeter tokens/segments
TurnstileContainer shell
Alert info/success variants (if missing)

contract Δ: GET /v1/security/signup/email-available contract Δ: SignupRequest.turnstileToken contract Δ: AuthMethods.captcha + passwordPolicy descriptor

Contract binding

OpenAPI: packages/security/openapi.yaml
Client: @fuzefront/security-client
Feature flag: fuzefront.auth.experience (default OFF)
Endpoints: POST /signup, POST /session, POST /session/password/reset-request, POST /session/password/reset-confirm, POST /verify/email/start, POST /verify/email/confirm, GET /methods, GET /signup/email-available (new)

Status: awaiting review — per-flow approved: false. No UI, tests, or deploy exist yet; merging the approved frames is the gate that fans those out.