Fix password state sync for OAuth users

src/components/settings/SecurityTab.tsx

@@ -28,6 +28,7 @@ export function SecurityTab() {
   const [passwordSetupProvider, setPasswordSetupProvider] = useState<OAuthProvider | null>(null);
   const [hasPassword, setHasPassword] = useState(false);
   const [addPasswordMode, setAddPasswordMode] = useState<'standalone' | 'disconnect'>('standalone');
+  const [addingPassword, setAddingPassword] = useState(false);
 
   // Load user identities on mount
   useEffect(() => {
@@ -120,22 +121,28 @@ export function SecurityTab() {
   };
 
   const handlePasswordSetupSuccess = async () => {
-    // Refresh identities to show email provider
-    await loadIdentities();
+    setAddingPassword(true);
     
-    if (addPasswordMode === 'disconnect' && passwordSetupProvider) {
-      toast({
-        title: "Password Set",
-        description: "You can now disconnect your social login."
-      });
-      await handleUnlinkSocial(passwordSetupProvider);
-      setPasswordSetupProvider(null);
-    } else {
-      toast({
-        title: 'Password Added',
-        description: 'You can now sign in using your email and password.',
-      });
-      setPasswordSetupProvider(null);
+    try {
+      // Refresh identities - should now include email provider after waiting in addPasswordToAccount
+      await loadIdentities();
+      
+      if (addPasswordMode === 'disconnect' && passwordSetupProvider) {
+        toast({
+          title: "Password Set",
+          description: "You can now disconnect your social login."
+        });
+        await handleUnlinkSocial(passwordSetupProvider);
+        setPasswordSetupProvider(null);
+      } else {
+        toast({
+          title: 'Password Added',
+          description: 'You can now sign in using your email and password.',
+        });
+        setPasswordSetupProvider(null);
+      }
+    } finally {
+      setAddingPassword(false);
     }
   };
 
@@ -204,8 +211,15 @@ export function SecurityTab() {
                   Change Password
                 </Button>
               ) : (
-                <Button onClick={handleAddPassword}>
-                  Add Password
+                <Button onClick={handleAddPassword} disabled={addingPassword}>
+                  {addingPassword ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Adding Password...
+                    </>
+                  ) : (
+                    'Add Password'
+                  )}
                 </Button>
               )}
             </CardContent>