MVP

src/hooks/useCsrf.ts

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to fetch and manage CSRF token for client-side requests
+ */
+export function useCsrf() {
+  const [csrfToken, setCsrfToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchCsrfToken() {
+      try {
+        const response = await fetch('/api/csrf');
+        const data = await response.json();
+        setCsrfToken(data.csrfToken);
+      } catch (error) {
+        console.error('Failed to fetch CSRF token:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchCsrfToken();
+  }, []);
+
+  /**
+   * Helper function to add CSRF token to fetch headers
+   */
+  const getHeaders = (additionalHeaders: HeadersInit = {}) => {
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+      ...additionalHeaders,
+    };
+
+    if (csrfToken) {
+      headers['x-csrf-token'] = csrfToken;
+    }
+
+    return headers;
+  };
+
+  /**
+   * Wrapper for fetch with automatic CSRF token injection
+   */
+  const fetchWithCsrf = async (url: string, options: RequestInit = {}) => {
+    const headers = getHeaders(options.headers as HeadersInit);
+
+    return fetch(url, {
+      ...options,
+      headers,
+    });
+  };
+
+  return {
+    csrfToken,
+    loading,
+    getHeaders,
+    fetchWithCsrf,
+  };
+}