@erikey/react 0.3.3 → 0.3.5

package/dist/index.d.mts

@@ -2190,8 +2190,10 @@ type DashboardClient = ReturnType<typeof createDashboardClient>;
  * - Bearer token auth for cross-origin iframes (Sandpack)
  * - localStorage token storage when cookies are blocked
  *
- * This replaces 300+ lines of custom fetch code with better-auth client,
- * enabling signIn.social(), useSession(), and all better-auth features.
+ * Architecture:
+ * - Uses better-auth's native reactivity (nanostores + useSyncExternalStore)
+ * - Hooks into fetchOptions.onSuccess to store tokens for cross-origin
+ * - No Proxy wrapper - uses better-auth's useSession directly
  */
 interface AuthClientConfig {
     /**
@@ -2208,9 +2210,9 @@ interface AuthClientConfig {
 /**
  * Create an auth client for end-user authentication
  *
- * Wraps better-auth/react with Erikey-specific enhancements.
- * Automatically detects cross-origin iframes (Sandpack) and uses
- * Bearer tokens instead of cookies.
+ * Uses better-auth/react with Erikey-specific configuration.
+ * Automatically detects cross-origin contexts (Sandpack, deployed sites)
+ * and uses Bearer tokens instead of cookies.
  *
  * @example Basic usage
  * ```tsx
@@ -2227,7 +2229,7 @@ interface AuthClientConfig {
  * // Social OAuth
  * await auth.signIn.social({ provider: 'google' });
  *
- * // Reactive session hook (React)
+ * // Reactive session hook (React) - uses better-auth's nanostores
  * const { data: session, isPending } = auth.useSession();
  *
  * // Sign out

package/dist/index.mjs

@@ -1611,9 +1611,6 @@ function createDashboardClient(config) {
   });
 }
 
-// src/auth-client.ts
-import { useState, useEffect, useCallback as useCallback2 } from "react";
-
 // src/lib/cross-origin-auth.ts
 function shouldUseBearerAuth(authApiUrl) {
   if (typeof window === "undefined") {
@@ -1662,10 +1659,6 @@ function clearToken(projectId) {
 function createAuthClient2(config) {
   const { projectId, baseUrl = "https://auth.erikey.com" } = config;
   const useBearerAuth = shouldUseBearerAuth(baseUrl);
-  const sessionListeners = /* @__PURE__ */ new Set();
-  const notifySessionChange = () => {
-    sessionListeners.forEach((listener) => listener());
-  };
   const fetchOptions = {
     // Always send project ID header for multi-tenant routing
     headers: {
@@ -1677,131 +1670,40 @@ function createAuthClient2(config) {
         type: "Bearer",
         token: () => getStoredToken(projectId) || ""
       }
+    },
+    // Hook into successful responses to handle token storage
+    onSuccess: async (context) => {
+      if (!useBearerAuth) return;
+      const url = context.response?.url || "";
+      const path = new URL(url, baseUrl).pathname;
+      const token = context.data?.token;
+      if (token && (path.includes("/sign-in") || path.includes("/sign-up"))) {
+        const session = {
+          id: context.data?.session?.id || "session",
+          token,
+          expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1e3).toISOString()
+        };
+        storeToken(projectId, session);
+      }
+      if (path.includes("/sign-out")) {
+        clearToken(projectId);
+      }
+    },
+    // Handle errors - clear token on auth errors
+    onError: async (context) => {
+      if (!useBearerAuth) return;
+      if (context.response?.status === 401) {
+        clearToken(projectId);
+      }
     }
   };
   const client = createAuthClient({
     baseURL: baseUrl,
     fetchOptions,
-    // For same-origin, include cookies
+    // For same-origin, include cookies (cross-origin uses Bearer from fetchOptions.auth)
     ...!useBearerAuth && { credentials: "include" }
   });
-  if (!useBearerAuth) {
-    return client;
-  }
-  return new Proxy({}, {
-    get(_target, prop) {
-      if (typeof prop === "symbol") {
-        return client[prop];
-      }
-      const mergeHeaders = (args) => {
-        const [data, ...rest] = args;
-        if (!data || typeof data !== "object") return args;
-        const existingHeaders = data.fetchOptions?.headers || {};
-        const mergedData = {
-          ...data,
-          fetchOptions: {
-            ...data.fetchOptions,
-            headers: {
-              "X-Project-Id": projectId,
-              ...existingHeaders
-            }
-          }
-        };
-        return [mergedData, ...rest];
-      };
-      if (prop === "signIn") {
-        return new Proxy(client.signIn, {
-          get(_signInTarget, signInProp) {
-            if (signInProp === "email") {
-              return async (...args) => {
-                const mergedArgs = mergeHeaders(args);
-                const result = await client.signIn.email(...mergedArgs);
-                const token = result.data?.token;
-                if (token) {
-                  const session = {
-                    id: result.data?.session?.id || "session",
-                    token,
-                    expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1e3).toISOString()
-                  };
-                  storeToken(projectId, session);
-                  notifySessionChange();
-                }
-                return result;
-              };
-            }
-            return client.signIn[signInProp];
-          }
-        });
-      }
-      if (prop === "signUp") {
-        return new Proxy(client.signUp, {
-          get(_signUpTarget, signUpProp) {
-            if (signUpProp === "email") {
-              return async (...args) => {
-                const mergedArgs = mergeHeaders(args);
-                const result = await client.signUp.email(...mergedArgs);
-                const token = result.data?.token;
-                if (token) {
-                  const session = {
-                    id: result.data?.session?.id || "session",
-                    token,
-                    expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1e3).toISOString()
-                  };
-                  storeToken(projectId, session);
-                  notifySessionChange();
-                }
-                return result;
-              };
-            }
-            return client.signUp[signUpProp];
-          }
-        });
-      }
-      if (prop === "signOut") {
-        return async (...args) => {
-          clearToken(projectId);
-          const result = await client.signOut(...args);
-          notifySessionChange();
-          return result;
-        };
-      }
-      if (prop === "useSession") {
-        return function useSession() {
-          const [data, setData] = useState(null);
-          const [isPending, setIsPending] = useState(true);
-          const [error, setError] = useState(null);
-          const refetch = useCallback2(async () => {
-            setIsPending(true);
-            try {
-              const result = await client.getSession();
-              if (result.error) {
-                setError(result.error);
-                setData(null);
-              } else {
-                setData(result.data);
-                setError(null);
-              }
-            } catch (e) {
-              setError(e);
-              setData(null);
-            }
-            setIsPending(false);
-          }, []);
-          useEffect(() => {
-            refetch();
-          }, [refetch]);
-          useEffect(() => {
-            sessionListeners.add(refetch);
-            return () => {
-              sessionListeners.delete(refetch);
-            };
-          }, [refetch]);
-          return { data, isPending, error, refetch };
-        };
-      }
-      return client[prop];
-    }
-  });
+  return client;
 }
 
 // src/kv-client.ts