Linked Accounts

1"use client"
2 
3import { useAuth, useListAccounts } from "@better-auth-ui/react"
4import { Fragment } from "react"
5import { Card, CardContent } from "@/components/ui/card"
6import {
7  Item,
8  ItemContent,
9  ItemGroup,
10  ItemMedia,
11  ItemSeparator
12} from "@/components/ui/item"
13import { Skeleton } from "@/components/ui/skeleton"
14import { cn } from "@/lib/utils"
15import { LinkedAccount } from "./linked-account"
16 
17export type LinkedAccountsProps = {
18  className?: string
19}
20 
21/**
22 * Render a card showing linked social accounts and available social providers to link.
23 *
24 * Linked accounts (excluding the "credential" provider) are shown with an unlink control;
25 * available providers are shown with a link control. Button states and labels reflect
26 * ongoing link/unlink activity and use localization for provider-specific text.
27 *
28 * @returns A JSX element containing the linked accounts card
29 */
30export function LinkedAccounts({ className }: LinkedAccountsProps) {
31  const {
32    authClient,
33    localization,
34    multipleAccountsPerProvider,
35    socialProviders
36  } = useAuth()
37 
38  const { data: accounts, isPending } = useListAccounts(authClient)
39 
40  const linkedAccounts = accounts?.filter(
41    (account) => account.providerId !== "credential"
42  )
43 
44  const linkedProviderIds = new Set(linkedAccounts?.map((a) => a.providerId))
45 
46  const availableProviders =
47    multipleAccountsPerProvider === false
48      ? socialProviders?.filter((p) => !linkedProviderIds.has(p))
49      : socialProviders
50 
51  const allRows = [
52    ...(linkedAccounts?.map((account) => ({
53      key: account.id,
54      account,
55      provider: account.providerId
56    })) ?? []),
57    ...(availableProviders?.map((provider) => ({
58      key: provider,
59      account: undefined,
60      provider
61    })) ?? [])
62  ]
63 
64  return (
65    <div>
66      <h2 className="text-sm font-semibold mb-3">
67        {localization.settings.linkedAccounts}
68      </h2>
69 
70      <Card className={cn("p-0", className)}>
71        <CardContent className="p-0">
72          <ItemGroup className="gap-0">
73            {isPending
74              ? socialProviders?.map((provider, index) => (
75                  <Fragment key={provider}>
76                    {index > 0 && <ItemSeparator />}
77                    <AccountRowSkeleton />
78                  </Fragment>
79                ))
80              : allRows.map((row, index) => (
81                  <Fragment key={row.key}>
82                    {index > 0 && <ItemSeparator />}
83                    <LinkedAccount
84// … truncated