63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
'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: Record<string, string> = {
|
|
'Content-Type': 'application/json',
|
|
...(additionalHeaders as Record<string, string>),
|
|
};
|
|
|
|
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,
|
|
};
|
|
}
|