vue-api-kit 1.6.0 → 1.7.0

package/README.md

@@ -251,7 +251,8 @@ const api = createApiClient({
   headers: {
     'Authorization': 'Bearer token'
   },
-  withCredentials: true,
+  withCredentials: true, // Enable cookies
+  withXSRFToken: true,   // Enable automatic XSRF token handling
 
   // CSRF Token Protection
   csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Auto-refresh CSRF token on 403/419 errors
@@ -459,9 +460,10 @@ The client includes built-in CSRF token protection, perfect for Laravel Sanctum
 ### How it works
 
 **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
+1. Set `withCredentials: true` to enable cookie-based authentication
+2. Set `withXSRFToken: true` to enable automatic XSRF token handling
+3. Axios automatically reads `XSRF-TOKEN` cookie and sends it as `X-XSRF-TOKEN` header
+4. This satisfies Laravel Sanctum's CSRF protection requirements
 
 **Automatic CSRF Refresh:**
 1. Detects CSRF errors (403 or 419 status codes)
@@ -474,9 +476,9 @@ The client includes built-in CSRF token protection, perfect for Laravel Sanctum
 ```typescript
 const api = createApiClient({
   baseURL: 'https://api.example.com',
-  withCredentials: true, // Required! Enables cookies AND auto XSRF header
+  withCredentials: true,   // Enable cookies for authentication
+  withXSRFToken: true,     // Enable automatic XSRF token handling
   csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Laravel Sanctum endpoint
-
   queries: { /* ... */ },
   mutations: { /* ... */ }
 });
@@ -491,10 +493,9 @@ import { z } from 'zod';
 
 export const api = createApiClient({
   baseURL: 'https://api.example.com',
-  withCredentials: true, // Enables cookies AND automatic XSRF-TOKEN header
-  csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Laravel's CSRF endpoint
-
-  mutations: {
+  withCredentials: true,   // Enables cookies
+  withXSRFToken: true,     // Enables automatic XSRF-TOKEN header
+  csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Laravel's CSRF endpoint  mutations: {
     login: {
       method: 'POST',
       path: '/login',
@@ -524,7 +525,8 @@ export const api = createApiClient({
 
 ### Benefits
 
-- ✅ **Automatic XSRF Header**: Cookie automatically sent as `X-XSRF-TOKEN` header
+- ✅ **Separate Options**: `withCredentials` and `withXSRFToken` can be configured independently
+- ✅ **Built-in XSRF Support**: Axios `withXSRFToken` handles token automatically
 - ✅ **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
@@ -533,7 +535,9 @@ export const api = createApiClient({
 
 ### Important Notes
 
-1. **withCredentials is required**: Set `withCredentials: true` to enable both cookies and automatic XSRF token handling
+1. **Two separate options**:
+   - `withCredentials: true` - Enables sending cookies with requests
+   - `withXSRFToken: true` - Enables automatic XSRF token header 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

package/dist/core/types.d.ts

@@ -83,6 +83,7 @@ export interface ApiClientOptions<Q extends Record<string, ApiQuery> = Record<st
     baseURL: string;
     headers?: Record<string, string>;
     withCredentials?: boolean;
+    withXSRFToken?: boolean;
     csrfRefreshEndpoint?: string;
     queries?: Q;
     mutations?: M;

package/dist/index.js

@@ -1,163 +1,161 @@
 import { ZodError as S } from "zod";
-import * as $ from "zod";
+import * as U 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,
+import { AxiosError as H } from "axios";
+import { nextTick as T, ref as m, onMounted as k, watch as x, onBeforeUnmount as N } from "vue";
+import { debounce as Z } from "lodash-es";
+function z(r) {
+  const h = L.create({
+    baseURL: r.baseURL,
     headers: {
       "Content-Type": "application/json",
       Accept: "application/json",
-      ...t.headers
+      ...r.headers
     },
-    withCredentials: t.withCredentials ?? !1
+    withCredentials: r.withCredentials ?? !1,
+    withXSRFToken: r.withXSRFToken ?? !1
   });
-  let C = !1, q = null;
-  t.onBeforeRequest && p.interceptors.request.use(
+  let b = !1, q = null;
+  r.onBeforeRequest && h.interceptors.request.use(
     async (e) => {
       try {
-        return await t.onBeforeRequest(e) || e;
-      } catch (r) {
-        return Promise.reject(r);
+        return await r.onBeforeRequest(e) || e;
+      } catch (s) {
+        return Promise.reject(s);
       }
     },
     (e) => Promise.reject(e)
-  ), t.onStartRequest && p.interceptors.request.use(
+  ), r.onStartRequest && h.interceptors.request.use(
     async (e) => {
       try {
-        return await t.onStartRequest(), e;
-      } catch (r) {
-        return Promise.reject(r);
+        return await r.onStartRequest(), e;
+      } catch (s) {
+        return Promise.reject(s);
       }
     },
     (e) => Promise.reject(e)
-  ), t.onFinishRequest && p.interceptors.response.use(
-    (e) => (t.onFinishRequest(), e),
-    (e) => (t.onFinishRequest(), Promise.reject(e))
-  ), p.interceptors.request.use((e) => {
+  ), r.onFinishRequest && h.interceptors.response.use(
+    (e) => (r.onFinishRequest(), e),
+    (e) => (r.onFinishRequest(), Promise.reject(e))
+  ), h.interceptors.request.use((e) => {
     if (!e.url) return e;
-    const r = (a) => {
+    const s = (a) => {
       if (a)
-        for (const [s, R] of Object.entries(a)) {
-          const l = `{${s}}`;
+        for (const [t, v] of Object.entries(a)) {
+          const l = `{${t}}`;
           e.url.includes(l) && (e.url = e.url.replace(
             l,
-            encodeURIComponent(String(R))
-          ), delete a[s]);
+            encodeURIComponent(String(v))
+          ), delete a[t]);
         }
     };
-    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(
+    return e.method !== "get" && e.data?.params && s(e.data.params), s(e.params), e;
+  }), r.csrfRefreshEndpoint && h.interceptors.response.use(
     (e) => e,
     async (e) => {
-      const r = e.config;
-      if (r?.url === t.csrfRefreshEndpoint)
+      const s = e.config;
+      if (s?.url === r.csrfRefreshEndpoint)
         return Promise.reject(e);
-      if (e.response && (e.response.status === 403 || e.response.status === 419) && !r?._retry) {
-        r._retry = !0;
+      if (e.response && (e.response.status === 403 || e.response.status === 419) && !s?._retry) {
+        s._retry = !0;
         try {
-          return C && q ? await q : (C = !0, q = p.get(t.csrfRefreshEndpoint).then(() => {
-            C = !1, q = null;
-          }), await q), p.request(r);
+          return b && q ? await q : (b = !0, q = h.get(r.csrfRefreshEndpoint).then(() => {
+            b = !1, q = null;
+          }), await q), h.request(s);
         } catch (a) {
-          return C = !1, q = null, Promise.reject(a);
+          return b = !1, q = null, Promise.reject(a);
         }
       }
       return Promise.reject(e);
     }
-  ), p.interceptors.response.use(
+  ), h.interceptors.response.use(
     (e) => e,
-    (e) => (N(() => {
+    (e) => (T(() => {
       e.code;
     }), Promise.reject(e))
   );
-  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);
+  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), P = 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 && s?.params && r.params.parse(s.params);
-          let o = s?.data;
-          r.data && o && r.data.parse(o);
+          s.params && t?.params && s.params.parse(t.params);
+          let o = t?.data;
+          s.data && o && s.data.parse(o);
           const f = {
-            method: r.method ?? "GET",
-            url: r.path,
-            params: s?.params,
+            method: s.method ?? "GET",
+            url: s.path,
+            params: t?.params,
             signal: j.signal
           };
-          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);
+          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);
         } catch (o) {
           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, h = o.response?.data;
-              l.value = f, s?.onError?.(o), t.onErrorRequest?.({ message: f, status: n, code: i, data: h });
+              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 });
             }
           } else if (o instanceof S) {
-            v.value = o.issues || [];
-            const n = `Validation error: ${v.value.map(
+            R.value = o.issues || [];
+            const n = `Validation error: ${R.value.map(
               (i) => `${i.path.join(".")}: ${i.message}`
             ).join(", ")}`;
-            l.value = n, s?.onError?.(o), s?.onZodError?.(v.value), t.onErrorRequest?.({ message: n, code: "VALIDATION_ERROR" }), t.onZodError && t.onZodError(v.value);
+            l.value = n, t?.onError?.(o), t?.onZodError?.(R.value), r.onErrorRequest?.({ message: n, code: "VALIDATION_ERROR" }), r.onZodError && r.onZodError(R.value);
           } else {
             const f = o.message || "An error occurred";
-            l.value = f, s?.onError?.(f), t.onErrorRequest?.({ message: f });
+            l.value = f, t?.onError?.(f), r.onErrorRequest?.({ message: f });
           }
         } finally {
           g.value = !1, y.value = !0;
         }
-      }, E = s?.debounce ? U(c, s.debounce) : c;
+      }, E = t?.debounce ? Z(c, t.debounce) : c;
       let d = null;
-      return (s?.params || s?.data) && (T(() => {
-        d && d(), d = k(
-          () => JSON.stringify({ params: s.params, data: s.data }),
+      return (t?.params || t?.data) && (k(() => {
+        d && d(), d = x(
+          () => JSON.stringify({ params: t.params, data: t.data }),
           () => {
             E();
           },
           { immediate: !1 }
         );
-      }), x(() => {
+      }), N(() => {
         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 };
+      })), (t?.loadOnMount === void 0 || t.loadOnMount) && !y.value && (P.value ? (P.value = !1, c()) : E()), { result: v, errorMessage: l, zodErrors: R, isLoading: g, isDone: y, refetch: c };
     });
   }
-  const D = t.mutations ?? {}, w = {};
-  for (const e in D) {
-    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;
+  const w = r.mutations ?? {}, D = {};
+  for (const e in w) {
+    const s = w[e];
+    s && (D[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 (j) => {
+        if (!R.value) {
+          R.value = !0, v.value = void 0, y.value = 0;
           try {
             const { data: u = {}, params: c } = j ?? {};
             let E = u ?? {}, d = {};
-            if (r.isMultipart) {
+            if (s.isMultipart) {
               const n = new FormData();
-              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));
+              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));
               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 p.request({
-              method: r.method,
-              url: r.path,
+            } 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,
               data: E,
               params: c,
               headers: d,
@@ -167,24 +165,24 @@ function z(t) {
                   y.value = i, a?.onUploadProgress?.(i);
                 }
               }
-            }), f = r.response ? r.response.parse(o.data) : o.data;
-            s.value = f, a?.onResult?.(f);
+            }), f = s.response ? s.response.parse(o.data) : o.data;
+            t.value = f, a?.onResult?.(f);
           } catch (u) {
             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 });
+              v.value = c, a?.onError?.(u), r.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(", ")}`;
-              R.value = E, a?.onError?.(u), a?.onZodError?.(l.value), t.onErrorRequest?.({ message: E, code: "VALIDATION_ERROR" }), t.onZodError && t.onZodError(l.value);
+              v.value = E, a?.onError?.(u), a?.onZodError?.(l.value), r.onErrorRequest?.({ message: E, code: "VALIDATION_ERROR" }), r.onZodError && r.onZodError(l.value);
             } else {
               const c = u.message || "An error occurred";
-              R.value = c, a?.onError?.(u), t.onErrorRequest?.({ message: c });
+              v.value = c, a?.onError?.(u), r.onErrorRequest?.({ message: c });
             }
           } finally {
-            v.value = !1, g.value = !0;
+            R.value = !1, g.value = !0;
           }
         }
       } };
@@ -192,27 +190,27 @@ function z(t) {
   }
   return {
     query: M,
-    mutation: w
+    mutation: D
   };
 }
-function V(t) {
-  return t;
+function V(r) {
+  return r;
 }
-function J(t) {
-  return t;
+function J(r) {
+  return r;
 }
-function Q(...t) {
-  return Object.assign({}, ...t);
+function Q(...r) {
+  return Object.assign({}, ...r);
 }
-function W(...t) {
-  return Object.assign({}, ...t);
+function W(...r) {
+  return Object.assign({}, ...r);
 }
 export {
-  G as AxiosError,
+  H as AxiosError,
   z as createApiClient,
   J as defineMutation,
   V as defineQuery,
   W as mergeMutations,
   Q as mergeQueries,
-  $ as z
+  U as z
 };

package/package.json

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