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

app/reset-password/page.tsx

@@ -13,9 +13,18 @@ const ResetPasswordForm = () => {
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
+    const [csrfToken, setCsrfToken] = useState('');
     const router = useRouter();
     const searchParams = useSearchParams();
     const token = searchParams.get('token');
+    
+    // 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));
+    }, []);
 
     useEffect(() => {
         if (!token) {
@@ -43,7 +52,10 @@ const ResetPasswordForm = () => {
         try {
             const res = await fetch('/api/auth/reset-password', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'x-csrf-token': csrfToken
+                },
                 body: JSON.stringify({ token, password }),
             });
 
@@ -84,6 +96,7 @@ const ResetPasswordForm = () => {
                     </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}