Move anti-forgery implementation in demos to shared

apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.ts

@@ -1,10 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
-import { HttpClient, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { DxDataGridComponent, DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
-import { antiForgeryInterceptor, AntiForgeryTokenService } from './app.service';
+import 'anti-forgery';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -30,15 +30,13 @@ if (window && window.config?.packageConfigPaths) {
 export class AppComponent {
   ordersStore: AspNetData.CustomStore;
 
-  constructor(private http: HttpClient, private tokenService: AntiForgeryTokenService) {
+  constructor(private http: HttpClient) {
     this.ordersStore = AspNetData.createStore({
       key: 'OrderID',
       loadUrl: `${URL}/Orders`,
       async onBeforeSend(_method, ajaxOptions) {
-        const tokenData = await lastValueFrom(tokenService.getToken());
         ajaxOptions.xhrFields = {
           withCredentials: true,
-          headers: { [tokenData.headerName]: tokenData.token },
         };
       },
     });
@@ -108,7 +106,6 @@ bootstrapApplication(AppComponent, {
     provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideHttpClient(
       withFetch(),
-      withInterceptors([antiForgeryInterceptor]),
     ),
   ],
 });

apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx

@@ -6,52 +6,12 @@ import 'whatwg-fetch';
 
 const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
 const URL = `${BASE_PATH}/api/DataGridBatchUpdateWebApi`;
-
-async function fetchAntiForgeryToken(): Promise<{ headerName: string; token: string }> {
-  try {
-    const response = await fetch(`${BASE_PATH}/api/Common/GetAntiForgeryToken`, {
-      method: 'GET',
-      credentials: 'include',
-      cache: 'no-cache',
-    });
-
-    if (!response.ok) {
-      const errorMessage = await response.text();
-      throw new Error(`Failed to retrieve anti-forgery token: ${errorMessage || response.statusText}`);
-    }
-
-    return await response.json();
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-    throw new Error(errorMessage);
-  }
-}
-
-async function getAntiForgeryTokenValue(): Promise<{ headerName: string; token: string }> {
-  const tokenMeta = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]');
-  if (tokenMeta) {
-    const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
-    const token = tokenMeta.getAttribute('content') || '';
-    return Promise.resolve({ headerName, token });
-  }
-
-  const tokenData = await fetchAntiForgeryToken();
-  const meta = document.createElement('meta');
-  meta.name = 'csrf-token';
-  meta.content = tokenData.token;
-  meta.dataset.headerName = tokenData.headerName;
-  document.head.appendChild(meta);
-  return tokenData;
-}
-
 const ordersStore = createStore({
   key: 'OrderID',
   loadUrl: `${URL}/Orders`,
   async onBeforeSend(_method, ajaxOptions) {
-    const tokenData = await getAntiForgeryTokenValue();
     ajaxOptions.xhrFields = {
       withCredentials: true,
-      headers: { [tokenData.headerName]: tokenData.token },
     };
   },
 });
@@ -81,31 +41,25 @@ function normalizeChanges(changes: DataGridTypes.DataChange[]): DataGridTypes.Da
   }) as DataGridTypes.DataChange[];
 }
 
-async function sendBatchRequest(url: string, changes: DataGridTypes.DataChange[], headers: Record<string, string>) {
-  try {
-    const response = await fetch(url, {
-      method: 'POST',
-      body: JSON.stringify(changes),
-      headers: {
-        'Content-Type': 'application/json;charset=UTF-8',
-        ...headers,
-      },
-      credentials: 'include',
-    });
+async function sendBatchRequest(url: string, changes: DataGridTypes.DataChange[]) {
+  const result = await fetch(url, {
+    method: 'POST',
+    body: JSON.stringify(changes),
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8',
+    },
+    credentials: 'include',
+  });
 
-    if (!response.ok) {
-      const errorMessage = await response.text();
-      throw new Error(`Batch save failed: ${errorMessage || response.statusText}`);
-    }
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-    throw new Error(errorMessage);
+  if (!result.ok) {
+    const json = await result.json();
+
+    throw json.Message;
   }
 }
 
 async function processBatchRequest(url: string, changes: DataGridTypes.DataChange[], component: ReturnType<DataGridRef['instance']>) {
-  const tokenData = await getAntiForgeryTokenValue();
-  await sendBatchRequest(url, changes, { [tokenData.headerName]: tokenData.token });
+  await sendBatchRequest(url, changes);
   await component.refresh(true);
   component.cancelEditData();
 }

apps/demos/Demos/DataGrid/BatchUpdateRequest/React/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+// eslint-disable-next-line import/no-unresolved
+import 'anti-forgery';
 import App from './App.tsx';
 
 ReactDOM.render(

apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/App.js

@@ -5,48 +5,12 @@ import 'whatwg-fetch';
 
 const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
 const URL = `${BASE_PATH}/api/DataGridBatchUpdateWebApi`;
-async function fetchAntiForgeryToken() {
-  try {
-    const response = await fetch(`${BASE_PATH}/api/Common/GetAntiForgeryToken`, {
-      method: 'GET',
-      credentials: 'include',
-      cache: 'no-cache',
-    });
-    if (!response.ok) {
-      const errorMessage = await response.text();
-      throw new Error(
-        `Failed to retrieve anti-forgery token: ${errorMessage || response.statusText}`,
-      );
-    }
-    return await response.json();
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-    throw new Error(errorMessage);
-  }
-}
-async function getAntiForgeryTokenValue() {
-  const tokenMeta = document.querySelector('meta[name="csrf-token"]');
-  if (tokenMeta) {
-    const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
-    const token = tokenMeta.getAttribute('content') || '';
-    return Promise.resolve({ headerName, token });
-  }
-  const tokenData = await fetchAntiForgeryToken();
-  const meta = document.createElement('meta');
-  meta.name = 'csrf-token';
-  meta.content = tokenData.token;
-  meta.dataset.headerName = tokenData.headerName;
-  document.head.appendChild(meta);
-  return tokenData;
-}
 const ordersStore = createStore({
   key: 'OrderID',
   loadUrl: `${URL}/Orders`,
   async onBeforeSend(_method, ajaxOptions) {
-    const tokenData = await getAntiForgeryTokenValue();
     ajaxOptions.xhrFields = {
       withCredentials: true,
-      headers: { [tokenData.headerName]: tokenData.token },
     };
   },
 });
@@ -74,29 +38,22 @@ function normalizeChanges(changes) {
     }
   });
 }
-async function sendBatchRequest(url, changes, headers) {
-  try {
-    const response = await fetch(url, {
-      method: 'POST',
-      body: JSON.stringify(changes),
-      headers: {
-        'Content-Type': 'application/json;charset=UTF-8',
-        ...headers,
-      },
-      credentials: 'include',
-    });
-    if (!response.ok) {
-      const errorMessage = await response.text();
-      throw new Error(`Batch save failed: ${errorMessage || response.statusText}`);
-    }
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-    throw new Error(errorMessage);
+async function sendBatchRequest(url, changes) {
+  const result = await fetch(url, {
+    method: 'POST',
+    body: JSON.stringify(changes),
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8',
+    },
+    credentials: 'include',
+  });
+  if (!result.ok) {
+    const json = await result.json();
+    throw json.Message;
   }
 }
 async function processBatchRequest(url, changes, component) {
-  const tokenData = await getAntiForgeryTokenValue();
-  await sendBatchRequest(url, changes, { [tokenData.headerName]: tokenData.token });
+  await sendBatchRequest(url, changes);
   await component.refresh(true);
   component.cancelEditData();
 }

apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+// eslint-disable-next-line import/no-unresolved
+import 'anti-forgery';
 import App from './App.js';
 
 ReactDOM.render(<App />, document.getElementById('app'));