ConnectedAccounts

Code

import { ConnectedAccounts, type ConnectedProvider } from "@fadymondy/nasaq/web";declare const providers: ConnectedProvider[];declare const api: { connect(id: string): Promise<void>; disconnect(id: string): Promise<void> };export function Accounts() {  return (    <ConnectedAccounts      providers={providers}      otherSignInMethods={1} // the password      onConnect={api.connect}      onDisconnect={api.disconnect}    />  );}

Integrations · beta

Live examples and controls: ConnectedAccounts in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/connected-accounts.json

The social accounts linked to a sign-in. It lists each provider, shows the email or username that is connected, and offers Connect or Disconnect. Your callbacks start the OAuth flow and remove the link.

When to useCopy Anchor Link

• The security page of an account.

When not to useCopy Anchor Link

• Sign in and sign up screens: use OAuthButtons.

ImportCopy Anchor Link

import { ConnectedAccounts } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ConnectedAccounts, type ConnectedProvider } from "@fadymondy/nasaq/web";

declare const providers: ConnectedProvider[];
declare const api: { connect(id: string): Promise<void>; disconnect(id: string): Promise<void> };

export function Accounts() {
  return (
    <ConnectedAccounts
      providers={providers}
      otherSignInMethods={1} // the password
      onConnect={api.connect}
      onDisconnect={api.disconnect}
    />
  );
}

AnatomyCopy Anchor Link

ConnectedAccounts                  data-slot="connected-accounts"
└─ ul  aria-label
   └─ li                           data-slot="connected-account", data-provider, data-connected
      ├─ official logo
      ├─ name, and the account (left-to-right) or "Not connected"
      ├─ the "last method" explanation (when it applies)
      └─ Connect  |  Disconnect (ConfirmButton)  |  Disconnect disabled with a Tooltip

APICopy Anchor Link

ConnectedAccounts: every div prop except children, plus:

ConnectedProvider: { id, connected, account?, name?, icon? }. The ids google, github, apple and microsoft use the official logos from OAuthButtons. For any other id pass name and the provider's own official logo as icon. Nasaq does not draw provider logos and you should not redraw, recolour or replace them with a generic icon.

The last-method rule: when connected accounts plus otherSignInMethods is 1 or less, the Disconnect button on the remaining account is disabled, a tooltip explains why and so does a visible line (tooltips do not show on touch). Enforce the same rule on the server.

ExamplesCopy Anchor Link

A custom provider

import { ConnectedAccounts } from "@fadymondy/nasaq/web";

declare const OktaLogo: () => JSX.Element; // the official Okta mark, from Okta's brand kit

export function Accounts() {
  return (
    <ConnectedAccounts
      providers={[{ id: "okta", name: "Okta", icon: <OktaLogo />, connected: false }]}
      onConnect={async () => {}}
      onDisconnect={async () => {}}
    />
  );
}

AccessibilityCopy Anchor Link

• The list is a labelled ul. Each button includes the provider name for screen readers ("Disconnect GitHub").
• The disabled Disconnect stays focusable and is described by the visible explanation, so keyboard and screen reader users get the reason.
• Disconnect uses AlertDialog. Logos are decorative (aria-hidden); the name is text.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. The connected email or username is left-to-right in Arabic.
• Logos are never mirrored.

Styling & tokensCopy Anchor Link

• Card, Button, Status and --nq-* tokens. GitHub and Apple logos switch black or white with the theme. Target [data-slot="connected-account"][data-connected].

Do / Don'tCopy Anchor Link

• Do enforce the last-method rule on the server as well.
• Do pass otherSignInMethods honestly: count the password only if the account has one.
• Don't substitute a generic icon for a missing logo.

RelatedCopy Anchor Link

• OAuthButtons
• PasskeyList
• AlertDialog

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-integrations-connected-accounts--docs