Webpage Integration: Account Connections Card

[henryajisegiri]

Goal

Wire the account connections card to real data, implement connect and disconnect flows, and update the copy to accurately reflect what each action does.

Figma Link

Important Reference

---

Scope

Full-stack: reading linked account data, connect and disconnect flows, and card copy updates.

---

Background

The connections card currently renders mocked data with all action URLs hardcoded. This ticket replaces that with real linked account data from the database and implements the connect and disconnect flows for GitHub and Google.

Google OAuth is used for authentication only — it provides identity (name, email, avatar) and has no data use beyond sign-in. GitHub OAuth similarly covers sign-in and identity, with contribution data sourced separately via the app token.

The connect flow supports linking an additional provider to an existing account. allauth's SOCIALACCOUNT_EMAIL_AUTHENTICATION_AUTO_CONNECT setting automatically links a provider to an existing account where the email matches.

---

Acceptance Criteria

Card data

• The connections card is populated from real SocialAccount records for the logged-in user, covering GitHub and Google.
• Each provider displays a status label: "Connected" or "Not connected".
• No hardcoded or mocked data remains in the view.

Connect

• Clicking "Connect" redirects the user to the provider's login and authorization page. On approval, the user is returned to their profile page with the card updated to show the provider as "Connected".
• If the provider email matches the logged-in user's existing account, allauth automatically links the two accounts together.
• If the provider email belongs to a different Boost account, an error is shown via the modal component: "This GitHub account is already linked to another Boost account. Please sign in with that account or use a different GitHub account."
  Note: The modal used here is the single button variant with "Dismiss" as the CTA

Disconnect

• Clicking "Disconnect" triggers a confirmation modal. On confirmation, the provider is unlinked and the card updates in place to show the provider as "Not connected" with a "Connect" button — no page redirect.

Disconnect modal copy — GitHub:

Disconnect GitHub?
This will remove the link between your Boost account and GitHub. You can reconnect at any time.
[Cancel] [Disconnect]

Disconnect modal copy — Google:

Disconnect Google?
This will remove the link between your Boost account and Google. You can reconnect at any time.
[Cancel] [Disconnect]

Modal Component

Copy

Connected state:

• Status label: "Connected"
• Button: "Disconnect"

Not connected state:

• Status label: "Not connected"
• Button: "Connect"

---

FE/BE Actions

Description	URL
Fetch linked social accounts for current user
Initiate provider connect flow
Disconnect a linked provider

---

Out of Scope

• Google-specific profile data beyond identity