@strands.gg/accui 1.9.0 → 1.10.1

package/dist/{useStrandsAuth-BA8qEUcp.js → useStrandsAuth-Cev-PTun.js}

@@ -1,5 +1,89 @@
-import { ref, computed } from "vue";
+import { ref, computed, onUnmounted } from "vue";
 import { u as useStrandsConfig } from "./useStrandsConfig-Cxb360Os.js";
+class RequestCache {
+  cache = /* @__PURE__ */ new Map();
+  DEFAULT_TTL = 5 * 60 * 1e3;
+  // 5 minutes
+  /**
+   * Memoized fetch - prevents duplicate requests and caches results
+   */
+  async fetch(key, fetcher, ttl = this.DEFAULT_TTL) {
+    const now = Date.now();
+    const entry = this.cache.get(key);
+    if (entry && now - entry.timestamp < entry.ttl) {
+      return entry.promise;
+    }
+    this.cleanExpired();
+    const promise = fetcher().finally(() => {
+      setTimeout(() => {
+        this.cache.delete(key);
+      }, ttl);
+    });
+    this.cache.set(key, {
+      promise,
+      timestamp: now,
+      ttl
+    });
+    return promise;
+  }
+  /**
+   * Clear all cached entries
+   */
+  clear() {
+    this.cache.clear();
+  }
+  /**
+   * Remove a specific cache entry
+   */
+  invalidate(key) {
+    this.cache.delete(key);
+  }
+  /**
+   * Clean expired cache entries
+   */
+  cleanExpired() {
+    const now = Date.now();
+    for (const [key, entry] of this.cache.entries()) {
+      if (now - entry.timestamp > entry.ttl) {
+        this.cache.delete(key);
+      }
+    }
+  }
+  /**
+   * Get cache statistics (for debugging)
+   */
+  getStats() {
+    return {
+      size: this.cache.size,
+      entries: Array.from(this.cache.keys())
+    };
+  }
+}
+const requestCache = new RequestCache();
+function useRequestCache() {
+  return {
+    fetch: requestCache.fetch.bind(requestCache),
+    clear: requestCache.clear.bind(requestCache),
+    invalidate: requestCache.invalidate.bind(requestCache),
+    getStats: requestCache.getStats.bind(requestCache)
+  };
+}
+function debounce(func, wait) {
+  let timeout = null;
+  return (...args) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
+const debouncedSetItem = debounce((key, value) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(key, value);
+  }
+}, 300);
 const mapApiUserToFrontend = (apiUser) => {
   return {
     id: apiUser.id,
@@ -20,39 +104,59 @@ const mapApiUserToFrontend = (apiUser) => {
     updatedAt: apiUser.updated_at || apiUser.updatedAt || (/* @__PURE__ */ new Date()).toISOString()
   };
 };
-const { getUrl } = useStrandsConfig();
-const currentUser = ref(null);
-const currentSession = ref(null);
-const isInitializing = ref(true);
-const isSigningIn = ref(false);
-const isSigningUp = ref(false);
-const isSigningOut = ref(false);
-const isRefreshingToken = ref(false);
-const isSendingMfaEmail = ref(false);
-const isVerifyingMfa = ref(false);
-const isLoadingProfile = ref(false);
-const loading = computed(() => isSigningIn.value || isSigningUp.value || isSigningOut.value || isRefreshingToken.value || isSendingMfaEmail.value || isVerifyingMfa.value || isLoadingProfile.value);
-const isLoading = computed(() => isInitializing.value || loading.value);
-const loadingMessage = computed(() => {
-  if (isInitializing.value) return "Checking authentication...";
-  if (isSigningIn.value) return "Signing you in...";
-  if (isSigningUp.value) return "Creating your account...";
-  if (isSigningOut.value) return "Signing you out...";
-  if (isRefreshingToken.value) return "Refreshing session...";
-  if (isSendingMfaEmail.value) return "Sending verification code...";
-  if (isVerifyingMfa.value) return "Verifying code...";
-  return "Loading...";
-});
-const isInitialized = ref(false);
-const mfaRequired = ref(false);
-const mfaSessionId = ref(null);
-const availableMfaMethods = ref([]);
+const globalState = {
+  currentUser: ref(null),
+  currentSession: ref(null),
+  loadingStates: ref({
+    initializing: true,
+    signingIn: false,
+    signingUp: false,
+    signingOut: false,
+    refreshingToken: false,
+    sendingMfaEmail: false,
+    verifyingMfa: false,
+    loadingProfile: false
+  }),
+  isInitialized: ref(false),
+  mfaRequired: ref(false),
+  mfaSessionId: ref(null),
+  availableMfaMethods: ref([])
+};
 let refreshTimer = null;
+let refreshPromise = null;
 function useStrandsAuth() {
+  const { getUrl } = useStrandsConfig();
+  const { fetch: cachedFetch, clear: clearCache, invalidate } = useRequestCache();
+  const { currentUser, currentSession, loadingStates, isInitialized, mfaRequired, mfaSessionId, availableMfaMethods } = globalState;
+  const isInitializing = computed(() => loadingStates.value.initializing);
+  const isSigningIn = computed(() => loadingStates.value.signingIn);
+  const isSigningUp = computed(() => loadingStates.value.signingUp);
+  const isSigningOut = computed(() => loadingStates.value.signingOut);
+  const isRefreshingToken = computed(() => loadingStates.value.refreshingToken);
+  const isSendingMfaEmail = computed(() => loadingStates.value.sendingMfaEmail);
+  const isVerifyingMfa = computed(() => loadingStates.value.verifyingMfa);
+  computed(() => loadingStates.value.loadingProfile);
+  const loading = computed(
+    () => loadingStates.value.signingIn || loadingStates.value.signingUp || loadingStates.value.signingOut || loadingStates.value.refreshingToken || loadingStates.value.sendingMfaEmail || loadingStates.value.verifyingMfa || loadingStates.value.loadingProfile
+  );
+  const isLoading = computed(() => loadingStates.value.initializing || loading.value);
+  const loadingMessage = computed(() => {
+    const states = loadingStates.value;
+    if (states.initializing) return "Checking authentication...";
+    if (states.signingIn) return "Signing you in...";
+    if (states.signingUp) return "Creating your account...";
+    if (states.signingOut) return "Signing you out...";
+    if (states.refreshingToken) return "Refreshing session...";
+    if (states.sendingMfaEmail) return "Sending verification code...";
+    if (states.verifyingMfa) return "Verifying code...";
+    if (states.loadingProfile) return "Loading profile...";
+    return "Loading...";
+  });
   const getAuthHeaders = () => {
     if (!currentSession.value?.accessToken) {
       throw new Error("No access token available");
     }
+    currentSession.value.expiresAt;
     const headers = {
       "Authorization": `Bearer ${currentSession.value.accessToken}`
     };
@@ -119,16 +223,20 @@ function useStrandsAuth() {
   };
   const isAuthenticated = computed(() => currentUser.value !== null);
   const signIn = async (credentials) => {
-    isSigningIn.value = true;
+    loadingStates.value.signingIn = true;
     try {
       mfaRequired.value = false;
       mfaSessionId.value = null;
       availableMfaMethods.value = [];
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (typeof window !== "undefined" && window.location) {
+        headers["Origin"] = window.location.origin;
+      }
       const response = await fetch(getUrl("signIn"), {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
+        headers,
         body: JSON.stringify(credentials)
       });
       if (!response.ok) {
@@ -166,7 +274,7 @@ function useStrandsAuth() {
           };
         });
         availableMfaMethods.value = methods;
-        isSigningIn.value = false;
+        loadingStates.value.signingIn = false;
         return authData;
       }
       await setAuthData(authData);
@@ -174,21 +282,23 @@ function useStrandsAuth() {
     } catch (error) {
       throw error;
     } finally {
-      isSigningIn.value = false;
+      loadingStates.value.signingIn = false;
     }
   };
   const signUp = async (userData) => {
-    isSigningUp.value = true;
+    loadingStates.value.signingUp = true;
     try {
       throw new Error("Sign up not implemented - please integrate with auth SDK");
     } finally {
-      isSigningUp.value = false;
+      loadingStates.value.signingUp = false;
     }
   };
   const signOut = async () => {
-    isSigningOut.value = true;
+    loadingStates.value.signingOut = true;
     try {
       stopTokenRefreshTimer();
+      refreshPromise = null;
+      clearCache();
       currentUser.value = null;
       currentSession.value = null;
       mfaRequired.value = false;
@@ -199,91 +309,106 @@ function useStrandsAuth() {
         localStorage.removeItem("strands_auth_user");
       }
     } finally {
-      isSigningOut.value = false;
+      loadingStates.value.signingOut = false;
     }
   };
   const refreshToken = async () => {
     if (!currentSession.value?.refreshToken) {
       return false;
     }
-    isRefreshingToken.value = true;
-    try {
-      const response = await fetch(getUrl("refresh"), {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          refresh_token: currentSession.value.refreshToken
-        })
-      });
-      if (!response.ok) {
-        if (response.status === 401) {
-          await signOut();
-          return false;
+    if (refreshPromise) {
+      console.log("Token refresh already in progress, waiting for completion...");
+      return await refreshPromise;
+    }
+    refreshPromise = (async () => {
+      loadingStates.value.refreshingToken = true;
+      try {
+        const response = await fetch(getUrl("refresh"), {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            refresh_token: currentSession.value.refreshToken
+          })
+        });
+        if (!response.ok) {
+          if (response.status === 401) {
+            await signOut();
+            return false;
+          }
+          throw new Error(`Token refresh failed: ${response.status} ${response.statusText}`);
         }
-        throw new Error(`Token refresh failed: ${response.status} ${response.statusText}`);
-      }
-      const tokenData = await response.json();
-      if (tokenData.user) {
-        currentUser.value = mapApiUserToFrontend(tokenData.user);
+        const tokenData = await response.json();
+        if (tokenData.user) {
+          currentUser.value = mapApiUserToFrontend(tokenData.user);
+          if (currentUser.value && typeof window !== "undefined") {
+            localStorage.setItem("strands_auth_user", JSON.stringify(currentUser.value));
+          }
+        }
+        const newSession = {
+          accessToken: tokenData.access_token,
+          refreshToken: tokenData.refresh_token,
+          expiresAt: new Date(Date.now() + 5 * 60 * 1e3),
+          // 5 minutes from now
+          userId: tokenData.user?.id || currentUser.value?.id
+        };
+        currentSession.value = newSession;
         if (typeof window !== "undefined") {
-          localStorage.setItem("strands_auth_user", JSON.stringify(currentUser.value));
+          localStorage.setItem("strands_auth_session", JSON.stringify(newSession));
         }
+        startTokenRefreshTimer();
+        invalidate(`sessions:${currentSession.value.accessToken.slice(0, 20)}`);
+        return true;
+      } catch (error) {
+        await signOut();
+        return false;
+      } finally {
+        loadingStates.value.refreshingToken = false;
       }
-      const newSession = {
-        accessToken: tokenData.access_token,
-        refreshToken: tokenData.refresh_token,
-        expiresAt: new Date(Date.now() + 5 * 60 * 1e3),
-        // 5 minutes from now
-        userId: tokenData.user?.id || currentUser.value?.id
-      };
-      currentSession.value = newSession;
-      if (typeof window !== "undefined") {
-        localStorage.setItem("strands_auth_session", JSON.stringify(newSession));
-      }
-      startTokenRefreshTimer();
-      return true;
-    } catch (error) {
-      await signOut();
-      return false;
-    }
+    })();
+    const result = await refreshPromise;
+    refreshPromise = null;
+    return result;
   };
   const fetchProfile = async () => {
     if (!currentSession.value?.accessToken) {
       throw new Error("No access token available");
     }
-    isLoadingProfile.value = true;
+    const cacheKey = `profile:${currentSession.value.accessToken.slice(0, 20)}`;
+    loadingStates.value.loadingProfile = true;
     try {
-      const response = await fetch(getUrl("profile"), {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${currentSession.value.accessToken}`
+      return await cachedFetch(cacheKey, async () => {
+        const response = await fetch(getUrl("profile"), {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${currentSession.value?.accessToken}`
+          }
+        });
+        if (!response.ok) {
+          if (response.status === 401) {
+            throw new Error("Authentication expired. Please sign in again.");
+          } else {
+            throw new Error(`Failed to fetch profile: ${response.status} ${response.statusText}`);
+          }
         }
-      });
-      if (!response.ok) {
-        if (response.status === 401) {
-          throw new Error("Authentication expired. Please sign in again.");
-        } else {
-          throw new Error(`Failed to fetch profile: ${response.status} ${response.statusText}`);
+        const userData = await response.json();
+        currentUser.value = mapApiUserToFrontend(userData);
+        if (currentUser.value && typeof window !== "undefined") {
+          localStorage.setItem("strands_auth_user", JSON.stringify(currentUser.value));
         }
-      }
-      const userData = await response.json();
-      currentUser.value = mapApiUserToFrontend(userData);
-      if (typeof window !== "undefined") {
-        localStorage.setItem("strands_auth_user", JSON.stringify(currentUser.value));
-      }
-      return currentUser.value;
+        return currentUser.value;
+      });
     } finally {
-      isLoadingProfile.value = false;
+      loadingStates.value.loadingProfile = false;
     }
   };
   const updateProfile = async (profileData) => {
     if (!currentSession.value?.accessToken) {
       throw new Error("No access token available");
     }
-    isLoadingProfile.value = true;
+    loadingStates.value.loadingProfile = true;
     try {
       const response = await fetch(getUrl("profile"), {
         method: "POST",
@@ -305,19 +430,19 @@ function useStrandsAuth() {
       }
       const updatedUserData = await response.json();
       currentUser.value = mapApiUserToFrontend(updatedUserData);
-      if (typeof window !== "undefined") {
-        localStorage.setItem("strands_auth_user", JSON.stringify(currentUser.value));
+      if (currentUser.value) {
+        debouncedSetItem("strands_auth_user", JSON.stringify(currentUser.value));
       }
       return currentUser.value;
     } finally {
-      isLoadingProfile.value = false;
+      loadingStates.value.loadingProfile = false;
     }
   };
   const updateUserSettings = async (settings) => {
     if (!currentSession.value?.accessToken) {
       throw new Error("No access token available");
     }
-    isLoadingProfile.value = true;
+    loadingStates.value.loadingProfile = true;
     try {
       const response = await fetch(getUrl("settings"), {
         method: "POST",
@@ -338,19 +463,19 @@ function useStrandsAuth() {
       }
       const updatedUserData = await response.json();
       currentUser.value = mapApiUserToFrontend(updatedUserData);
-      if (typeof window !== "undefined") {
-        localStorage.setItem("strands_auth_user", JSON.stringify(currentUser.value));
+      if (currentUser.value) {
+        debouncedSetItem("strands_auth_user", JSON.stringify(currentUser.value));
       }
       return currentUser.value;
     } finally {
-      isLoadingProfile.value = false;
+      loadingStates.value.loadingProfile = false;
     }
   };
   const changeEmail = async (newEmail, password) => {
     if (!currentSession.value?.accessToken) {
       throw new Error("No access token available");
     }
-    isLoadingProfile.value = true;
+    loadingStates.value.loadingProfile = true;
     try {
       const response = await fetch(getUrl("changeEmail"), {
         method: "POST",
@@ -386,14 +511,14 @@ function useStrandsAuth() {
       }
       return result;
     } finally {
-      isLoadingProfile.value = false;
+      loadingStates.value.loadingProfile = false;
     }
   };
   const verifyMfa = async (deviceId, code, isBackupCode = false) => {
     if (!mfaSessionId.value) {
       throw new Error("No MFA session available");
     }
-    isVerifyingMfa.value = true;
+    loadingStates.value.verifyingMfa = true;
     try {
       const endpoint = isBackupCode ? getUrl("mfaBackupCodeVerify") : getUrl("mfaSigninVerify");
       const body = isBackupCode ? { mfa_session_id: mfaSessionId.value, backup_code: code } : { mfa_session_id: mfaSessionId.value, device_id: deviceId, code };
@@ -420,14 +545,14 @@ function useStrandsAuth() {
       await setAuthData(authData);
       return authData;
     } finally {
-      isVerifyingMfa.value = false;
+      loadingStates.value.verifyingMfa = false;
     }
   };
   const sendMfaEmailCode = async (deviceId) => {
     if (!mfaSessionId.value) {
       throw new Error("No MFA session available");
     }
-    isSendingMfaEmail.value = true;
+    loadingStates.value.sendingMfaEmail = true;
     try {
       const response = await fetch(getUrl("mfaSigninSendEmail"), {
         method: "POST",
@@ -451,7 +576,7 @@ function useStrandsAuth() {
       const result = await response.json();
       return result;
     } finally {
-      isSendingMfaEmail.value = false;
+      loadingStates.value.sendingMfaEmail = false;
     }
   };
   const getMfaWebAuthnChallenge = async (deviceId) => {
@@ -500,7 +625,6 @@ function useStrandsAuth() {
       }
       startTokenRefreshTimer();
     } catch (error) {
-      console.error("Error setting auth data:", error);
     }
   };
   const startTokenRefreshTimer = () => {
@@ -508,6 +632,9 @@ function useStrandsAuth() {
       clearTimeout(refreshTimer);
     }
     if (!currentSession.value) return;
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+      return;
+    }
     const now = /* @__PURE__ */ new Date();
     const expiresAt = currentSession.value.expiresAt;
     const timeUntilRefresh = expiresAt.getTime() - now.getTime() - 1 * 60 * 1e3;
@@ -516,9 +643,11 @@ function useStrandsAuth() {
       return;
     }
     refreshTimer = setTimeout(async () => {
-      const success = await refreshToken();
-      if (success) {
-        startTokenRefreshTimer();
+      if (typeof document === "undefined" || document.visibilityState === "visible") {
+        const success = await refreshToken();
+        if (success) {
+          startTokenRefreshTimer();
+        }
       }
     }, timeUntilRefresh);
   };
@@ -530,7 +659,7 @@ function useStrandsAuth() {
   };
   const initialize = async () => {
     if (isInitialized.value) return;
-    isInitializing.value = true;
+    loadingStates.value.initializing = true;
     try {
       if (typeof window !== "undefined") {
         const storedSession = localStorage.getItem("strands_auth_session");
@@ -558,14 +687,14 @@ function useStrandsAuth() {
       await new Promise((resolve) => setTimeout(resolve, 50));
     } catch (error) {
     } finally {
-      isInitializing.value = false;
+      loadingStates.value.initializing = false;
     }
   };
   const changeUsername = async (newUsername) => {
     if (!currentSession.value?.accessToken) {
       throw new Error("No access token available");
     }
-    isLoadingProfile.value = true;
+    loadingStates.value.loadingProfile = true;
     try {
       const response = await fetch(getUrl("changeUsername"), {
         method: "POST",
@@ -600,7 +729,7 @@ function useStrandsAuth() {
       }
       return result;
     } finally {
-      isLoadingProfile.value = false;
+      loadingStates.value.loadingProfile = false;
     }
   };
   const getUsernameCooldown = async () => {
@@ -632,14 +761,26 @@ function useStrandsAuth() {
     return response.json();
   };
   const getUserSessions = async () => {
-    const response = await fetch(getUrl("sessions"), {
-      method: "GET",
-      headers: getAuthHeaders()
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to get user sessions: ${response.status} ${response.statusText}`);
+    if (!currentSession.value?.accessToken) {
+      throw new Error("No access token available");
+    }
+    const cacheKey = `sessions:${currentSession.value.accessToken.slice(0, 20)}`;
+    try {
+      return await cachedFetch(cacheKey, async () => {
+        const headers = getAuthHeaders();
+        const response = await fetch(getUrl("sessions"), {
+          method: "GET",
+          headers
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`Failed to get user sessions: ${response.status} ${response.statusText}`);
+        }
+        return response.json();
+      }, 2 * 60 * 1e3);
+    } catch (error) {
+      throw error;
     }
-    return response.json();
   };
   const getSessionStats = async () => {
     const response = await fetch(getUrl("sessionsStats"), {
@@ -672,6 +813,27 @@ function useStrandsAuth() {
     }
     return response.status === 200;
   };
+  if (typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible" && currentSession.value) {
+        startTokenRefreshTimer();
+      } else if (document.visibilityState === "hidden") {
+        stopTokenRefreshTimer();
+      }
+    });
+  }
+  const cleanup = () => {
+    stopTokenRefreshTimer();
+    clearCache();
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", () => {
+      });
+    }
+  };
+  try {
+    onUnmounted(cleanup);
+  } catch (e) {
+  }
   if (!isInitialized.value) {
     initialize();
   }
@@ -723,10 +885,11 @@ function useStrandsAuth() {
     // Token management
     startTokenRefreshTimer,
     stopTokenRefreshTimer,
+    getAuthHeaders,
     // Force re-initialization (useful for testing or navigation)
     forceReInit: () => {
       isInitialized.value = false;
-      isInitializing.value = true;
+      loadingStates.value.initializing = true;
       initialize();
     }
   };
@@ -734,4 +897,3 @@ function useStrandsAuth() {
 export {
   useStrandsAuth as u
 };
-//# sourceMappingURL=useStrandsAuth-BA8qEUcp.js.map