pass csrf token in header instead of body

lib/api/fetch.ts

@@ -13,10 +13,12 @@ export default function fetchFactory(
   apiEndpoint: string = appConfig.api.endpoint,
 ) {
   return function fetch(path: string, init?: RequestInit): Promise<Response> {
+    const csrfToken = _req.headers['x-csrf-token']?.toString();
     const headers = {
       accept: 'application/json',
       'content-type': 'application/json',
       cookie: `${ cookies.NAMES.API_TOKEN }=${ _req.cookies[cookies.NAMES.API_TOKEN] }`,
+      ...(csrfToken ? { 'x-csrf-token': csrfToken } : {}),
     };
     const url = new URL(path, apiEndpoint);
 

lib/hooks/useFetch.tsx

@@ -20,9 +20,13 @@ export default function useFetch() {
   return React.useCallback(<Success, Error>(path: string, params?: Params): Promise<Success | ResourceError<Error>> => {
     const reqParams = {
       ...params,
-      body: params?.method && ![ 'GET', 'HEAD' ].includes(params.method) ?
-        JSON.stringify({ ...params?.body, _csrf_token: token }) :
+      body: params?.method && params?.body && ![ 'GET', 'HEAD' ].includes(params.method) ?
+        JSON.stringify(params.body) :
         undefined,
+      headers: {
+        ...params?.headers,
+        ...(token ? { 'x-csrf-token': token } : {}),
+      },
     };
 
     return fetch(path, reqParams).then(response => {