fix(inertia): send csrf token with visits

assets/e2e/demo.spec.ts

@@ -73,4 +73,19 @@ test.describe('Demo page navigation', () => {
     // Inertia subsequent navigations are XHR (fetch), not document requests
     expect(requests.length).toBe(0)
   })
+
+  test('Inertia visits carry the Phoenix CSRF token header', async ({
+    page,
+  }) => {
+    await page.goto('/demo/a')
+
+    const inertiaRequest = page.waitForRequest(
+      req => req.url().endsWith('/demo/b') && req.resourceType() !== 'document',
+    )
+
+    await page.getByRole('button', { name: RE_GO_TO_B }).click()
+
+    const request = await inertiaRequest
+    expect(request.headers()['x-csrf-token']).toBeTruthy()
+  })
 })

assets/src/app.tsx

@@ -2,9 +2,12 @@ import type { ComponentType } from 'react'
 import { createInertiaApp } from '@inertiajs/react'
 
 import { createRoot } from 'react-dom/client'
+import { installHttpHeaderInterceptor } from './lib/http'
 import '../css/app.css'
 import './theme'
 
+installHttpHeaderInterceptor()
+
 createInertiaApp({
   resolve: (name: string) => {
     const pages = import.meta.glob<{ default: ComponentType }>(

assets/src/lib/http.ts

@@ -0,0 +1,19 @@
+// Inertia v3 ships its own XHR client (no more axios). We attach Phoenix's
+// CSRF token via the client's request interceptor so every non-GET Inertia
+// visit passes protect_from_forgery.
+import { http } from '@inertiajs/react'
+
+export function installHttpHeaderInterceptor(): void {
+  http.onRequest((config) => {
+    const csrfToken = document
+      .querySelector<HTMLMetaElement>('meta[name="csrf-token"]')
+      ?.content
+
+    if (csrfToken) {
+      config.headers = config.headers ?? {}
+      config.headers['x-csrf-token'] = csrfToken
+    }
+
+    return config
+  })
+}