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

app/register/page.tsx

@@ -19,11 +19,20 @@ const RegisterPage = () => {
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
     const [success, setSuccess] = useState(false);
+    const [csrfToken, setCsrfToken] = useState('');
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setFormData({ ...formData, [e.target.name]: e.target.value });
         setError('');
     };
+    
+    // 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();
@@ -39,7 +48,10 @@ const RegisterPage = () => {
         try {
             const res = await fetch('/api/auth/register', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'x-csrf-token': csrfToken
+                },
                 body: JSON.stringify({
                     name: formData.name,
                     email: formData.email,
@@ -87,6 +99,7 @@ const RegisterPage = () => {
                         </div>
                     ) : (
                         <form className="space-y-6" onSubmit={handleSubmit}>
+                            <input type="hidden" name="csrf_token" value={csrfToken} />
                             {error && (
                                 <div className="bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg flex items-center gap-3 text-red-700 animate-in slide-in-from-top-2 duration-300">
                                     <AlertCircle size={20} className="shrink-0" />