refactor: replace password card logic with useHasCredentialProvider hook

src/components/settings/security/password-card-wrapper.tsx

@@ -10,10 +10,10 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useHasCredentialProvider } from '@/hooks/use-auth';
 import { authClient } from '@/lib/auth-client';
 import { cn } from '@/lib/utils';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
 
 /**
  * PasswordCardWrapper renders either:
@@ -24,38 +24,15 @@ import { useEffect, useState } from 'react';
  */
 export function PasswordCardWrapper() {
   const { data: session } = authClient.useSession();
-  const [hasCredentialProvider, setHasCredentialProvider] = useState(false);
+  const { hasCredentialProvider, isLoading, error } = useHasCredentialProvider(
-  const [isLoading, setIsLoading] = useState(true);
+    session?.user?.id
+  );
 
-  useEffect(() => {
+  // Handle error state
-    const checkCredentialProvider = async () => {
+  if (error) {
-      if (!session?.user) {
+    console.error('check credential provider error:', error);
-        setIsLoading(false);
+    return null;
-        return;
+  }
-      }
-
-      try {
-        // Get the user's linked accounts
-        const accounts = await authClient.listAccounts();
-        // console.log('accounts', accounts);
-
-        // Check if the response is successful and contains accounts data
-        if ('data' in accounts && Array.isArray(accounts.data)) {
-          // Check if any account has a credential provider (provider === 'credential')
-          const hasCredential = accounts.data.some(
-            (account) => account.provider === 'credential'
-          );
-          setHasCredentialProvider(hasCredential);
-        }
-      } catch (error) {
-        console.error('Error checking credential provider:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    checkCredentialProvider();
-  }, [session]);
 
   // Don't render anything while loading
   if (isLoading) {

src/hooks/use-auth.ts

@@ -0,0 +1,44 @@
+import { authClient } from '@/lib/auth-client';
+import { useQuery } from '@tanstack/react-query';
+
+// Query keys
+export const userAccountsKeys = {
+  all: ['userAccounts'] as const,
+  list: (userId: string) => [...userAccountsKeys.all, 'list', userId] as const,
+};
+
+// Hook to fetch user accounts
+export function useUserAccounts(userId: string | undefined) {
+  return useQuery({
+    queryKey: userAccountsKeys.list(userId || ''),
+    queryFn: async () => {
+      if (!userId) {
+        throw new Error('User ID is required');
+      }
+
+      const accounts = await authClient.listAccounts();
+
+      // Check if the response is successful and contains accounts data
+      if ('data' in accounts && Array.isArray(accounts.data)) {
+        return accounts.data;
+      }
+
+      throw new Error('Failed to fetch user accounts');
+    },
+    enabled: !!userId,
+  });
+}
+
+// Hook to check if user has credential provider
+export function useHasCredentialProvider(userId: string | undefined) {
+  const { data: accounts, isLoading, error } = useUserAccounts(userId);
+
+  const hasCredentialProvider =
+    accounts?.some((account) => account.provider === 'credential') ?? false;
+
+  return {
+    hasCredentialProvider,
+    isLoading,
+    error,
+  };
+}