feat: Add Discord OAuth and manage connected accounts

src/components/settings/SecurityTab.tsx

@@ -65,10 +65,13 @@ export function SecurityTab() {
     }
   };
 
-  const handleSocialLogin = async (provider: 'google') => {
+  const handleSocialLogin = async (provider: 'google' | 'discord') => {
     try {
       const { error } = await supabase.auth.signInWithOAuth({
-        provider: provider
+        provider: provider,
+        options: {
+          redirectTo: `${window.location.origin}/settings`
+        }
       });
 
       if (error) throw error;
@@ -86,13 +89,13 @@ export function SecurityTab() {
     }
   };
 
-  const handleUnlinkSocial = async (provider: 'google') => {
+  const handleUnlinkSocial = async (provider: 'google' | 'discord') => {
     try {
-      // Note: Supabase doesn't have a direct unlink method
+      // For now, show a message that this feature requires manual action
-      // This would typically be handled through the admin API or by the user
+      // In a production app, this would typically be handled through the admin API
       toast({
-        title: 'Feature not available',
+        title: `${provider.charAt(0).toUpperCase() + provider.slice(1)} Account`,
-        description: 'Please contact support to unlink social accounts.',
+        description: `To unlink your ${provider} account, please sign in without using ${provider} and then you can remove this connection. For assistance, contact support.`,
       });
     } catch (error: any) {
       toast({
@@ -103,12 +106,19 @@ export function SecurityTab() {
     }
   };
 
-  // Mock data for connected accounts - in real app this would come from user metadata
+  // Get connected accounts from user identities
   const connectedAccounts = [
     {
       provider: 'google',
-      connected: user?.app_metadata?.providers?.includes('google') || false,
+      connected: user?.identities?.some(identity => identity.provider === 'google') || false,
-      email: user?.email
+      email: user?.identities?.find(identity => identity.provider === 'google')?.identity_data?.email || user?.email,
+      icon: '🔍'
+    },
+    {
+      provider: 'discord',
+      connected: user?.identities?.some(identity => identity.provider === 'discord') || false,
+      email: user?.identities?.find(identity => identity.provider === 'discord')?.identity_data?.email,
+      icon: '🎮'
     }
   ];
 
@@ -195,14 +205,15 @@ export function SecurityTab() {
           <CardHeader>
             <CardDescription>
               Manage your social login connections for easier access to your account.
+              To enable social providers, configure them in your Supabase Auth settings.
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             {connectedAccounts.map((account) => (
               <div key={account.provider} className="flex items-center justify-between p-4 border rounded-lg">
                 <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
+                  <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center text-lg">
-                    <Globe className="w-4 h-4" />
+                    {account.icon}
                   </div>
                   <div>
                     <p className="font-medium capitalize">{account.provider}</p>
@@ -218,7 +229,7 @@ export function SecurityTab() {
                       <Button
                         variant="outline"
                         size="sm"
-                        onClick={() => handleUnlinkSocial(account.provider as 'google')}
+                        onClick={() => handleUnlinkSocial(account.provider as 'google' | 'discord')}
                       >
                         Disconnect
                       </Button>
@@ -227,7 +238,7 @@ export function SecurityTab() {
                       <Button
                         variant="outline"
                         size="sm"
-                        onClick={() => handleSocialLogin(account.provider as 'google')}
+                        onClick={() => handleSocialLogin(account.provider as 'google' | 'discord')}
                       >
                         Connect
                       </Button>