feat: implement full authentication system with CSRF protection and email verification flow

app/login/page.tsx

@@ -17,11 +17,20 @@ const LoginPage = () => {
     const [loading, setLoading] = useState(false);
     const [resendLoading, setResendLoading] = useState(false);
     const [resendMessage, setResendMessage] = useState('');
+    const [csrfToken, setCsrfToken] = useState('');
     const router = useRouter();
     const searchParams = useSearchParams();
     
     const verified = searchParams.get('verified') === 'true';
     const queryError = searchParams.get('error');
+    
+    // Fetch CSRF token on mount
+    React.useEffect(() => {
+        fetch('/api/auth/csrf')
+            .then(res => res.json())
+            .then(data => setCsrfToken(data.csrfToken))
+            .catch(err => console.error('Error fetching CSRF token:', err));
+    }, []);
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -33,7 +42,10 @@ const LoginPage = () => {
         try {
             const res = await fetch('/api/auth/login', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'x-csrf-token': csrfToken
+                },
                 body: JSON.stringify({ email, password }),
             });
 
@@ -64,7 +76,10 @@ const LoginPage = () => {
         try {
             const res = await fetch('/api/auth/resend-verification', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'x-csrf-token': csrfToken
+                },
                 body: JSON.stringify({ email }),
             });
 
@@ -131,6 +146,7 @@ const LoginPage = () => {
                     )}
 
                     <form className="space-y-6" onSubmit={handleSubmit}>
+                        <input type="hidden" name="csrf_token" value={csrfToken} />
                     <div className="rounded-md shadow-sm -space-y-px">
                         <div>
                             <input