feat: complete auth and gateway agnostic billing implementation

src/app/signup/page.tsx

@@ -12,6 +12,7 @@ export default function SignupPage() {
   const [step, setStep] = useState(1)
   const [showPassword, setShowPassword] = useState(false)
   const [showOTP, setShowOTP] = useState(false)
+  const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [firstName, setFirstName] = useState("")
@@ -19,13 +20,49 @@ export default function SignupPage() {
   const [phone, setPhone] = useState("")
   const [termsAccepted, setTermsAccepted] = useState(false)
   
-  const isStep1Valid = firstName.trim() !== "" && lastName.trim() !== "" && phone.length === 10 && termsAccepted
+  const isStep1Valid = firstName.trim() !== "" && lastName.trim() !== "" && email.trim() !== "" && phone.length === 10 && termsAccepted
   
   const router = useRouter()
 
-  const handleNextStep = () => {
-    if (step === 1) setStep(2)
-    else setIsSubmitted(true)
+  const handleNextStep = async () => {
+    if (step === 1) {
+      setStep(2)
+    } else {
+      try {
+        const res = await fetch("/api/auth/register", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name: `${firstName} ${lastName}`, email, password })
+        });
+        const data = await res.json();
+        
+        if (data.success) {
+          // Log user in automatically
+          const loginRes = await fetch("/api/auth/login", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email, password })
+          });
+          const loginData = await loginRes.json();
+          
+          if (loginData.success && typeof window !== "undefined") {
+            localStorage.setItem("activeUserId", loginData.token);
+            const sessionToken = crypto.randomUUID();
+            localStorage.setItem("active_session_token", sessionToken);
+            await fetch(`/api/users/${loginData.token}/session`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ session_token: sessionToken })
+            });
+          }
+          setIsSubmitted(true);
+        } else {
+          alert(data.detail || "Registration failed.");
+        }
+      } catch (err) {
+        alert("An error occurred during registration.");
+      }
+    }
   }
 
   return (
@@ -61,9 +98,9 @@ export default function SignupPage() {
               <p className="text-muted-foreground text-sm font-medium px-4 leading-relaxed">
                 Thank you for the registration. Our team will contact you shortly.
               </p>
-              <Link href="/login" className="w-full mt-4">
+              <Link href="/dashboard" className="w-full mt-4">
                 <Button className="w-full rounded-xl h-12 font-bold text-base bg-primary text-primary-foreground hover:bg-primary/90 transition-all shadow-[0_0_20px_-5px_var(--color-primary)]">
-                  Go to Login
+                  Go to Dashboard
                 </Button>
               </Link>
             </CardContent>
@@ -93,6 +130,11 @@ export default function SignupPage() {
                     </div>
                   </div>
 
+                  <div className="space-y-2">
+                    <label className="text-sm font-bold text-foreground">Email Address</label>
+                    <input type="email" placeholder="john@example.com" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"/>
+                  </div>
+
                   <div className="space-y-2">
                     <label className="text-sm font-bold text-foreground">Phone Number</label>
                     <div className="flex gap-2">