vue-api-kit 1.5.1 → 1.6.0

package/README.md

@@ -458,18 +458,23 @@ The client includes built-in CSRF token protection, perfect for Laravel Sanctum
 
 ### How it works
 
-When you set `csrfRefreshEndpoint`, the client will:
-1. Automatically detect CSRF errors (403 or 419 status codes)
-2. Call the CSRF refresh endpoint to get a new token
-3. Retry the original request with the fresh token
-4. Prevent infinite loops and race conditions
+**Automatic XSRF Token Handling:**
+1. When `withCredentials: true`, the client automatically reads the `XSRF-TOKEN` cookie
+2. Decodes and sends it as `X-XSRF-TOKEN` header with every request
+3. This satisfies Laravel Sanctum's CSRF protection requirements
+
+**Automatic CSRF Refresh:**
+1. Detects CSRF errors (403 or 419 status codes)
+2. Calls the CSRF refresh endpoint to get a new token
+3. Retries the original request automatically with the fresh token
+4. Prevents infinite loops and race conditions
 
 ### Configuration
 
 ```typescript
 const api = createApiClient({
   baseURL: 'https://api.example.com',
-  withCredentials: true, // Required for CSRF cookies
+  withCredentials: true, // Required! Enables cookies AND auto XSRF header
   csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Laravel Sanctum endpoint
 
   queries: { /* ... */ },
@@ -486,7 +491,7 @@ import { z } from 'zod';
 
 export const api = createApiClient({
   baseURL: 'https://api.example.com',
-  withCredentials: true, // Send cookies with requests
+  withCredentials: true, // Enables cookies AND automatic XSRF-TOKEN header
   csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Laravel's CSRF endpoint
 
   mutations: {
@@ -519,12 +524,24 @@ export const api = createApiClient({
 
 ### Benefits
 
+- ✅ **Automatic XSRF Header**: Cookie automatically sent as `X-XSRF-TOKEN` header
 - ✅ **Automatic Recovery**: No manual token refresh needed
 - ✅ **Seamless UX**: Users don't experience authentication errors
 - ✅ **Race Condition Safe**: Multiple simultaneous requests share the same refresh
 - ✅ **Infinite Loop Prevention**: Won't retry the CSRF endpoint itself
 - ✅ **Laravel Sanctum Compatible**: Works perfectly with Laravel's SPA authentication
 
+### Important Notes
+
+1. **withCredentials is required**: Set `withCredentials: true` to enable both cookies and automatic XSRF token handling
+2. **Cookie Domain**: Ensure your API sets cookies with the correct domain (e.g., `.localhost` for local development)
+3. **CORS Configuration**: Your Laravel backend must allow credentials:
+   ```php
+   // config/cors.php
+   'supports_credentials' => true,
+   'allowed_origins' => ['http://localhost:5173'],
+   ```
+
 
 
 ## 📝 License

package/dist/index.js

@@ -1,159 +1,163 @@
-import { ZodError as L } from "zod";
-import * as T from "zod";
-import k, { AxiosError as S } from "axios";
-import { AxiosError as K } from "axios";
-import { nextTick as x, ref as m, onMounted as F, watch as N, onBeforeUnmount as Z } from "vue";
-import { debounce as _ } from "lodash-es";
-function z(r) {
-  const h = k.create({
-    baseURL: r.baseURL,
-    ...r.headers && { headers: r.headers },
-    withCredentials: r.withCredentials ?? !1
+import { ZodError as S } from "zod";
+import * as $ from "zod";
+import L, { AxiosError as F } from "axios";
+import { AxiosError as G } from "axios";
+import { nextTick as N, ref as m, onMounted as T, watch as k, onBeforeUnmount as x } from "vue";
+import { debounce as U } from "lodash-es";
+function z(t) {
+  const p = L.create({
+    baseURL: t.baseURL,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      ...t.headers
+    },
+    withCredentials: t.withCredentials ?? !1
   });
-  let P = !1, q = null;
-  r.onBeforeRequest && h.interceptors.request.use(
+  let C = !1, q = null;
+  t.onBeforeRequest && p.interceptors.request.use(
     async (e) => {
       try {
-        return await r.onBeforeRequest(e) || e;
-      } catch (s) {
-        return Promise.reject(s);
+        return await t.onBeforeRequest(e) || e;
+      } catch (r) {
+        return Promise.reject(r);
       }
     },
     (e) => Promise.reject(e)
-  ), r.onStartRequest && h.interceptors.request.use(
+  ), t.onStartRequest && p.interceptors.request.use(
     async (e) => {
       try {
-        return await r.onStartRequest(), e;
-      } catch (s) {
-        return Promise.reject(s);
+        return await t.onStartRequest(), e;
+      } catch (r) {
+        return Promise.reject(r);
       }
     },
     (e) => Promise.reject(e)
-  ), r.onFinishRequest && h.interceptors.response.use(
-    (e) => (r.onFinishRequest(), e),
-    (e) => (r.onFinishRequest(), Promise.reject(e))
-  ), h.interceptors.request.use((e) => {
+  ), t.onFinishRequest && p.interceptors.response.use(
+    (e) => (t.onFinishRequest(), e),
+    (e) => (t.onFinishRequest(), Promise.reject(e))
+  ), p.interceptors.request.use((e) => {
     if (!e.url) return e;
-    const s = (a) => {
+    const r = (a) => {
       if (a)
-        for (const [t, v] of Object.entries(a)) {
-          const l = `{${t}}`;
+        for (const [s, R] of Object.entries(a)) {
+          const l = `{${s}}`;
           e.url.includes(l) && (e.url = e.url.replace(
             l,
-            encodeURIComponent(String(v))
-          ), delete a[t]);
+            encodeURIComponent(String(R))
+          ), delete a[s]);
         }
     };
-    return e.method !== "get" && e.data?.params && s(e.data.params), s(e.params), e;
-  }), r.csrfRefreshEndpoint && h.interceptors.response.use(
+    return e.method !== "get" && e.data?.params && r(e.data.params), r(e.params), e;
+  }), t.withCredentials && p.interceptors.request.use((e) => {
+    const r = document.cookie.split("; ").find((a) => a.startsWith("XSRF-TOKEN="))?.split("=")[1];
+    return r && (e.headers["X-XSRF-TOKEN"] = decodeURIComponent(r)), e;
+  }), t.csrfRefreshEndpoint && p.interceptors.response.use(
     (e) => e,
     async (e) => {
-      const s = e.config;
-      if (s.url === r.csrfRefreshEndpoint)
+      const r = e.config;
+      if (r?.url === t.csrfRefreshEndpoint)
         return Promise.reject(e);
-      if (e.response && (e.response.status === 403 || e.response.status === 419) && !s._retry) {
-        s._retry = !0;
+      if (e.response && (e.response.status === 403 || e.response.status === 419) && !r?._retry) {
+        r._retry = !0;
         try {
-          return P && q ? await q : (P = !0, q = h.get(r.csrfRefreshEndpoint, {
-            // Mark this request to prevent retry
-            _skipRetry: !0
-          }).then(() => {
-            P = !1, q = null;
-          }), await q), h(s);
+          return C && q ? await q : (C = !0, q = p.get(t.csrfRefreshEndpoint).then(() => {
+            C = !1, q = null;
+          }), await q), p.request(r);
         } catch (a) {
-          return P = !1, q = null, Promise.reject(a);
+          return C = !1, q = null, Promise.reject(a);
         }
       }
       return Promise.reject(e);
     }
-  ), h.interceptors.response.use(
+  ), p.interceptors.response.use(
     (e) => e,
-    (e) => (x(() => {
+    (e) => (N(() => {
       e.code;
     }), Promise.reject(e))
   );
-  const C = r.queries ?? {}, M = {};
-  for (const e in C) {
-    const s = C[e];
-    s && (M[e] = (a) => {
-      let t;
-      a && typeof a == "object" && ("loadOnMount" in a || "debounce" in a || "onResult" in a || "onError" in a || "data" in a ? t = a : t = { params: a });
-      const v = m(), l = m(), R = m(), g = m(!1), y = m(!1), A = m(!0);
-      let b = new AbortController();
+  const P = t.queries ?? {}, M = {};
+  for (const e in P) {
+    const r = P[e];
+    r && (M[e] = (a) => {
+      let s;
+      a && typeof a == "object" && ("loadOnMount" in a || "debounce" in a || "onResult" in a || "onError" in a || "data" in a ? s = a : s = { params: a });
+      const R = m(), l = m(), v = m(), g = m(!1), y = m(!1), A = m(!0);
+      let j = new AbortController();
       const u = () => {
-        b?.abort(), b = new AbortController();
+        j?.abort(), j = new AbortController();
       }, c = async () => {
         g.value && u(), g.value = !0, l.value = void 0;
         try {
-          s.params && t?.params && s.params.parse(t.params);
-          let o = t?.data;
-          s.data && o && s.data.parse(o);
+          r.params && s?.params && r.params.parse(s.params);
+          let o = s?.data;
+          r.data && o && r.data.parse(o);
           const f = {
-            method: s.method ?? "GET",
-            url: s.path,
-            params: t?.params,
-            signal: b.signal
+            method: r.method ?? "GET",
+            url: r.path,
+            params: s?.params,
+            signal: j.signal
           };
-          s.method === "POST" && o && (f.data = o);
-          const n = await h.request(f), i = s.response ? s.response.parse(n.data) : n.data;
-          v.value = i, t?.onResult?.(i);
+          r.method === "POST" && o && (f.data = o);
+          const n = await p.request(f), i = r.response ? r.response.parse(n.data) : n.data;
+          R.value = i, s?.onResult?.(i);
         } catch (o) {
-          if (o instanceof S) {
+          if (o instanceof F) {
             if (o.code !== "ERR_CANCELED") {
-              const f = o.response?.data?.message || o.message || "An error occurred", n = o.response?.status, i = o.code, p = o.response?.data;
-              l.value = f, t?.onError?.(o), r.onErrorRequest?.({ message: f, status: n, code: i, data: p });
+              const f = o.response?.data?.message || o.message || "An error occurred", n = o.response?.status, i = o.code, h = o.response?.data;
+              l.value = f, s?.onError?.(o), t.onErrorRequest?.({ message: f, status: n, code: i, data: h });
             }
-          } else if (o instanceof L) {
-            R.value = o.issues || [];
-            const n = `Validation error: ${R.value.map(
+          } else if (o instanceof S) {
+            v.value = o.issues || [];
+            const n = `Validation error: ${v.value.map(
               (i) => `${i.path.join(".")}: ${i.message}`
             ).join(", ")}`;
-            l.value = n, t?.onError?.(o), t?.onZodError?.(R.value), r.onErrorRequest?.({ message: n, code: "VALIDATION_ERROR" }), r.onZodError && r.onZodError(R.value);
+            l.value = n, s?.onError?.(o), s?.onZodError?.(v.value), t.onErrorRequest?.({ message: n, code: "VALIDATION_ERROR" }), t.onZodError && t.onZodError(v.value);
           } else {
             const f = o.message || "An error occurred";
-            l.value = f, t?.onError?.(f), r.onErrorRequest?.({ message: f });
+            l.value = f, s?.onError?.(f), t.onErrorRequest?.({ message: f });
           }
         } finally {
           g.value = !1, y.value = !0;
         }
-      }, E = t?.debounce ? _(c, t.debounce) : c;
+      }, E = s?.debounce ? U(c, s.debounce) : c;
       let d = null;
-      return (t?.params || t?.data) && (F(() => {
-        d && d(), d = N(
-          () => JSON.stringify({ params: t.params, data: t.data }),
+      return (s?.params || s?.data) && (T(() => {
+        d && d(), d = k(
+          () => JSON.stringify({ params: s.params, data: s.data }),
           () => {
             E();
           },
           { immediate: !1 }
         );
-      }), Z(() => {
-        d && d(), b?.abort();
-      })), (t?.loadOnMount === void 0 || t.loadOnMount) && !y.value && (A.value ? (A.value = !1, c()) : E()), { result: v, errorMessage: l, zodErrors: R, isLoading: g, isDone: y, refetch: c };
+      }), x(() => {
+        d && d(), j?.abort();
+      })), (s?.loadOnMount === void 0 || s.loadOnMount) && !y.value && (A.value ? (A.value = !1, c()) : E()), { result: R, errorMessage: l, zodErrors: v, isLoading: g, isDone: y, refetch: c };
     });
   }
-  const D = r.mutations ?? {}, w = {};
+  const D = t.mutations ?? {}, w = {};
   for (const e in D) {
-    const s = D[e];
-    s && (w[e] = (a) => {
-      const t = m(), v = m(), l = m(), R = m(!1), g = m(!1), y = m(0);
-      return { result: t, errorMessage: v, zodErrors: l, isLoading: R, isDone: g, uploadProgress: y, mutate: async (b) => {
-        if (!R.value) {
-          R.value = !0, v.value = void 0, y.value = 0;
+    const r = D[e];
+    r && (w[e] = (a) => {
+      const s = m(), R = m(), l = m(), v = m(!1), g = m(!1), y = m(0);
+      return { result: s, errorMessage: R, zodErrors: l, isLoading: v, isDone: g, uploadProgress: y, mutate: async (j) => {
+        if (!v.value) {
+          v.value = !0, R.value = void 0, y.value = 0;
           try {
-            const { data: u = {}, params: c } = b ?? {};
+            const { data: u = {}, params: c } = j ?? {};
             let E = u ?? {}, d = {};
-            if (s.isMultipart) {
+            if (r.isMultipart) {
               const n = new FormData();
-              for (const [i, p] of Object.entries(u))
-                p instanceof File || p instanceof Blob ? n.append(i, p) : Array.isArray(p) ? p.forEach((j) => {
-                  j instanceof File || j instanceof Blob ? n.append(i, j) : n.append(i, JSON.stringify(j));
-                }) : typeof p == "object" && p !== null ? n.append(i, JSON.stringify(p)) : n.append(i, String(p));
+              for (const [i, h] of Object.entries(u))
+                h instanceof File || h instanceof Blob ? n.append(i, h) : Array.isArray(h) ? h.forEach((b) => {
+                  b instanceof File || b instanceof Blob ? n.append(i, b) : n.append(i, JSON.stringify(b));
+                }) : typeof h == "object" && h !== null ? n.append(i, JSON.stringify(h)) : n.append(i, String(h));
               E = n, d["Content-Type"] = "multipart/form-data";
-            } else s.data && s.data.parse(u);
-            s.params && c && s.params.parse(c);
-            const o = await h.request({
-              method: s.method,
-              url: s.path,
+            } else r.data && r.data.parse(u);
+            r.params && c && r.params.parse(c);
+            const o = await p.request({
+              method: r.method,
+              url: r.path,
               data: E,
               params: c,
               headers: d,
@@ -163,24 +167,24 @@ function z(r) {
                   y.value = i, a?.onUploadProgress?.(i);
                 }
               }
-            }), f = s.response ? s.response.parse(o.data) : o.data;
-            t.value = f, a?.onResult?.(f);
+            }), f = r.response ? r.response.parse(o.data) : o.data;
+            s.value = f, a?.onResult?.(f);
           } catch (u) {
-            if (u instanceof S) {
+            if (u instanceof F) {
               const c = u.response?.data?.message || u.message || "An error occurred", E = u.response?.status, d = u.code;
-              v.value = c, a?.onError?.(u), r.onErrorRequest?.({ message: c, status: E, code: d });
-            } else if (u instanceof L) {
+              R.value = c, a?.onError?.(u), t.onErrorRequest?.({ message: c, status: E, code: d });
+            } else if (u instanceof S) {
               l.value = u.issues || [];
               const E = `Validation error: ${l.value.map(
                 (d) => `${d.path.join(".")}: ${d.message}`
               ).join(", ")}`;
-              v.value = E, a?.onError?.(u), a?.onZodError?.(l.value), r.onErrorRequest?.({ message: E, code: "VALIDATION_ERROR" }), r.onZodError && r.onZodError(l.value);
+              R.value = E, a?.onError?.(u), a?.onZodError?.(l.value), t.onErrorRequest?.({ message: E, code: "VALIDATION_ERROR" }), t.onZodError && t.onZodError(l.value);
             } else {
               const c = u.message || "An error occurred";
-              v.value = c, a?.onError?.(u), r.onErrorRequest?.({ message: c });
+              R.value = c, a?.onError?.(u), t.onErrorRequest?.({ message: c });
             }
           } finally {
-            R.value = !1, g.value = !0;
+            v.value = !1, g.value = !0;
           }
         }
       } };
@@ -191,24 +195,24 @@ function z(r) {
     mutation: w
   };
 }
-function V(r) {
-  return r;
+function V(t) {
+  return t;
 }
-function J(r) {
-  return r;
+function J(t) {
+  return t;
 }
-function Q(...r) {
-  return Object.assign({}, ...r);
+function Q(...t) {
+  return Object.assign({}, ...t);
 }
-function W(...r) {
-  return Object.assign({}, ...r);
+function W(...t) {
+  return Object.assign({}, ...t);
 }
 export {
-  K as AxiosError,
+  G as AxiosError,
   z as createApiClient,
   J as defineMutation,
   V as defineQuery,
   W as mergeMutations,
   Q as mergeQueries,
-  T as z
+  $ as z
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-api-kit",
   "type": "module",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "A powerful and flexible API client for Vue 3 applications, built with TypeScript and Zod for type-safe API interactions.",
   "keywords": [
     "vue3",