final

app/components/AuthModal.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useSearchParams } from 'next/navigation'
 
 interface User {
   id: number
@@ -15,10 +16,12 @@ interface AuthModalProps {
 }
 
 export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps) {
+  const searchParams = useSearchParams()
   const [isLogin, setIsLogin] = useState(true)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [email, setEmail] = useState('')
+  const [referralId, setReferralId] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
 
@@ -30,8 +33,26 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
       setEmail('')
       setError('')
       setIsLogin(true)
+      
+      // Auto-fill referral ID from URL if present
+      const refFromUrl = searchParams?.get('ref')
+      if (refFromUrl) {
+        setReferralId(refFromUrl)
+      } else {
+        setReferralId('')
+      }
     }
-  }, [isOpen])
+  }, [isOpen, searchParams])
+
+  // Update referral ID when switching to register mode and URL has ref parameter
+  useEffect(() => {
+    if (!isLogin) {
+      const refFromUrl = searchParams?.get('ref')
+      if (refFromUrl && !referralId) {
+        setReferralId(refFromUrl)
+      }
+    }
+  }, [isLogin, searchParams, referralId])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -40,9 +61,15 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
 
     try {
       const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register'
+      
+      // Use referral ID from input field, or fall back to URL parameter
+      const referralIdToUse = !isLogin && referralId.trim() 
+        ? referralId.trim() 
+        : (!isLogin ? searchParams?.get('ref') : null)
+      
       const body = isLogin
         ? { username, password }
-        : { username, password, email }
+        : { username, password, email, referral_id: referralIdToUse }
 
       const response = await fetch(endpoint, {
         method: 'POST',
@@ -192,7 +219,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
             />
           </div>
 
-          <div style={{ marginBottom: '20px' }}>
+          <div style={{ marginBottom: '16px' }}>
             <label
               htmlFor="password"
               style={{
@@ -224,6 +251,43 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
             />
           </div>
 
+          {!isLogin && (
+            <div style={{ marginBottom: '20px' }}>
+              <label
+                htmlFor="referralId"
+                style={{
+                  display: 'block',
+                  marginBottom: '8px',
+                  fontSize: '14px',
+                  color: 'var(--text)',
+                }}
+              >
+                Referral ID <span style={{ color: 'var(--muted)', fontSize: '12px', fontWeight: 'normal' }}>(optional)</span>
+              </label>
+              <input
+                type="text"
+                id="referralId"
+                value={referralId}
+                onChange={(e) => setReferralId(e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: '12px',
+                  borderRadius: '8px',
+                  border: '1px solid var(--border)',
+                  background: 'var(--bg-soft)',
+                  color: 'var(--text)',
+                  fontSize: '14px',
+                }}
+                placeholder="Enter referral ID"
+              />
+              {searchParams?.get('ref') && referralId === searchParams.get('ref') && (
+                <small style={{ display: 'block', marginTop: '4px', fontSize: '12px', color: 'var(--accent)' }}>
+                  ✓ Auto-filled from referral link
+                </small>
+              )}
+            </div>
+          )}
+
           {error && (
             <div
               style={{