fix: auto-recover from stale CSRF token instead of failing add-to-cart/checkout

Reproduced live: repeated cart/checkout POSTs intermittently return 419
(CSRF token mismatch) even when the X-XSRF-TOKEN header is read fresh
from the cookie on every attempt, and once it starts happening the
session stays stuck failing until a full page reload. A full reload
(fresh Set-Cookie from the server) or hitting /sanctum/csrf-cookie
reliably fixes it — confirmed by reproducing the stuck state and
recovering it via that endpoint before retrying the same request.

useApi.ts now retries once via /sanctum/csrf-cookie on a 419 before
surfacing an error, so this self-heals instead of leaving "Add to Cart"
silently doing nothing. Added fetchWithCsrfRetry for the raw fetch()
calls in Summary.vue (checkout, promotion/gift-card preview), which had
the same exposure since they don't go through the composable.

Author: AdilAzhari

resources/js/Composables/useApi.ts

@@ -12,6 +12,10 @@ interface UseApiOptions {
      * Timeout in milliseconds
      */
     timeout?: number;
+    /**
+     * Internal: set when retrying after a CSRF token refresh, to avoid retry loops.
+     */
+    _retriedAfterCsrfRefresh?: boolean;
 }
 
 interface ApiError {
@@ -77,6 +81,26 @@ export function useApi() {
             loading.value = false;
             return response.data;
         } catch (err) {
+            // The session's CSRF token can fall out of sync with the XSRF-TOKEN cookie
+            // (session storage/rotation quirks). Refresh it once via Sanctum's
+            // csrf-cookie endpoint and retry before surfacing an error to the user.
+            if (
+                axios.isAxiosError(err) &&
+                err.response?.status === 419 &&
+                !options?._retriedAfterCsrfRefresh
+            ) {
+                try {
+                    await axios.get('/sanctum/csrf-cookie', { withCredentials: true });
+
+                    return await request<T>(method, url, data, {
+                        ...options,
+                        _retriedAfterCsrfRefresh: true,
+                    });
+                } catch {
+                    // Fall through to normal error handling below.
+                }
+            }
+
             loading.value = false;
             error.value = parseError(err);
             return null;
@@ -226,6 +250,37 @@ export function useApi() {
     };
 }
 
+function getXsrfTokenFromCookie(): string {
+    const match = document.cookie.split('; ').find(row => row.startsWith('XSRF-TOKEN='));
+    return match ? decodeURIComponent(match.split('=')[1]) : '';
+}
+
+/**
+ * Wraps `fetch()` for callers that can't use the `useApi` composable (e.g. one-off
+ * calls outside a component's setup). Injects a fresh X-XSRF-TOKEN header on every
+ * attempt, and if the session's CSRF token has fallen out of sync with the cookie,
+ * refreshes it via Sanctum's csrf-cookie endpoint and retries once before giving up.
+ */
+export async function fetchWithCsrfRetry(input: string, init: RequestInit = {}): Promise<Response> {
+    const withFreshToken = (): RequestInit => ({
+        ...init,
+        headers: {
+            ...init.headers,
+            'X-XSRF-TOKEN': getXsrfTokenFromCookie(),
+        },
+    });
+
+    const response = await fetch(input, withFreshToken());
+
+    if (response.status !== 419) {
+        return response;
+    }
+
+    await fetch('/sanctum/csrf-cookie', { credentials: 'include' });
+
+    return fetch(input, withFreshToken());
+}
+
 /**
  * Generates a unique idempotency key for checkout operations.
  * Keys are stored in sessionStorage to survive page refreshes.

resources/js/Pages/Checkout/Summary.vue

@@ -9,6 +9,7 @@ import { useCheckout } from '@/Composables/useCheckout';
 import { usePayments } from '@/Composables/usePayments';
 import { useLocale } from '@/Composables/useLocale';
 import { useCurrency } from '@/Composables/useCurrency';
+import { fetchWithCsrfRetry } from '@/Composables/useApi';
 import type { CartApiResource } from '@/types/api';
 
 function normalizeImages(images: string | string[] | null | undefined): string[] {
@@ -81,12 +82,11 @@ async function applyPromotion(): Promise<void> {
     couponLoading.value = true;
 
     try {
-        const res = await fetch('/api/v1/promotions/preview', {
+        const res = await fetchWithCsrfRetry('/api/v1/promotions/preview', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json',
-                'X-XSRF-TOKEN': getXsrfToken(),
                 'X-Requested-With': 'XMLHttpRequest',
             },
             credentials: 'include',
@@ -125,12 +125,11 @@ async function applyGiftCard(): Promise<void> {
     giftCardLoading.value = true;
 
     try {
-        const res = await fetch('/api/v1/gift-cards/preview', {
+        const res = await fetchWithCsrfRetry('/api/v1/gift-cards/preview', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json',
-                'X-XSRF-TOKEN': getXsrfToken(),
                 'X-Requested-With': 'XMLHttpRequest',
             },
             credentials: 'include',
@@ -165,12 +164,11 @@ async function handleInitiateCheckout() {
     isSubmitting.value = true;
 
     try {
-        const res = await fetch('/api/v1/checkout', {
+        const res = await fetchWithCsrfRetry('/api/v1/checkout', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json',
-                'X-XSRF-TOKEN': getXsrfToken(),
                 'X-Requested-With': 'XMLHttpRequest',
                 'Idempotency-Key': getIdempotencyKey('checkout'),
             },
@@ -209,13 +207,6 @@ async function handleInitiateCheckout() {
     }
 }
 
-function getXsrfToken(): string {
-    const match = document.cookie
-        .split('; ')
-        .find(row => row.startsWith('XSRF-TOKEN='));
-    return match ? decodeURIComponent(match.split('=')[1]) : '';
-}
-
 function getIdempotencyKey(operation: string): string {
     const storageKey = `idempotency_${operation}`;
     let key = sessionStorage.getItem(storageKey);