vue-api-kit 1.5.2 → 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
@@ -458,20 +459,26 @@ 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. 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)
+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,   // Enable cookies for authentication
+  withXSRFToken: true,     // Enable automatic XSRF token handling
   csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Laravel Sanctum endpoint
-
   queries: { /* ... */ },
   mutations: { /* ... */ }
 });
@@ -486,10 +493,9 @@ import { z } from 'zod';
 
 export const api = createApiClient({
   baseURL: 'https://api.example.com',
-  withCredentials: true, // Send cookies with requests
-  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',
@@ -519,12 +525,27 @@ export const api = createApiClient({
 
 ### Benefits
 
+- ✅ **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
 - ✅ **Infinite Loop Prevention**: Won't retry the CSRF endpoint itself
 - ✅ **Laravel Sanctum Compatible**: Works perfectly with Laravel's SPA authentication
 
+### Important Notes
+
+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
+   // config/cors.php
+   'supports_credentials' => true,
+   'allowed_origins' => ['http://localhost:5173'],
+   ```
+
 
 
 ## 📝 License

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,44 +1,45 @@
-import { ZodError as L } from "zod";
+import { ZodError as S } 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 L, { AxiosError as F } from "axios";
+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",
-      ...s.headers
+      ...r.headers
     },
-    withCredentials: s.withCredentials ?? !1
+    withCredentials: r.withCredentials ?? !1,
+    withXSRFToken: r.withXSRFToken ?? !1
   });
   let b = !1, q = null;
-  s.onBeforeRequest && h.interceptors.request.use(
+  r.onBeforeRequest && h.interceptors.request.use(
     async (e) => {
       try {
-        return await s.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)
-  ), s.onStartRequest && h.interceptors.request.use(
+  ), r.onStartRequest && h.interceptors.request.use(
     async (e) => {
       try {
-        return await s.onStartRequest(), e;
-      } catch (r) {
-        return Promise.reject(r);
+        return await r.onStartRequest(), e;
+      } catch (s) {
+        return Promise.reject(s);
       }
     },
     (e) => Promise.reject(e)
-  ), s.onFinishRequest && h.interceptors.response.use(
-    (e) => (s.onFinishRequest(), e),
-    (e) => (s.onFinishRequest(), Promise.reject(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 [t, v] of Object.entries(a)) {
           const l = `{${t}}`;
@@ -48,19 +49,19 @@ function z(s) {
           ), delete a[t]);
         }
     };
-    return e.method !== "get" && e.data?.params && r(e.data.params), r(e.params), e;
-  }), s.csrfRefreshEndpoint && h.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 === s.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 b && q ? await q : (b = !0, q = h.get(s.csrfRefreshEndpoint).then(() => {
+          return b && q ? await q : (b = !0, q = h.get(r.csrfRefreshEndpoint).then(() => {
             b = !1, q = null;
-          }), await q), h.request(r);
+          }), await q), h.request(s);
         } catch (a) {
           return b = !1, q = null, Promise.reject(a);
         }
@@ -69,93 +70,93 @@ function z(s) {
     }
   ), h.interceptors.response.use(
     (e) => e,
-    (e) => (F(() => {
+    (e) => (T(() => {
       e.code;
     }), Promise.reject(e))
   );
-  const C = s.queries ?? {}, M = {};
+  const C = r.queries ?? {}, M = {};
   for (const e in C) {
-    const r = C[e];
-    r && (M[e] = (a) => {
+    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(), E = m(), g = m(!1), y = m(!1), P = m(!0);
+      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 && t?.params && r.params.parse(t.params);
+          s.params && t?.params && s.params.parse(t.params);
           let o = t?.data;
-          r.data && o && r.data.parse(o);
+          s.data && o && s.data.parse(o);
           const f = {
-            method: r.method ?? "GET",
-            url: r.path,
+            method: s.method ?? "GET",
+            url: s.path,
             params: t?.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;
+          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 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 });
+              l.value = f, t?.onError?.(o), r.onErrorRequest?.({ message: f, status: n, code: i, data: p });
             }
-          } else if (o instanceof L) {
-            E.value = o.issues || [];
-            const n = `Validation error: ${E.value.map(
+          } else if (o instanceof S) {
+            R.value = o.issues || [];
+            const n = `Validation error: ${R.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, 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, t?.onError?.(f), s.onErrorRequest?.({ message: f });
+            l.value = f, t?.onError?.(f), r.onErrorRequest?.({ message: f });
           }
         } finally {
           g.value = !1, y.value = !0;
         }
-      }, R = t?.debounce ? $(c, t.debounce) : c;
+      }, E = t?.debounce ? Z(c, t.debounce) : c;
       let d = null;
-      return (t?.params || t?.data) && (N(() => {
-        d && d(), d = T(
+      return (t?.params || t?.data) && (k(() => {
+        d && d(), d = x(
           () => JSON.stringify({ params: t.params, data: t.data }),
           () => {
-            R();
+            E();
           },
           { immediate: !1 }
         );
-      }), Z(() => {
+      }), N(() => {
         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 };
+      })), (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 = s.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 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 R = u ?? {}, d = {};
-            if (r.isMultipart) {
+            let E = u ?? {}, d = {};
+            if (s.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";
-            } else r.data && r.data.parse(u);
-            r.params && c && r.params.parse(c);
+              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: r.method,
-              url: r.path,
-              data: R,
+              method: s.method,
+              url: s.path,
+              data: E,
               params: c,
               headers: d,
               onUploadProgress: (n) => {
@@ -164,24 +165,24 @@ function z(s) {
                   y.value = i, a?.onUploadProgress?.(i);
                 }
               }
-            }), f = r.response ? r.response.parse(o.data) : o.data;
+            }), f = s.response ? s.response.parse(o.data) : o.data;
             t.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;
+              v.value = c, a?.onError?.(u), r.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);
+              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";
-              v.value = c, a?.onError?.(u), s.onErrorRequest?.({ message: c });
+              v.value = c, a?.onError?.(u), r.onErrorRequest?.({ message: c });
             }
           } finally {
-            E.value = !1, g.value = !0;
+            R.value = !1, g.value = !0;
           }
         }
       } };
@@ -189,23 +190,23 @@ function z(s) {
   }
   return {
     query: M,
-    mutation: w
+    mutation: D
   };
 }
-function V(s) {
-  return s;
+function V(r) {
+  return r;
 }
-function J(s) {
-  return s;
+function J(r) {
+  return r;
 }
-function Q(...s) {
-  return Object.assign({}, ...s);
+function Q(...r) {
+  return Object.assign({}, ...r);
 }
-function W(...s) {
-  return Object.assign({}, ...s);
+function W(...r) {
+  return Object.assign({}, ...r);
 }
 export {
-  K as AxiosError,
+  H as AxiosError,
   z as createApiClient,
   J as defineMutation,
   V as defineQuery,

package/package.json

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