vue-api-kit 1.4.2 → 1.5.1

package/README.md

@@ -237,6 +237,7 @@ async function handleSubmit() {
 - ✅ **File Upload**: Support for multipart/form-data in mutations
 - ✅ **Path Parameters**: Automatic path parameter replacement
 - ✅ **Debouncing**: Built-in request debouncing
+- ✅ **CSRF Protection**: Automatic CSRF token refresh on 403/419 errors
 - ✅ **Global Error Handling**: Centralized error management
 - ✅ **Request Interceptors**: Modify requests before sending
 - ✅ **Fully Typed**: Complete type inference for params, data, and response
@@ -252,6 +253,9 @@ const api = createApiClient({
   },
   withCredentials: true,
 
+  // CSRF Token Protection
+  csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Auto-refresh CSRF token on 403/419 errors
+
   // Global handlers
   onBeforeRequest: async (config) => {
     // Modify request before sending
@@ -266,7 +270,7 @@ const api = createApiClient({
   },
 
   onFinishRequest: async () => {
-    // Called when request finishes
+    // Called when request finishes (success or error)
     console.log('Request finished');
   },
 
@@ -392,10 +396,10 @@ import { postQueries, postMutations } from './post-api';
 // Approach 1: Merge queries and mutations separately
 export const api = createApiClient({
   baseURL: 'https://api.example.com',
-  
+
   // Merge all queries from different modules
   queries: mergeQueries(userQueries, postQueries),
-  
+
   // Merge all mutations from different modules
   mutations: mergeMutations(userMutations, postMutations)
 });
@@ -448,6 +452,81 @@ async function handleUpload(file: File) {
 }
 ```
 
+## 🔒 CSRF Token Protection
+
+The client includes built-in CSRF token protection, perfect for Laravel Sanctum or similar CSRF-based authentication systems.
+
+### 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
+
+### Configuration
+
+```typescript
+const api = createApiClient({
+  baseURL: 'https://api.example.com',
+  withCredentials: true, // Required for CSRF cookies
+  csrfRefreshEndpoint: '/sanctum/csrf-cookie', // Laravel Sanctum endpoint
+
+  queries: { /* ... */ },
+  mutations: { /* ... */ }
+});
+```
+
+### Use Case: Laravel Sanctum
+
+```typescript
+// api.ts
+import { createApiClient } from 'vue-api-kit';
+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: {
+    login: {
+      method: 'POST',
+      path: '/login',
+      data: z.object({
+        email: z.string().email(),
+        password: z.string()
+      }),
+      response: z.object({
+        user: z.object({
+          id: z.number(),
+          name: z.string(),
+          email: z.string()
+        })
+      })
+    },
+    createPost: {
+      method: 'POST',
+      path: '/posts',
+      data: z.object({
+        title: z.string(),
+        content: z.string()
+      })
+    }
+  }
+});
+```
+
+### Benefits
+
+- ✅ **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
+
+
+
 ## 📝 License
 
 MIT

package/dist/core/types.d.ts

@@ -72,6 +72,8 @@ export interface ApiMutation<TData extends ZodType<any> | undefined = ZodType<an
  * const options: ApiClientOptions = {
  *   baseURL: "https://api.example.com",
  *   headers: { Authorization: "Bearer token" },
+ *   withCredentials: true,
+ *   csrfRefreshEndpoint: "/auth/refresh-csrf",
  *   queries: { getUsers: { path: "/users" } },
  *   mutations: { createUser: { method: "POST", path: "/users" } },
  *   onErrorRequest: (error) => console.error(error.message)
@@ -81,6 +83,7 @@ export interface ApiClientOptions<Q extends Record<string, ApiQuery> = Record<st
     baseURL: string;
     headers?: Record<string, string>;
     withCredentials?: boolean;
+    csrfRefreshEndpoint?: string;
     queries?: Q;
     mutations?: M;
     onBeforeRequest?: (config: InternalAxiosRequestConfig<any>) => Promise<any> | void | any;
@@ -177,7 +180,7 @@ export interface MutationResult<TResult, TData = any, TParams = any> {
     isLoading: Ref<boolean>;
     isDone: Ref<boolean>;
     uploadProgress: Ref<number>;
-    mutate: ({ data, params }: {
+    mutate: (rgs?: {
         data?: TData;
         params?: TParams;
     }) => Promise<void>;

package/dist/index.js

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

package/package.json

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