Contract-freeze · UX approval · FFRNT-296

Connected Accounts — Approval Frames

The connected-accounts surface reached from the security hub's "Connected accounts" card (/account/security/connections). It's where a person connects a sign-in provider (Google), sees their linked providers + password, and disconnects one — always keeping at least one way to sign in. These frames freeze the connect/disconnect model before UI is built. Rendered in the fuse-seam design system (tokens only). No identity-vendor name ever appears — the browser only ever sees app.fuzefront.com and, during a link, accounts.google.com.

Walk the flow

Frame (a) · route /account/security/connections

Connections list

Password method + each linked provider (Disconnect), plus a "Connect Google" affordance for providers not yet linked. Reads GET /identity/connections.

Frame (b) · connect flow

Connect a provider

Redirect intent (POST /social/google/link → redirectUrl → accounts.google.com) and the successful return on ?linked=google.

Frame (c) · states

States & fail-closed

Loading, load error + retry, social-only (hasPassword:false → set a password first), last-method 409 guard, connect failed/cancelled, already-linked.

Build inventory — approving these frames approves this plan

Flows

connected-accounts: ConnectedAccountsPanel route /account/security/connections · approved: false (awaiting review)

React components

ConnectedAccountsPanelSignInMethodsList ConnectedAccountRowConnectProviderButton SetPasswordBannerStatusCallout LoadErrorRetry

SignInMethodsList, ConnectedAccountRow, SetPasswordBanner and LoadErrorRetry already exist in @fuzefront/account-security-ui — reused, not reinvented. New here: ConnectedAccountsPanel (route orchestrator) and ConnectProviderButton (the connect affordance).

npm packages

@fuzefront/account-security-ui

Design-system note

Composed entirely from @fuzefront/design-system (fuse-seam) tokens. StatusCallout (soft-tinted inline banner with icon + actions) is the same primitive named by the account-security hub frames for frontend-engineer to add as a foundation PR before implementation. Drawn here from tokens only — never one-offed into feature code.

● Awaiting approval

Design system: @fuzefront/design-system (fuse-seam) · Contract: packages/security/openapi.yaml → @fuzefront/security-client · Reads: GET /v1/security/identity/connections · Writes: POST /v1/security/social/{provider}/link, DELETE /v1/security/social/{provider}/link (409 if last method), POST /v1/security/password · Parent surface: the security hub (/account/security, design/frames/account-security).
Approve the flow by setting approved: true (+ approver + date) in manifest.json, or reply @claude approve / @claude reject: <reason>.