Update app/auth/signup/page.tsx

app/auth/signup/page.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { motion } from "framer-motion"
 import { Mail, Lock, Eye, EyeOff, ArrowRight, Sparkles, User } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -23,10 +23,20 @@ export default function SignupPage() {
   const [error, setError] = useState("")
   const router = useRouter()
 
+  // ✅ UPDATED: Handle URL errors from OAuth redirects
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const urlError = urlParams.get("error")
+    if (urlError) {
+      setError(decodeURIComponent(urlError))
+    }
+  }, [])
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({ ...formData, [e.target.name]: e.target.value })
   }
 
+  // ✅ UPDATED: Backend integration for signup
   const handleSignup = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsLoading(true)
@@ -45,31 +55,45 @@ export default function SignupPage() {
     }
 
     try {
-      const response = await fetch("/api/auth/signup", {
+      // ✅ FIXED: Use FormData for backend compatibility
+      const formDataToSend = new FormData()
+      formDataToSend.append('name', formData.name)
+      formDataToSend.append('email', formData.email)
+      formDataToSend.append('password', formData.password)
+
+      // ✅ FIXED: Call your actual backend endpoint
+      const response = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/signup`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name: formData.name,
-          email: formData.email,
-          password: formData.password,
-        }),
+        body: formDataToSend,
+        credentials: 'include', // ✅ CRITICAL: Send cookies
       })
 
-      const data = await response.json()
-
-      if (data.success) {
-        localStorage.setItem("user", JSON.stringify(data.user))
-        router.push("/")
+      if (response.ok) {
+        const data = await response.json()
+        console.log('✅ Signup successful:', data)
+        router.push("/") // Redirect to home
       } else {
-        setError(data.error || "Signup failed")
+        const errorData = await response.json()
+        setError(errorData.detail || 'Signup failed')
       }
     } catch (error) {
+      console.error('❌ Signup error:', error)
       setError("Network error. Please try again.")
     } finally {
       setIsLoading(false)
     }
   }
 
+  // ✅ UPDATED: Google OAuth with backend integration
+  const handleGoogleSignup = () => {
+    // Clear any existing Google session cookies
+    document.cookie = "G_AUTHUSER_H=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
+    document.cookie = "G_ENABLED_IDPS=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
+
+    // ✅ FIXED: Redirect to your backend Google OAuth endpoint
+    window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/google`
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-900 via-black to-pink-900 flex items-center justify-center p-4">
       {/* Animated background elements */}
@@ -200,7 +224,7 @@ export default function SignupPage() {
 
             <Button
               type="button"
-              onClick={() => (window.location.href = "/api/auth/google")}
+              onClick={handleGoogleSignup}
               className="w-full flex items-center justify-center gap-3 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-3 rounded-xl transition-all duration-200"
             >
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">