Auth & Onboarding

Build a split sign-in page. Two equal columns. Left column (form side): logo top-left, form vertically centered with max-width 360px. Email input, password input or "Send magic link" button, OAuth providers (Google, GitHub) as a stack of full-width ghost buttons with provider icons left-aligned. A divider with "or continue with" text. Below the form: "New here? Create an account →" link. Right column: muted dark image or generative gradient with a customer quote overlaid at the bottom, white type at 80% opacity. Whole layout responsive. Right column hides under 1024px.

Build an onboarding checklist component. Floating card pinned bottom-right at 24px offset, width 380px, rounded-2xl, dark glassy background with backdrop-blur. Header: a circular SVG progress ring (40px, 3px stroke) showing % complete, a title "Get started" and "3 of 6 done" subtext. Right of header: minimize and close icon buttons. Body: stack of 6 steps, each with a check circle on the left, a 14px label, and a subtle "Do it →" link on the right. The current step is expanded with a short explanation and a primary

Build a centered auth card. The card is 400px wide, rounded-2xl, padding 32px, vertically centered in the viewport. Top: small wordmark. Below: 22px headline 'Sign in to Acme'. OAuth: 3 full-width ghost buttons (Google, GitHub, Apple) with leading icons, stacked. A divider with 'or' text. Then an email input and a primary 'Continue with email' button. Footer line in 13px muted: 'New here? Create an account →'. Below that, tiny 11px legal text linking Terms and Privacy.

Build a magic-link sign-in form. A centered card with a single email input (autofocus, autocomplete=email) and a primary 'Send magic link' button. On submit, POST to /api/auth/magic-link, then swap the form to a sent-state card: large mail icon, headline 'Check your inbox', subtext 'We sent a link to {email}'. A 'Resend in 30s' countdown button, disabled until the timer ends. Small 'Try a different email' link at the bottom returns to the input state.

Build a passkey-prompt card. Centered card, padding 32px. Top: a large fingerprint icon in the muted color. Headline: 'Continue as jay@acme.com'. Primary button: 'Sign in with passkey' (triggers navigator.credentials.get with platform authenticator). On success, redirect to /app. Below the button: a muted text link 'Use a different account' and a tertiary link 'Sign in with email instead' for the password fallback. Handle 'no passkey enrolled' by falling through to the enrollment flow.

Build an email verification success card. Centered card, max-width 440px, padding 40px. Top: a 56px filled check-circle icon in the accent color. Headline: 'Email verified' at 28px. Subtext (14px muted): 'Welcome to Acme - let's get you set up.' Primary button: full-width 'Continue to dashboard'. No additional links or distractions. On render, focus the primary button so Enter immediately continues.

Build a 6-digit OTP input. Six separate <input> boxes, each 48px square, 1px border, 24px font, centered text. Typing a digit advances focus to the next box; backspace on empty box returns to the previous. Paste into any box distributes the 6 digits across all boxes. On 6th digit entered, auto-submit. Below the inputs: a 'Resend in 0:30' countdown that becomes a 'Resend code' link when expired. On invalid code, shake the input row and outline the boxes red.

Build an invite-accept card. Centered card, max-width 440px. Top: 48px workspace logo + workspace name in 22px medium. Below: inviter's avatar (32px) and 'Mira Patel invited you to join Acme'. Optional row of 5 overlapping member avatars below ('+ 32 others'). Primary button: full-width 'Accept invite'. Footer: 'You're signed in as jay@acme.com · Sign in with a different account'. On accept, POST to /api/invites/{id}/accept then redirect to the workspace.

Build a workspace switcher card. Centered card, max-width 460px. Headline 'Choose a workspace'. Below: a list of 4 workspace rows. Each row: 36px workspace avatar (rounded square), workspace name (15px medium), 'Admin · 24 members' as a 12px muted subtitle, a chevron-right on the right. The most recently used workspace is pinned to the top with a 'Last visited' label. Below the list: a divider, then a ghost 'Create new workspace +' row. Keyboard-navigable.

Build a password reset flow as two screens. Screen 1: centered card with a single email input and 'Send reset link' button. On submit, swap to a confirmation card: 'If an account exists, a reset email is on its way.' Screen 2 (reached via /reset/{token}): new password + confirm password fields, a strength meter below the new password (very weak → strong), and a list of requirements (8+ chars, 1 number, 1 symbol) with checkmarks turning on as the password matches each rule. Submit POSTs to /api/auth/reset and redirects to /login on success.