Fix critical antiforgery issue and ensure compatibility of self-contained systems (#713)

### Summary & motivation

Resolve several issues introduced by the recent addition of antiforgery
protection and improve cross-system compatibility in PlatformPlatform.

Fixes and improvements include:
1. The internal
`/internal-api/account-management/authentication/refresh-authentication-tokens`
endpoint now explicitly disables antiforgery checks, as it did not
receive the required antiforgery cookie or header, causing users to be
logged out when trying to refresh the access token.
2. Antiforgery logic has been extracted into a shared module in the web
app infrastructure. This provides:
- A reusable fetch wrapper that automatically adds the antiforgery token
for non-GET requests.
- A reusable middleware for TanStack Query (`openapi-fetch`) clients.
- Simpler integration in LocaleSwitcher and other components making
direct fetch calls.
3. A bug was fixed where antiforgery validation failed across
self-contained systems due to different Data Protection keys being used.
To resolve this:
- A common ApplicationName is now set when running locally, ensuring
that all systems share encryption keys for signing antiforgery tokens.
- In Azure, Azure Container App is configured to automatically and
securely share data protection keys.

Together, these changes ensure that antiforgery protection works
reliably across all parts of the platform, both locally and in
production.

### Downstream projects

Update your API client initialization and application bootstrap logic:

1. Copy the `back-office/WebApp/bootstrap.tsx` into your self-contained
system. A new `initializeHttpInterceptor()` call has been introduced
including some formatting.

2. Copy `back-office/WebApp/client.ts` into your-self-contained-system A
new `apiClient.use(createAntiforgeryMiddleware());` has been added.

3. If you are using fetch directly in your code, use the
`fetchWithAntiforgeryToken` helper:

```
import { fetchWithAntiforgeryToken } from "@repo/infrastructure/http/antiforgeryTokenHandler";

await fetchWithAntiforgeryToken("/your-endpoint", { method: "POST", body: ... });
```

See example in the
`shared-webapp/infrastructure/translations/LocaleSwitcher.tsx`

4. If you have any `internal/**` endpoints called from other
self-contained systems, you may need to add `.DisableAntiforgery();`

### Checklist

- [x] I have added tests, or done manual regression tests
- [x] I have updated the documentation, if necessary

Author: tjementum

application/account-management/Api/Endpoints/AuthenticationEndpoints.cs

@@ -34,6 +34,6 @@ public void MapEndpoints(IEndpointRouteBuilder routes)
         // Note: This endpoint must be called with the refresh token as Bearer token in the Authorization header
         routes.MapPost("/internal-api/account-management/authentication/refresh-authentication-tokens", async Task<ApiResult> (IMediator mediator)
             => await mediator.Send(new RefreshAuthenticationTokensCommand())
-        );
+        ).DisableAntiforgery();
     }
 }

application/account-management/WebApp/bootstrap.tsx

@@ -1,11 +1,14 @@
 import "@repo/ui/tailwind.css";
 import { router } from "@/shared/lib/router/router";
 import { ApplicationInsightsProvider } from "@repo/infrastructure/applicationInsights/ApplicationInsightsProvider";
+import { initializeHttpInterceptors } from "@repo/infrastructure/http/antiforgeryTokenHandler";
 import { Translation } from "@repo/infrastructure/translations/Translation";
 import { RouterProvider } from "@tanstack/react-router";
 import React from "react";
-// biome-ignore lint/style/useNamingConvention: ReactDOM is a standard library name with consecutive uppercase letters
-import ReactDOM from "react-dom/client";
+import reactDom from "react-dom/client";
+
+// Initialize HTTP interceptors to automatically handle antiforgery tokens
+initializeHttpInterceptors();
 
 const { TranslationProvider } = await Translation.create(
   (locale) => import(`@/shared/translations/locale/${locale}.ts`)
@@ -17,7 +20,7 @@ if (!rootElement) {
   throw new Error("Root element not found");
 }
 
-ReactDOM.createRoot(rootElement).render(
+reactDom.createRoot(rootElement).render(
   <React.StrictMode>
     <TranslationProvider>
       <ApplicationInsightsProvider>

application/account-management/WebApp/shared/lib/api/client.ts

@@ -1,32 +1,17 @@
 import { createAuthenticationMiddleware } from "@repo/infrastructure/auth/AuthenticationMiddleware";
-import type { components, paths } from "./api.generated";
-
+import { createAntiforgeryMiddleware } from "@repo/infrastructure/http/antiforgeryTokenHandler";
 import createFetchClient from "openapi-fetch";
 import createClient from "openapi-react-query";
+import type { components, paths } from "./api.generated";
 
 export * from "./api.generated.d";
 
-const apiClient = createFetchClient<paths>({
+export const apiClient = createFetchClient<paths>({
   baseUrl: import.meta.env.PUBLIC_URL
 });
-apiClient.use(createAuthenticationMiddleware());
 
-// Add middleware to include antiforgery token only for non-GET requests
-apiClient.use({
-  onRequest: (params) => {
-    const request = params.request;
-    if (request instanceof Request && request.method !== "GET") {
-      request.headers.set("x-xsrf-token", getAntiforgeryToken());
-    }
-    return request;
-  }
-});
-
-// Get the antiforgery token from the meta tag
-const getAntiforgeryToken = () => {
-  const metaTag = document.querySelector('meta[name="antiforgeryToken"]');
-  return metaTag?.getAttribute("content") ?? "";
-};
+apiClient.use(createAuthenticationMiddleware());
+apiClient.use(createAntiforgeryMiddleware());
 
 export const api = createClient(apiClient);
 

application/back-office/WebApp/bootstrap.tsx

@@ -1,11 +1,14 @@
 import "@repo/ui/tailwind.css";
 import { router } from "@/shared/lib/router/router";
 import { ApplicationInsightsProvider } from "@repo/infrastructure/applicationInsights/ApplicationInsightsProvider";
+import { initializeHttpInterceptors } from "@repo/infrastructure/http/antiforgeryTokenHandler";
 import { Translation } from "@repo/infrastructure/translations/Translation";
 import { RouterProvider } from "@tanstack/react-router";
 import React from "react";
-// biome-ignore lint/style/useNamingConvention: ReactDOM is a standard library name with consecutive uppercase letters
-import ReactDOM from "react-dom/client";
+import reactDom from "react-dom/client";
+
+// Initialize HTTP interceptors to automatically handle antiforgery tokens
+initializeHttpInterceptors();
 
 const { TranslationProvider } = await Translation.create(
   (locale) => import(`@/shared/translations/locale/${locale}.ts`)
@@ -17,7 +20,7 @@ if (!rootElement) {
   throw new Error("Root element not found");
 }
 
-ReactDOM.createRoot(rootElement).render(
+reactDom.createRoot(rootElement).render(
   <React.StrictMode>
     <TranslationProvider>
       <ApplicationInsightsProvider>

application/back-office/WebApp/shared/lib/api/client.ts

@@ -1,15 +1,17 @@
 import { createAuthenticationMiddleware } from "@repo/infrastructure/auth/AuthenticationMiddleware";
-import type { components, paths } from "./api.generated";
-
+import { createAntiforgeryMiddleware } from "@repo/infrastructure/http/antiforgeryTokenHandler";
 import createFetchClient from "openapi-fetch";
 import createClient from "openapi-react-query";
+import type { components, paths } from "./api.generated";
 
 export * from "./api.generated.d";
 
 export const apiClient = createFetchClient<paths>({
   baseUrl: import.meta.env.PUBLIC_URL
 });
+
 apiClient.use(createAuthenticationMiddleware());
+apiClient.use(createAntiforgeryMiddleware());
 
 export const api = createClient(apiClient);
 

application/shared-kernel/SharedKernel/Configuration/ApiDependencyConfiguration.cs

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Authentication.JwtBearer;
 using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.DataProtection;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.HttpOverrides;
 using Microsoft.Extensions.DependencyInjection;
@@ -62,6 +63,7 @@ public static IServiceCollection AddApiServices(this IServiceCollection services
             .AddApiEndpoints(assemblies)
             .AddOpenApiConfiguration(assemblies)
             .AddAuthConfiguration()
+            .AddCrossServiceDataProtection()
             .AddAntiforgery(options =>
                 {
                     options.Cookie.Name = AuthenticationTokenHttpKeys.AntiforgeryTokenCookieName;
@@ -167,6 +169,20 @@ private static IServiceCollection AddAuthConfiguration(this IServiceCollection s
         return services.AddAuthorization();
     }
 
+    private static IServiceCollection AddCrossServiceDataProtection(this IServiceCollection services)
+    {
+        // Configure shared data protection to ensure encrypted data can be shared across all self-contained systems
+        var dataProtection = services.AddDataProtection();
+
+        if (!SharedInfrastructureConfiguration.IsRunningInAzure)
+        {
+            // Set a common application name for all self-contained systems for local development (handled automatically by Azure Container Apps Environment)
+            dataProtection.SetApplicationName("PlatformPlatform");
+        }
+
+        return services;
+    }
+
     public static IServiceCollection AddHttpForwardHeaders(this IServiceCollection services)
     {
         // Ensure correct client IP addresses are set for requests

application/shared-webapp/infrastructure/http/antiforgeryTokenHandler.ts

@@ -0,0 +1,67 @@
+/**
+ * HTTP utilities for handling antiforgery tokens in fetch requests
+ *
+ * This module provides utilities to automatically add antiforgery tokens to HTTP requests
+ * for both native fetch and openapi-fetch clients
+ */
+
+/**
+ * Gets the antiforgery token from the meta tag
+ */
+export const getAntiforgeryToken = (): string => {
+  const metaTag = document.querySelector('meta[name="antiforgeryToken"]');
+  return metaTag?.getAttribute("content") ?? "";
+};
+
+// Store the original fetch function to avoid recursion
+const originalFetch = window.fetch;
+
+/**
+ * Fetch function that automatically adds the antiforgery token to non-GET requests
+ */
+export const fetchWithAntiforgeryToken = (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+  const method = init?.method?.toUpperCase() ?? "GET";
+
+  // Create a new init object with the original properties
+  const enhancedInit: RequestInit = { ...init };
+
+  // Add antiforgery token for non-GET requests
+  if (method !== "GET") {
+    enhancedInit.headers = {
+      ...enhancedInit.headers,
+      "x-xsrf-token": getAntiforgeryToken()
+    };
+  }
+
+  // Call the original fetch with the enhanced init to avoid recursion
+  return originalFetch.call(window, input, enhancedInit);
+};
+
+type OpenApiFetchRequestParams = {
+  request: Request;
+};
+
+/**
+ * Initialize HTTP interceptors to add antiforgery tokens to all non-GET requests
+ *
+ * Call this function once during application startup to ensure all HTTP calls
+ * have the necessary antiforgery tokens
+ */
+export const initializeHttpInterceptors = (): void => {
+  window.fetch = (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    return fetchWithAntiforgeryToken(input, init);
+  };
+};
+
+/**
+ * Creates middleware for openapi-fetch clients to add antiforgery tokens
+ */
+export const createAntiforgeryMiddleware = () => ({
+  onRequest: ({ request }: OpenApiFetchRequestParams) => {
+    // Only add the token for non-GET requests
+    if (request.method !== "GET") {
+      request.headers.set("x-xsrf-token", getAntiforgeryToken());
+    }
+    return request;
+  }
+});

application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx

@@ -1,6 +1,7 @@
 import { useLingui } from "@lingui/react";
 import type { Key } from "@react-types/shared";
 import { AuthenticationContext } from "@repo/infrastructure/auth/AuthenticationProvider";
+import { fetchWithAntiforgeryToken } from "@repo/infrastructure/http/antiforgeryTokenHandler";
 import { Button } from "@repo/ui/components/Button";
 import { Menu, MenuItem, MenuTrigger } from "@repo/ui/components/Menu";
 import { CheckIcon, LanguagesIcon } from "lucide-react";
@@ -26,7 +27,7 @@ export function LocaleSwitcher({ "aria-label": ariaLabel }: { "aria-label": stri
     const locale = key.toString() as Locale;
     if (locale !== currentLocale) {
       if (userInfo?.isAuthenticated) {
-        fetch("/api/account-management/users/me/change-locale", {
+        fetchWithAntiforgeryToken("/api/account-management/users/me/change-locale", {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ locale })