di usage in website

apps/website/app/auth/signup/page.tsx

@@ -28,6 +28,7 @@ import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
 import { useAuth } from '@/lib/auth/AuthContext';
+import { useSignup } from '@/hooks/auth/useSignup';
 
 interface FormErrors {
   firstName?: string;
@@ -94,7 +95,6 @@ export default function SignupPage() {
   const { refreshSession, session } = useAuth();
   const returnTo = searchParams.get('returnTo') ?? '/onboarding';
   
-  const [loading, setLoading] = useState(false);
   const [checkingAuth, setCheckingAuth] = useState(true);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
@@ -198,29 +198,9 @@ export default function SignupPage() {
     return Object.keys(newErrors).length === 0;
   };
 
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (loading) return;
-
-    if (!validateForm()) return;
-
-    setLoading(true);
-    setErrors({});
-
-    try {
-      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
-      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
-      const authService = serviceFactory.createAuthService();
-      
-      // Combine first and last name into display name
-      const displayName = `${formData.firstName} ${formData.lastName}`.trim();
-      
-      await authService.signup({
-        email: formData.email,
-        password: formData.password,
-        displayName,
-      });
-      
+  // Use signup mutation hook
+  const signupMutation = useSignup({
+    onSuccess: async () => {
       // Refresh session in context so header updates immediately
       try {
         await refreshSession();
@@ -229,14 +209,39 @@ export default function SignupPage() {
       }
       // Always redirect to dashboard after signup
       router.push('/dashboard');
-    } catch (error) {
+    },
+    onError: (error) => {
       setErrors({
-        submit: error instanceof Error ? error.message : 'Signup failed. Please try again.',
+        submit: error.message || 'Signup failed. Please try again.',
       });
-      setLoading(false);
+    },
+  });
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (signupMutation.isPending) return;
+
+    if (!validateForm()) return;
+
+    setErrors({});
+
+    try {
+      // Combine first and last name into display name
+      const displayName = `${formData.firstName} ${formData.lastName}`.trim();
+      
+      await signupMutation.mutateAsync({
+        email: formData.email,
+        password: formData.password,
+        displayName,
+      });
+    } catch (error) {
+      // Error handling is done in the mutation's onError callback
     }
   };
 
+  // Loading state from mutation
+  const loading = signupMutation.isPending;
+
   // Show loading while checking auth
   if (checkingAuth) {
     return (