created new csrf plugin and use it into initialSetup

apps/web/composables/useInitalSetup/useInitialSetup.ts

@@ -1,6 +1,7 @@
 import { Cart, SessionResult } from '@plentymarkets/shop-api';
 import { useSdk } from '~/sdk';
 import { SetInitialData, UseInitialSetupReturn } from './types';
+import { getCurrentInstance } from 'vue';
 
 /** Function for getting current customer/cart data from session
  * @example
@@ -15,6 +16,18 @@ const setInitialData: SetInitialData = async () => {
 
   const { setCart } = useCart();
   setCart(data.value?.data.basket as Cart);
+
+  const csrf = data.value?.data.csrf;
+
+  const appInstance = getCurrentInstance();
+  interface CsrfObject {
+    updateCSRFToken: (token: string) => void;
+  }
+
+  if (appInstance && appInstance.appContext.config.globalProperties.$csrf) {
+    appInstance.appContext.config.globalProperties.$csrf.updateCSRFToken(csrf);
+  }
+  console.log('csrf:' + csrf);
 };
 
 /**

apps/web/nuxt.config.ts

@@ -164,4 +164,5 @@ export default defineNuxtConfig({
     },
     registerWebManifestInRouteRules: true,
   },
+  plugins: ['~/plugins/csrf.js'],
 });

apps/web/plugins/csrf.js

@@ -0,0 +1,47 @@
+import { ref } from 'vue';
+import { defineNuxtPlugin } from '#imports';
+
+export default defineNuxtPlugin((nuxt) => {
+    const CSRFtoken = ref('');
+
+    const getCSRFToken = () => CSRFtoken.value;
+
+    const updateCSRFToken = (token) => {
+        CSRFtoken.value = token;
+    };
+
+    const attachCSRFToForm = () => {
+        const forms = document.querySelectorAll('form');
+        forms.forEach((form) => {
+            const csrfInput = document.createElement('input');
+            csrfInput.type = 'hidden';
+            csrfInput.name = 'csrf_token';
+            csrfInput.value = CSRFtoken.value;
+            form.append(csrfInput);
+        });
+    };
+
+    const csrfRef = {
+        token: CSRFtoken,
+        getCSRFToken,
+        updateCSRFToken,
+        attachCSRFToForm,
+    };
+
+    // Store the original fetch function
+    const originalFetch = window.fetch;
+
+    // Override the fetch function
+    window.fetch = async (url, options = {}) => {
+        if (['POST', 'PUT', 'DELETE'].includes(options.method.toUpperCase())) {
+            options.headers = options.headers || {};
+            options.headers['X-CSRF-Token'] = CSRFtoken.value;
+        }
+        return originalFetch(url, options);
+    };
+
+    // Register the global property
+    nuxt.provide('$csrf', csrfRef);
+
+    return csrfRef;
+});