"use client"; import { CheckCircle2, ExternalLink, Github, Loader2, Unlink, XCircle, } from "lucide-react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { cn } from "@/lib/utils"; export type SocialProvider = | "google" | "github" | "apple" | "microsoft" | "twitter"; export interface SocialAccount { provider: SocialProvider; email?: string; name?: string; isConnected: boolean; isVerified?: boolean; isPrimary?: boolean; connectedAt?: Date; } function formatConnectedDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } export interface AuthSocialAccountsProps { accounts?: SocialAccount[]; onConnect?: (provider: SocialProvider) => void; onDisconnect?: (provider: SocialProvider) => void; onSetPrimary?: (provider: SocialProvider) => void; className?: string; isLoading?: boolean; errors?: { general?: string; }; } const GoogleIcon = ({ className }: { className?: string }) => ( ); const PROVIDER_CONFIG: Record< SocialProvider, { name: string; icon: React.ComponentType<{ className?: string }>; color: string; } > = { google: { name: "Google", icon: GoogleIcon, color: "text-blue-600", }, github: { name: "GitHub", icon: Github, color: "text-foreground", }, apple: { name: "Apple", icon: ({ className }: { className?: string }) => ( ), color: "text-foreground", }, microsoft: { name: "Microsoft", icon: ({ className }: { className?: string }) => ( ), color: "text-foreground", }, twitter: { name: "Twitter", icon: ({ className }: { className?: string }) => ( ), color: "text-blue-500", }, }; function SocialAccountItem({ account, onConnect, onDisconnect, onSetPrimary, isLoading, }: { account: SocialAccount; onConnect?: (provider: SocialProvider) => void; onDisconnect?: (provider: SocialProvider) => void; onSetPrimary?: (provider: SocialProvider) => void; isLoading?: boolean; }) { const config = PROVIDER_CONFIG[account.provider]; const Icon = config.icon; return (

{config.name}

{account.isPrimary && ( Primary )} {account.isVerified && account.isConnected && ( )} {account.isConnected && !account.isVerified && ( )}

{account.email && (

{account.email}

)} {account.connectedAt && (

Connected {formatConnectedDate(account.connectedAt)}

)}

{account.isConnected ? ( <> {!account.isPrimary && onSetPrimary && ( )} {onDisconnect && ( Disconnect {config.name}? This will disconnect your {config.name} account. You'll need to reconnect it to use it for sign-in again. Cancel onDisconnect(account.provider)} > Disconnect )} ) : ( onConnect && ( ) )}

); } export default function AuthSocialAccounts({ accounts = [], onConnect, onDisconnect, onSetPrimary, className, isLoading = false, errors, }: AuthSocialAccountsProps) { // Default accounts if none provided const defaultAccounts: SocialAccount[] = [ { provider: "google", isConnected: false }, { provider: "github", isConnected: false }, { provider: "apple", isConnected: false }, { provider: "microsoft", isConnected: false }, ]; const displayAccounts = accounts.length > 0 ? accounts : defaultAccounts.filter( (acc) => !accounts.some((a) => a.provider === acc.provider) ); return ( Connected accounts Manage your social account connections for sign-in

{errors?.general && (

{errors.general}

)} {displayAccounts.length === 0 ? (

No social accounts available

) : (

{displayAccounts.map((account) => ( ))}

)}

); }

Google

GitHub

Apple

Microsoft

Example Usage