Designing connected accounts and OAuth linking UI in Figma: social sign-in, app permissions, and unlink flows

Quick answer

Connected accounts settings let users link or unlink sign-in providers (Google, Apple, Facebook) and review third-party apps that access their data—separate from the login screen’s social buttons. Design a Linked providers section with connect/disconnect per provider, an Authorized apps list with scopes and revoke actions, and OAuth consent screens for new integrations. Unlinking requires confirmation and a last-auth-method guard so users cannot lock themselves out. Start from the Figma guides hub and pair with login, security settings, and account dashboard guides.

---

Who this is for

• Product designers building account settings for social login management and integrations.
• Design system teams distinguishing login-time OAuth buttons from settings-time link/unlink patterns.
• Engineers implementing provider linking, token revocation, scope display, and account-merge edge cases.

---

Login social buttons vs connected accounts settings

Surface	Purpose	Key difference
Login / register social row	Authenticate new or returning session	One-click sign-in; see login guide
Connected accounts settings	Manage linked identities on existing account	Link additional providers; unlink with guards
OAuth consent screen	Authorize third-party app access	Shows scopes; not the same as “Sign in with Google”
Developer API keys	Programmatic access	Separate page—don’t mix with consumer OAuth

Verdict: reuse provider brand icons and button styles from login, but settings use row + status badge + action link patterns—not full-width sign-in buttons.

---

ConnectedAccountsPanel anatomy

Part	Spec	Notes
Page title	”Connected accounts” or “Sign-in methods”	Under account nav
Intro copy	”Manage how you sign in”	One sentence
Provider rows	Google, Apple, Facebook, email/password	One row per method
Status badge	Connected / Not connected
Primary action	Connect / Disconnect	Text button or secondary
Email row	Primary email + verified badge	Link to email verification
Password row	Set password / Change password	When social-only account

ConnectedAccountsPanel
├── Variant: hasPassword=true | socialOnly
├── Variant: provider=google | apple | facebook | email
└── Layers:
    ├── PageHeader
    ├── ProviderRow (repeat)
    │   ├── ProviderIcon
    │   ├── ProviderLabel
    │   ├── StatusBadge
    │   ├── ConnectedEmailMeta (if linked)
    │   └── ConnectButton | DisconnectButton
    ├── EmailPasswordSection
    └── LastAuthMethodWarning (conditional)

Place near security settings in IA—users expect sign-in methods together.

---

Provider row states

State	UI	Action
Not connected	Gray badge + “Connect”	Opens provider OAuth in popup or redirect
Connected	Green badge + masked email	”Disconnect”
Connect in progress	Spinner on row	Disable duplicate clicks
Connect error	Inline error under row	”Account already linked to another user”
Provider unavailable	Disabled row + tooltip	Maintenance or region block

Connect flow: same OAuth as login but with link intent—user must already be authenticated. Show success toast “Google account connected.”

---

Disconnect / unlink confirmation

Step	UI
1. Trigger	”Disconnect” on provider row
2. Guard check	If last auth method → block with explanation
3. Modal	Confirm dialog — consequences copy
4. Re-auth	Password or active session + OTP for sensitive unlink
5. Success	Row returns to Not connected; email notification

DisconnectProviderModal
├── Variant: canDisconnect=true | lastMethodBlocked
├── Variant: provider=google | apple | facebook
└── Layers:
    ├── WarningIcon
    ├── Headline ("Disconnect Google?")
    ├── ConsequenceCopy
    ├── ReAuthFields (conditional)
    ├── ConfirmButton (destructive)
    └── CancelButton

Last-method blocked UI: “Add a password or another sign-in method before disconnecting Google.” CTA links to set password or connect Apple.

---

Social-only account: add password

Many OAuth users have no password. Design inline SetPasswordForm on the same page:

Field	Notes
New password	Strength meter from security settings
Confirm	Match validation
Submit	”Save password”

Show banner: “You’re signed in with Google only. Add a password to sign in without Google.”

---

Authorized apps (third-party OAuth)

Separate section below linked providers—for apps user approved via OAuth consent (analytics, calendar sync, partner integrations).

Element	Spec
App row	Logo + app name + connected date
Scopes summary	”Read profile, Read orders” — human-readable
Revoke	”Remove access”
Empty	”No apps connected”
Expired	Gray row + “Access expired”

AuthorizedAppsList
├── Variant: state=empty | populated
└── Layers:
    ├── AppRow (repeat)
    │   ├── AppLogo
    │   ├── AppName
    │   ├── ConnectedDate
    │   ├── ScopesSummary
    │   ├── ExpandScopesLink
    │   └── RevokeButton
    └── EmptyStateIllustration

Cross-link privacy settings — revoking app access relates to data sharing preferences.

---

OAuth consent screen (third-party authorization)

When your users authorize another product, design a dedicated consent frame—not the login page.

Part	Spec
App branding	Third-party logo + name
Requesting access to	Your product name + user avatar
Scope list	Checkmarks per permission
Deny / Allow	Secondary + primary
Privacy link	Link to your privacy policy
Account switcher	”Continue as user@email.com”

OAuthConsentScreen
├── Variant: scopes=minimal | extended
└── Layers:
    ├── AppHeader
    ├── UserContextRow
    ├── ScopeList
    ├── PrivacyPolicyLink
    ├── DenyButton
    └── AllowButton

Verdict: scope bullets map 1:1 to backend scopes in Dev Mode—engineers need the mapping table.

---

Account merge edge cases

Scenario	UI
Email already exists	”Link accounts?” modal — explain merge
Provider linked to other user	Error: “This Google account is used by another login”
Merge preview	Show which orders/wishlist data will combine
Decline merge	Return to settings; keep separate

Design AccountMergeModal as optional advanced frame—many MVPs block duplicate provider links with clear error copy only.

---

Mobile layout

Pattern	Spec
Provider rows	Full-width; icon 24px left
Actions	Right-aligned text buttons
Modals	Bottom sheet on mobile for disconnect confirm
Consent screen	Sticky Allow/Deny footer
Scopes expand	Accordion per accordion patterns

---

Handoff checklist

Item	Dev Mode annotation
OAuth link vs login	Different redirect_uri and prompt params
Provider list	Configurable enabled providers per region
Last auth method rule	Block disconnect when count === 1 and no password
Revoke token API	Per app client_id
Scope display map	read:orders → “View your order history”
Email notifications	connect, disconnect, new app authorized
Account merge API	Optional; document if out of scope
a11y	Status badges not color-only; modal focus trap

Pair with notification preferences for integration alert toggles.

---

Common mistakes

Mistake	Why it hurts	Fix
Reusing login button layout in settings	Wrong affordance	Row + status + text action
Allow disconnect of only auth method	Account lockout	Last-method guard + set password CTA
Raw OAuth scope strings	Users don’t understand	Human-readable scope list
No consent Deny button	Trust / policy issues	Equal-weight Deny
Mixing API keys with OAuth apps	Confusing IA	Separate developer settings page
No email on link/unlink	Undetected takeover	Security notification emails
Connect without re-auth	Session hijack links provider	Require recent login
Identical icons at login and consent	Users think they’re signing in	Different page title and copy

---

Recommended workflow

1. Audit login SocialAuthStack from login post for icon/button tokens.
2. Design ConnectedAccountsPanel with provider rows and badges.
3. Add SetPasswordForm variant for social-only accounts.
4. Design DisconnectProviderModal with last-method blocked state.
5. Build AuthorizedAppsList with scope summaries and revoke.
6. Design OAuthConsentScreen for partner integrations.
7. Spec email triggers and link to security + privacy pages.
8. Prototype connect → disconnect blocked → add password → disconnect success.

---

FAQ

Same page as security settings?

Sibling pages under Account—“Sign-in methods” (connected accounts) and “Security” (password, 2FA, passkeys) with cross-links.

Show provider email on row?

Yes—masked (j•••@gmail.com) so users know which Google account is linked.

Facebook login still worth a row?

Include only enabled providers—use a config-driven row component, hide deprecated providers in design file notes.

B2B SSO (SAML)?

Add Enterprise SSO row with domain hint—separate from consumer OAuth; link out to IT admin docs.

Revoke vs disconnect?

Disconnect = unlink sign-in provider from your account. Revoke = remove third-party app’s API access—different verbs, different modals.

---

Next steps

• Design login, registration, and password recovery UI in Figma — social sign-in at auth time
• Design passkeys and passwordless login UI in Figma — modern sign-in methods row
• Design two-factor authentication and security settings UI in Figma — adjacent security IA
• Design account dashboard and my account UI in Figma — settings navigation
• Design privacy settings and data management UI in Figma — data sharing and app access