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

app/forgot-password/page.tsx

@@ -7,10 +7,19 @@ import { useUser } from '@/components/UserProvider';
 const ForgotPasswordPage = () => {
     const { settings } = useUser();
     const siteName = settings?.siteName || "Afrohub";
+    
+    // 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 [email, setEmail] = useState('');
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
+    const [csrfToken, setCsrfToken] = useState('');
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -21,7 +30,10 @@ const ForgotPasswordPage = () => {
         try {
             const res = await fetch('/api/auth/forgot-password', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'x-csrf-token': csrfToken
+                },
                 body: JSON.stringify({ email }),
             });
 
@@ -61,6 +73,7 @@ const ForgotPasswordPage = () => {
                     </div>
                 ) : (
                     <form className="mt-8 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 text-red-700 text-sm">
                                 {error}