@kawaiininja/fetch 1.0.1 → 1.0.4

package/dist/hooks/useCsrf.d.ts

@@ -1,4 +1,4 @@
 export declare function useCsrf(): {
     fetchCSRF: () => Promise<string>;
-    clearCsrf: () => void;
+    clearCsrf: () => Promise<void>;
 };

package/dist/hooks/useCsrf.js

@@ -1,27 +1,59 @@
+import { SecureStoragePlugin } from "capacitor-secure-storage-plugin";
 import { useCallback, useRef } from "react";
 import { INTERNAL_HEADER } from "../context/ApiContext";
 import { useApiConfig } from "./useApiConfig";
 export function useCsrf() {
     const { apiUrl } = useApiConfig();
     const csrfRef = useRef(null);
-    const clearCsrf = useCallback(() => {
+    const clearCsrf = useCallback(async () => {
+        console.log("[useCsrf] Clearing CSRF token...");
         csrfRef.current = null;
         if (typeof window !== "undefined") {
+            const platform = window.Capacitor?.getPlatform() || "web";
+            const isNative = platform === "ios" || platform === "android";
+            if (isNative) {
+                try {
+                    await SecureStoragePlugin.remove({ key: "csrf_token" });
+                    console.log("[useCsrf] Cleared from SecureStorage.");
+                }
+                catch (e) {
+                    console.warn("[useCsrf] Failed to clear from SecureStorage, trying localStorage:", e);
+                }
+            }
             localStorage.removeItem("csrf_token");
         }
     }, []);
     const fetchCSRF = useCallback(async () => {
         if (csrfRef.current)
             return csrfRef.current;
-        // Try to get from localStorage first (for Capacitor/mobile)
+        // Try to get from storage first (for Capacitor/mobile)
         if (typeof window !== "undefined") {
+            const platform = window.Capacitor?.getPlatform() || "web";
+            const isNative = platform === "ios" || platform === "android";
+            if (isNative) {
+                try {
+                    const { value } = await SecureStoragePlugin.get({
+                        key: "csrf_token",
+                    });
+                    if (value) {
+                        console.log("[useCsrf] Retrieved from SecureStorage.");
+                        csrfRef.current = value;
+                        return value;
+                    }
+                }
+                catch (e) {
+                    console.warn("[useCsrf] SecureStorage check failed:", e);
+                }
+            }
             const storedCsrf = localStorage.getItem("csrf_token");
             if (storedCsrf) {
+                console.log("[useCsrf] Retrieved from localStorage.");
                 csrfRef.current = storedCsrf;
                 return storedCsrf;
             }
         }
         // Construct CSRF URL using the context's baseUrl
+        console.log("[useCsrf] Fetching new CSRF token from server...");
         const csrfUrl = apiUrl("auth/csrf-token");
         const res = await fetch(csrfUrl, {
             method: "GET",
@@ -33,8 +65,19 @@ export function useCsrf() {
         if (!token)
             throw new Error("Missing CSRF token");
         csrfRef.current = token;
-        // Store in localStorage for Capacitor/mobile (cookies don't work cross-domain)
+        // Store in storage
         if (typeof window !== "undefined") {
+            const platform = window.Capacitor?.getPlatform() || "web";
+            const isNative = platform === "ios" || platform === "android";
+            if (isNative) {
+                try {
+                    await SecureStoragePlugin.set({ key: "csrf_token", value: token });
+                    console.log("[useCsrf] Stored in SecureStorage.");
+                }
+                catch (e) {
+                    console.warn("[useCsrf] SecureStorage set failed, falling back to localStorage:", e);
+                }
+            }
             localStorage.setItem("csrf_token", token);
         }
         return token;

package/dist/hooks/useFetch.js

@@ -1,3 +1,4 @@
+import { SecureStoragePlugin } from "capacitor-secure-storage-plugin";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { INTERNAL_HEADER } from "../context/ApiContext";
 import { useApiConfig } from "./useApiConfig";
@@ -31,21 +32,70 @@ export const useFetch = (endpoint, baseOptions = {}) => {
         }
     }, []);
     const performFetch = async (url, method, token, body, headers, rest) => {
-        const authToken = typeof window !== "undefined" ? localStorage.getItem("token") : null;
-        const sessionId = typeof window !== "undefined" ? localStorage.getItem("session_id") : null;
+        // 🌍 PLATFORM DETECTION
+        // We check if we are running natively (iOS/Android) or on the Web
+        const platform = typeof window !== "undefined"
+            ? window.Capacitor?.getPlatform() || "web"
+            : "web";
+        const isNative = platform === "ios" || platform === "android";
+        // 🎯 TARGET CHECK (Prevent Credential Leakage)
+        // Only attach sensitive headers if sending to our own API
+        const isInternal = url.startsWith("/") ||
+            (apiUrl("") && url.startsWith(apiUrl(""))) ||
+            false;
         const headersConfig = {
             ...(optionsRef.current.headers || {}),
             ...(headers || {}),
             ...INTERNAL_HEADER,
-            "X-CSRF-Token": token,
-            ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
-            ...(sessionId ? { "X-Session-ID": sessionId } : {}),
         };
+        // 🔒 SECURITY STRATEGY: NATIVE (MOBILE)
+        if (isNative && isInternal) {
+            // Mobile relies on manual headers ("Active Courier")
+            // 🛡️ S-RANK UPGRADE: Use Secure Storage (Async) instead of LocalStorage
+            console.log(`[useFetch] [Native] Strategy: Active Courier for ${url}`);
+            let authToken = null;
+            let sessionId = null;
+            try {
+                const { value: secureAuthToken } = await SecureStoragePlugin.get({
+                    key: "token",
+                });
+                const { value: secureSessionId } = await SecureStoragePlugin.get({
+                    key: "session_id",
+                });
+                authToken = secureAuthToken;
+                sessionId = secureSessionId;
+                if (authToken)
+                    console.log("[useFetch] [Native] Token retrieved from SecureStorage.");
+            }
+            catch (err) {
+                console.warn("[useFetch] [Native] SecureStorage failed or not present, trying localStorage:", err);
+                authToken = localStorage.getItem("token");
+                sessionId = localStorage.getItem("session_id");
+                if (authToken)
+                    console.log("[useFetch] [Native] Token retrieved from localStorage fallback.");
+            }
+            if (authToken)
+                headersConfig["Authorization"] = `Bearer ${authToken}`;
+            if (sessionId)
+                headersConfig["X-Session-ID"] = sessionId;
+        }
+        // 🔒 SECURITY STRATEGY: WEB (BROWSER)
+        if (!isNative && isInternal) {
+            // Web relies on Cookies ("Passive Courier") for Auth
+            // BUT we MUST attach the CSRF Token to prevent attacks
+            if (token) {
+                headersConfig["X-CSRF-Token"] = token;
+                // console.log("[useFetch] [Web] CSRF token attached.");
+            }
+            // On Web, we DO NOT attach 'Authorization' or 'Session-ID' from localStorage
+            // This minimizes XSS risk. The HttpOnly cookie handles it.
+        }
         return fetch(url, {
             ...optionsRef.current,
             ...rest,
             method,
             signal: abortRef.current.signal,
+            // 🍪 Web: "include" sends cookies. Mobile: ignored/useless but harmless.
             credentials: "include",
             headers: headersConfig,
             body,

package/package.json

@@ -1,40 +1,46 @@
-{
-    "name": "@kawaiininja/fetch",
-    "version": "1.0.1",
-    "description": "Core fetch utility for Onyx Framework",
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "module": "dist/index.js",
-    "type": "module",
-    "exports": {
-        ".": "./dist/index.js"
-    },
-    "files": [
-        "dist",
-        "README.md"
-    ],
-    "scripts": {
-        "build": "tsc"
-    },
-    "keywords": [
-        "react",
-        "fetch",
-        "onyx",
-        "kawaiininja",
-        "http"
-    ],
-    "author": "Vinay (4kawaiininja)",
-    "license": "MIT",
-    "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "devDependencies": {
-        "@types/react": "^19.2.7",
-        "@types/react-dom": "^19.2.3",
-        "typescript": "^5.7.0"
-    }
-}
+{
+    "name": "@kawaiininja/fetch",
+    "version": "1.0.4",
+    "description": "Core fetch utility for Onyx Framework",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "module": "dist/index.js",
+    "type": "module",
+    "exports": {
+        ".": "./dist/index.js"
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc"
+    },
+    "keywords": [
+        "react",
+        "fetch",
+        "onyx",
+        "kawaiininja",
+        "http"
+    ],
+    "author": "Vinay (4kawaiininja)",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "typescript": "^5.7.0"
+    },
+    "dependencies": {
+        "@capacitor-community/security-provider": "^7.0.0",
+        "@capacitor-community/text-to-speech": "^6.1.0",
+        "@capacitor/core": "^8.0.1",
+        "capacitor-secure-storage-plugin": "^0.13.0"
+    }
+}