vue-api-kit 1.5.2 → 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,161 +1,164 @@
-import { ZodError as L } from "zod";
-import * as U from "zod";
-import x, { AxiosError as S } from "axios";
-import { AxiosError as K } from "axios";
-import { nextTick as F, ref as m, onMounted as N, watch as T, onBeforeUnmount as Z } from "vue";
-import { debounce as $ } from "lodash-es";
-function z(s) {
-  const h = x.create({
-    baseURL: s.baseURL,
+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",
-      ...s.headers
+      ...t.headers
     },
-    withCredentials: s.withCredentials ?? !1
+    withCredentials: t.withCredentials ?? !1
   });
-  let b = !1, q = null;
-  s.onBeforeRequest && h.interceptors.request.use(
+  let C = !1, q = null;
+  t.onBeforeRequest && p.interceptors.request.use(
     async (e) => {
       try {
-        return await s.onBeforeRequest(e) || e;
+        return await t.onBeforeRequest(e) || e;
       } catch (r) {
         return Promise.reject(r);
       }
     },
     (e) => Promise.reject(e)
-  ), s.onStartRequest && h.interceptors.request.use(
+  ), t.onStartRequest && p.interceptors.request.use(
     async (e) => {
       try {
-        return await s.onStartRequest(), e;
+        return await t.onStartRequest(), e;
       } catch (r) {
         return Promise.reject(r);
       }
     },
     (e) => Promise.reject(e)
-  ), s.onFinishRequest && h.interceptors.response.use(
-    (e) => (s.onFinishRequest(), e),
-    (e) => (s.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 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 && r(e.data.params), r(e.params), e;
-  }), s.csrfRefreshEndpoint && h.interceptors.response.use(
+  }), 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 r = e.config;
-      if (r?.url === s.csrfRefreshEndpoint)
+      if (r?.url === t.csrfRefreshEndpoint)
         return Promise.reject(e);
       if (e.response && (e.response.status === 403 || e.response.status === 419) && !r?._retry) {
         r._retry = !0;
         try {
-          return b && q ? await q : (b = !0, q = h.get(s.csrfRefreshEndpoint).then(() => {
-            b = !1, q = null;
-          }), await q), h.request(r);
+          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 b = !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) => (F(() => {
+    (e) => (N(() => {
       e.code;
     }), Promise.reject(e))
   );
-  const C = s.queries ?? {}, M = {};
-  for (const e in C) {
-    const r = C[e];
+  const P = t.queries ?? {}, M = {};
+  for (const e in P) {
+    const r = P[e];
     r && (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(), E = m(), g = m(!1), y = m(!1), P = m(!0);
+      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 = () => {
         j?.abort(), j = new AbortController();
       }, c = async () => {
         g.value && u(), g.value = !0, l.value = void 0;
         try {
-          r.params && t?.params && r.params.parse(t.params);
-          let o = t?.data;
+          r.params && s?.params && r.params.parse(s.params);
+          let o = s?.data;
           r.data && o && r.data.parse(o);
           const f = {
             method: r.method ?? "GET",
             url: r.path,
-            params: t?.params,
+            params: s?.params,
             signal: j.signal
           };
           r.method === "POST" && o && (f.data = o);
-          const n = await h.request(f), i = r.response ? r.response.parse(n.data) : n.data;
-          v.value = i, t?.onResult?.(i);
+          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), s.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) {
-            E.value = o.issues || [];
-            const n = `Validation error: ${E.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?.(E.value), s.onErrorRequest?.({ message: n, code: "VALIDATION_ERROR" }), s.onZodError && s.onZodError(E.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), s.onErrorRequest?.({ message: f });
+            l.value = f, s?.onError?.(f), t.onErrorRequest?.({ message: f });
           }
         } finally {
           g.value = !1, y.value = !0;
         }
-      }, R = t?.debounce ? $(c, t.debounce) : c;
+      }, E = s?.debounce ? U(c, s.debounce) : c;
       let d = null;
-      return (t?.params || t?.data) && (N(() => {
-        d && d(), d = T(
-          () => 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 }),
           () => {
-            R();
+            E();
           },
           { immediate: !1 }
         );
-      }), Z(() => {
+      }), x(() => {
         d && d(), j?.abort();
-      })), (t?.loadOnMount === void 0 || t.loadOnMount) && !y.value && (P.value ? (P.value = !1, c()) : R()), { result: v, errorMessage: l, zodErrors: E, isLoading: g, isDone: y, refetch: c };
+      })), (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 = s.mutations ?? {}, w = {};
+  const D = t.mutations ?? {}, w = {};
   for (const e in D) {
     const r = D[e];
     r && (w[e] = (a) => {
-      const t = m(), v = m(), l = m(), E = m(!1), g = m(!1), y = m(0);
-      return { result: t, errorMessage: v, zodErrors: l, isLoading: E, isDone: g, uploadProgress: y, mutate: async (j) => {
-        if (!E.value) {
-          E.value = !0, v.value = void 0, y.value = 0;
+      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 } = j ?? {};
-            let R = u ?? {}, d = {};
+            let E = u ?? {}, d = {};
             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((A) => {
-                  A instanceof File || A instanceof Blob ? n.append(i, A) : n.append(i, JSON.stringify(A));
-                }) : typeof p == "object" && p !== null ? n.append(i, JSON.stringify(p)) : n.append(i, String(p));
-              R = n, d["Content-Type"] = "multipart/form-data";
+              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 r.data && r.data.parse(u);
             r.params && c && r.params.parse(c);
-            const o = await h.request({
+            const o = await p.request({
               method: r.method,
               url: r.path,
-              data: R,
+              data: E,
               params: c,
               headers: d,
               onUploadProgress: (n) => {
@@ -165,23 +168,23 @@ function z(s) {
                 }
               }
             }), f = r.response ? r.response.parse(o.data) : o.data;
-            t.value = f, a?.onResult?.(f);
+            s.value = f, a?.onResult?.(f);
           } catch (u) {
-            if (u instanceof S) {
-              const c = u.response?.data?.message || u.message || "An error occurred", R = u.response?.status, d = u.code;
-              v.value = c, a?.onError?.(u), s.onErrorRequest?.({ message: c, status: R, code: d });
-            } else if (u instanceof L) {
+            if (u instanceof F) {
+              const c = u.response?.data?.message || u.message || "An error occurred", E = u.response?.status, d = u.code;
+              R.value = c, a?.onError?.(u), t.onErrorRequest?.({ message: c, status: E, code: d });
+            } else if (u instanceof S) {
               l.value = u.issues || [];
-              const R = `Validation error: ${l.value.map(
+              const E = `Validation error: ${l.value.map(
                 (d) => `${d.path.join(".")}: ${d.message}`
               ).join(", ")}`;
-              v.value = R, a?.onError?.(u), a?.onZodError?.(l.value), s.onErrorRequest?.({ message: R, code: "VALIDATION_ERROR" }), s.onZodError && s.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), s.onErrorRequest?.({ message: c });
+              R.value = c, a?.onError?.(u), t.onErrorRequest?.({ message: c });
             }
           } finally {
-            E.value = !1, g.value = !0;
+            v.value = !1, g.value = !0;
           }
         }
       } };
@@ -192,24 +195,24 @@ function z(s) {
     mutation: w
   };
 }
-function V(s) {
-  return s;
+function V(t) {
+  return t;
 }
-function J(s) {
-  return s;
+function J(t) {
+  return t;
 }
-function Q(...s) {
-  return Object.assign({}, ...s);
+function Q(...t) {
+  return Object.assign({}, ...t);
 }
-function W(...s) {
-  return Object.assign({}, ...s);
+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,
-  U as z
+  $ as z
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-api-kit",
   "type": "module",
-  "version": "1.5.2",
+  "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",