@basictech/react 0.6.0 → 0.7.0-beta.1

package/changelog.md

@@ -1,5 +1,17 @@
 # 1.3.4
 
+## 0.7.0-beta.1
+
+### Minor Changes
+
+- storage adapater update
+
+## 0.7.0-beta.0
+
+### Minor Changes
+
+- localstorage update
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -2,6 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 export { useLiveQuery as useQuery } from 'dexie-react-hooks';
 
+interface BasicStorage {
+    get(key: string): Promise<string | null>;
+    set(key: string, value: string): Promise<void>;
+    remove(key: string): Promise<void>;
+}
 declare enum DBStatus {
     LOADING = "LOADING",
     OFFLINE = "OFFLINE",
@@ -19,21 +24,26 @@ type User = {
     };
     fullName?: string;
 };
-declare function BasicProvider({ children, project_id, schema, debug }: {
+declare function BasicProvider({ children, project_id, schema, debug, storage }: {
     children: React.ReactNode;
     project_id?: string;
     schema?: any;
     debug?: boolean;
+    storage?: BasicStorage;
 }): react_jsx_runtime.JSX.Element;
 declare function useBasic(): {
     unicorn: string;
     isAuthReady: boolean;
     isSignedIn: boolean;
     user: User | null;
-    signout: () => void;
-    signin: () => void;
+    signout: () => Promise<void>;
+    signin: () => Promise<void>;
+    signinWithCode: (code: string, state?: string) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
     getToken: () => Promise<string>;
-    getSignInLink: () => string;
+    getSignInLink: (redirectUri?: string) => Promise<string>;
     db: any;
     dbStatus: DBStatus;
 };

package/dist/index.d.ts

@@ -2,6 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 export { useLiveQuery as useQuery } from 'dexie-react-hooks';
 
+interface BasicStorage {
+    get(key: string): Promise<string | null>;
+    set(key: string, value: string): Promise<void>;
+    remove(key: string): Promise<void>;
+}
 declare enum DBStatus {
     LOADING = "LOADING",
     OFFLINE = "OFFLINE",
@@ -19,21 +24,26 @@ type User = {
     };
     fullName?: string;
 };
-declare function BasicProvider({ children, project_id, schema, debug }: {
+declare function BasicProvider({ children, project_id, schema, debug, storage }: {
     children: React.ReactNode;
     project_id?: string;
     schema?: any;
     debug?: boolean;
+    storage?: BasicStorage;
 }): react_jsx_runtime.JSX.Element;
 declare function useBasic(): {
     unicorn: string;
     isAuthReady: boolean;
     isSignedIn: boolean;
     user: User | null;
-    signout: () => void;
-    signin: () => void;
+    signout: () => Promise<void>;
+    signin: () => Promise<void>;
+    signinWithCode: (code: string, state?: string) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
     getToken: () => Promise<string>;
-    getSignInLink: () => string;
+    getSignInLink: (redirectUri?: string) => Promise<string>;
     db: any;
     dbStatus: DBStatus;
 };

package/dist/index.js

@@ -446,22 +446,33 @@ async function deleteRecord({ projectId, accountId, tableName, id, token }) {
 var import_schema2 = require("@basictech/schema");
 
 // package.json
-var version = "0.6.0-beta.0";
+var version = "0.6.0";
 
 // src/AuthContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var LocalStorageAdapter = class {
+  async get(key) {
+    return localStorage.getItem(key);
+  }
+  async set(key, value) {
+    localStorage.setItem(key, value);
+  }
+  async remove(key) {
+    localStorage.removeItem(key);
+  }
+};
 var BasicContext = (0, import_react.createContext)({
   unicorn: "\u{1F984}",
   isAuthReady: false,
   isSignedIn: false,
   user: null,
-  signout: () => {
-  },
-  signin: () => {
-  },
+  signout: () => Promise.resolve(),
+  signin: () => Promise.resolve(),
+  signinWithCode: () => new Promise(() => {
+  }),
   getToken: () => new Promise(() => {
   }),
-  getSignInLink: () => "",
+  getSignInLink: () => Promise.resolve(""),
   db: {},
   dbStatus: "LOADING" /* LOADING */
 });
@@ -578,7 +589,13 @@ run "npm install @basictech/react@${latestVersion}" to update`);
     };
   }
 }
-function BasicProvider({ children, project_id, schema, debug = false }) {
+function BasicProvider({
+  children,
+  project_id,
+  schema,
+  debug = false,
+  storage
+}) {
   const [isAuthReady, setIsAuthReady] = (0, import_react.useState)(false);
   const [isSignedIn, setIsSignedIn] = (0, import_react.useState)(false);
   const [token, setToken] = (0, import_react.useState)(null);
@@ -587,7 +604,56 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   const [dbStatus, setDbStatus] = (0, import_react.useState)("OFFLINE" /* OFFLINE */);
   const [error, setError] = (0, import_react.useState)(null);
+  const [isOnline, setIsOnline] = (0, import_react.useState)(navigator.onLine);
+  const [pendingRefresh, setPendingRefresh] = (0, import_react.useState)(false);
   const syncRef = (0, import_react.useRef)(null);
+  const storageAdapter = storage || new LocalStorageAdapter();
+  const STORAGE_KEYS = {
+    REFRESH_TOKEN: "basic_refresh_token",
+    USER_INFO: "basic_user_info",
+    AUTH_STATE: "basic_auth_state",
+    DEBUG: "basic_debug"
+  };
+  const isDevelopment = () => {
+    return window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes("localhost") || window.location.hostname.includes("127.0.0.1") || window.location.hostname.includes(".local") || process.env.NODE_ENV === "development" || debug === true;
+  };
+  const cleanOAuthParamsFromUrl = () => {
+    if (window.location.search.includes("code") || window.location.search.includes("state")) {
+      const url = new URL(window.location.href);
+      url.searchParams.delete("code");
+      url.searchParams.delete("state");
+      window.history.pushState({}, document.title, url.pathname + url.search);
+      log("Cleaned OAuth parameters from URL");
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    const handleOnline = () => {
+      log("Network came back online");
+      setIsOnline(true);
+      if (pendingRefresh) {
+        log("Retrying pending token refresh");
+        setPendingRefresh(false);
+        if (token) {
+          const refreshToken = token.refresh_token || localStorage.getItem("basic_refresh_token");
+          if (refreshToken) {
+            fetchToken(refreshToken).catch((error2) => {
+              log("Retry refresh failed:", error2);
+            });
+          }
+        }
+      }
+    };
+    const handleOffline = () => {
+      log("Network went offline");
+      setIsOnline(false);
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, [pendingRefresh, token]);
   (0, import_react.useEffect)(() => {
     function initDb(options) {
       if (!syncRef.current) {
@@ -653,32 +719,68 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
       connectToDb();
     }
   }, [isSignedIn, shouldConnect]);
+  const connectToDb = async () => {
+    const tok = await getToken();
+    if (!tok) {
+      log("no token found");
+      return;
+    }
+    log("connecting to db...");
+    syncRef.current.connect({ access_token: tok }).catch((e) => {
+      log("error connecting to db", e);
+    });
+  };
   (0, import_react.useEffect)(() => {
-    localStorage.setItem("basic_debug", debug ? "true" : "false");
-    try {
-      if (window.location.search.includes("code")) {
-        let code = window.location?.search?.split("code=")[1].split("&")[0];
-        const state = localStorage.getItem("basic_auth_state");
-        if (!state || state !== window.location.search.split("state=")[1].split("&")[0]) {
-          log("error: auth state does not match");
-          setIsAuthReady(true);
-          localStorage.removeItem("basic_auth_state");
-          window.history.pushState({}, document.title, "/");
-          return;
-        }
-        localStorage.removeItem("basic_auth_state");
-        fetchToken(code);
-      } else {
-        let cookie_token = getCookie("basic_token");
-        if (cookie_token !== "") {
-          setToken(JSON.parse(cookie_token));
+    const initializeAuth = async () => {
+      await storageAdapter.set(STORAGE_KEYS.DEBUG, debug ? "true" : "false");
+      try {
+        if (window.location.search.includes("code")) {
+          let code = window.location?.search?.split("code=")[1].split("&")[0];
+          const state = await storageAdapter.get(STORAGE_KEYS.AUTH_STATE);
+          if (!state || state !== window.location.search.split("state=")[1].split("&")[0]) {
+            log("error: auth state does not match");
+            setIsAuthReady(true);
+            await storageAdapter.remove(STORAGE_KEYS.AUTH_STATE);
+            cleanOAuthParamsFromUrl();
+            return;
+          }
+          await storageAdapter.remove(STORAGE_KEYS.AUTH_STATE);
+          cleanOAuthParamsFromUrl();
+          fetchToken(code);
         } else {
-          setIsAuthReady(true);
+          const refreshToken = await storageAdapter.get(STORAGE_KEYS.REFRESH_TOKEN);
+          if (refreshToken) {
+            log("Found refresh token in storage, attempting to refresh access token");
+            fetchToken(refreshToken);
+          } else {
+            let cookie_token = getCookie("basic_token");
+            if (cookie_token !== "") {
+              const tokenData = JSON.parse(cookie_token);
+              setToken(tokenData);
+              if (tokenData.refresh_token) {
+                await storageAdapter.set(STORAGE_KEYS.REFRESH_TOKEN, tokenData.refresh_token);
+              }
+            } else {
+              const cachedUserInfo = await storageAdapter.get(STORAGE_KEYS.USER_INFO);
+              if (cachedUserInfo) {
+                try {
+                  const userData = JSON.parse(cachedUserInfo);
+                  setUser(userData);
+                  setIsSignedIn(true);
+                  log("Loaded cached user info for offline mode");
+                } catch (error2) {
+                  log("Error parsing cached user info:", error2);
+                }
+              }
+              setIsAuthReady(true);
+            }
+          }
         }
+      } catch (e) {
+        log("error getting token", e);
       }
-    } catch (e) {
-      log("error getting cookie", e);
-    }
+    };
+    initializeAuth();
   }, []);
   (0, import_react.useEffect)(() => {
     async function fetchUser(acc_token) {
@@ -693,10 +795,13 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
         log("error fetching user", user2.error);
         return;
       } else {
-        document.cookie = `basic_token=${JSON.stringify(token)}; Secure; SameSite=Strict`;
-        if (window.location.search.includes("code")) {
-          window.history.pushState({}, document.title, "/");
+        if (token?.refresh_token) {
+          await storageAdapter.set(STORAGE_KEYS.REFRESH_TOKEN, token.refresh_token);
         }
+        await storageAdapter.set(STORAGE_KEYS.USER_INFO, JSON.stringify(user2));
+        log("Cached user info in storage");
+        document.cookie = `basic_access_token=${token.access_token}; Secure; SameSite=Strict; HttpOnly=false`;
+        document.cookie = `basic_token=${JSON.stringify(token)}; Secure; SameSite=Strict`;
         setUser(user2);
         setIsSignedIn(true);
         setIsAuthReady(true);
@@ -712,8 +817,18 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
       const isExpired = decoded.exp && decoded.exp < Date.now() / 1e3;
       if (isExpired) {
         log("token is expired - refreshing ...");
-        const newToken = await fetchToken(token?.refresh);
-        fetchUser(newToken.access_token);
+        try {
+          const newToken = await fetchToken(token?.refresh_token);
+          fetchUser(newToken.access_token);
+        } catch (error2) {
+          log("Failed to refresh token in checkToken:", error2);
+          if (error2.message.includes("offline") || error2.message.includes("Network")) {
+            log("Network issue - continuing with expired token until online");
+            fetchUser(token.access_token);
+          } else {
+            setIsAuthReady(true);
+          }
+        }
       } else {
         fetchUser(token.access_token);
       }
@@ -722,41 +837,97 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
       checkToken();
     }
   }, [token]);
-  const connectToDb = async () => {
-    const tok = await getToken();
-    if (!tok) {
-      log("no token found");
-      return;
+  const getSignInLink = async (redirectUri) => {
+    try {
+      log("getting sign in link...");
+      if (!project_id) {
+        throw new Error("Project ID is required to generate sign-in link");
+      }
+      const randomState = Math.random().toString(36).substring(6);
+      await storageAdapter.set(STORAGE_KEYS.AUTH_STATE, randomState);
+      const redirectUrl = redirectUri || window.location.href;
+      if (!redirectUrl || !redirectUrl.startsWith("http://") && !redirectUrl.startsWith("https://")) {
+        throw new Error("Invalid redirect URI provided");
+      }
+      let baseUrl2 = "https://api.basic.tech/auth/authorize";
+      baseUrl2 += `?client_id=${project_id}`;
+      baseUrl2 += `&redirect_uri=${encodeURIComponent(redirectUrl)}`;
+      baseUrl2 += `&response_type=code`;
+      baseUrl2 += `&scope=profile`;
+      baseUrl2 += `&state=${randomState}`;
+      log("Generated sign-in link successfully");
+      return baseUrl2;
+    } catch (error2) {
+      log("Error generating sign-in link:", error2);
+      throw error2;
     }
-    log("connecting to db...");
-    syncRef.current.connect({ access_token: tok }).catch((e) => {
-      log("error connecting to db", e);
-    });
   };
-  const getSignInLink = () => {
-    log("getting sign in link...");
-    const randomState = Math.random().toString(36).substring(6);
-    localStorage.setItem("basic_auth_state", randomState);
-    let baseUrl2 = "https://api.basic.tech/auth/authorize";
-    baseUrl2 += `?client_id=${project_id}`;
-    baseUrl2 += `&redirect_uri=${encodeURIComponent(window.location.href)}`;
-    baseUrl2 += `&response_type=code`;
-    baseUrl2 += `&scope=profile`;
-    baseUrl2 += `&state=${randomState}`;
-    return baseUrl2;
+  const signin = async () => {
+    try {
+      log("signing in...");
+      if (!project_id) {
+        log("Error: project_id is required for sign-in");
+        throw new Error("Project ID is required for authentication");
+      }
+      const signInLink = await getSignInLink();
+      log("Generated sign-in link:", signInLink);
+      if (!signInLink || !signInLink.startsWith("https://")) {
+        log("Error: Invalid sign-in link generated");
+        throw new Error("Failed to generate valid sign-in URL");
+      }
+      window.location.href = signInLink;
+    } catch (error2) {
+      log("Error during sign-in:", error2);
+      if (isDevelopment()) {
+        setError({
+          code: "signin_error",
+          title: "Sign-in Failed",
+          message: error2.message || "An error occurred during sign-in. Please try again."
+        });
+      }
+      throw error2;
+    }
   };
-  const signin = () => {
-    log("signing in: ", getSignInLink());
-    const signInLink = getSignInLink();
-    window.location.href = signInLink;
+  const signinWithCode = async (code, state) => {
+    try {
+      log("signinWithCode called with code:", code);
+      if (!code || typeof code !== "string") {
+        return { success: false, error: "Invalid authorization code" };
+      }
+      if (state) {
+        const storedState = await storageAdapter.get(STORAGE_KEYS.AUTH_STATE);
+        if (storedState && storedState !== state) {
+          log("State parameter mismatch:", { provided: state, stored: storedState });
+          return { success: false, error: "State parameter mismatch" };
+        }
+      }
+      await storageAdapter.remove(STORAGE_KEYS.AUTH_STATE);
+      cleanOAuthParamsFromUrl();
+      const token2 = await fetchToken(code);
+      if (token2) {
+        log("signinWithCode successful");
+        return { success: true };
+      } else {
+        return { success: false, error: "Failed to exchange code for token" };
+      }
+    } catch (error2) {
+      log("signinWithCode error:", error2);
+      return {
+        success: false,
+        error: error2.message || "Authentication failed"
+      };
+    }
   };
-  const signout = () => {
+  const signout = async () => {
     log("signing out!");
     setUser({});
     setIsSignedIn(false);
     setToken(null);
     document.cookie = `basic_token=; Secure; SameSite=Strict`;
-    localStorage.removeItem("basic_auth_state");
+    document.cookie = `basic_access_token=; Secure; SameSite=Strict`;
+    await storageAdapter.remove(STORAGE_KEYS.AUTH_STATE);
+    await storageAdapter.remove(STORAGE_KEYS.REFRESH_TOKEN);
+    await storageAdapter.remove(STORAGE_KEYS.USER_INFO);
     if (syncRef.current) {
       (async () => {
         try {
@@ -773,6 +944,27 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
   const getToken = async () => {
     log("getting token...");
     if (!token) {
+      const refreshToken = await storageAdapter.get(STORAGE_KEYS.REFRESH_TOKEN);
+      if (refreshToken) {
+        log("No token in memory, attempting to refresh from storage");
+        try {
+          const newToken = await fetchToken(refreshToken);
+          if (newToken?.access_token) {
+            return newToken.access_token;
+          }
+        } catch (error2) {
+          log("Failed to refresh token from storage:", error2);
+          if (error2.message.includes("offline") || error2.message.includes("Network")) {
+            log("Network issue - continuing with potentially expired token");
+            const lastToken = localStorage.getItem("basic_access_token");
+            if (lastToken) {
+              return lastToken;
+            }
+            throw new Error("Network offline - authentication will be retried when online");
+          }
+          throw new Error("Authentication expired. Please sign in again.");
+        }
+      }
       log("no token found");
       throw new Error("no token found");
     }
@@ -780,8 +972,22 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
     const isExpired = decoded.exp && decoded.exp < Date.now() / 1e3;
     if (isExpired) {
       log("token is expired - refreshing ...");
-      const newToken = await fetchToken(token?.refresh);
-      return newToken?.access_token || "";
+      const refreshToken = token?.refresh_token || await storageAdapter.get(STORAGE_KEYS.REFRESH_TOKEN);
+      if (refreshToken) {
+        try {
+          const newToken = await fetchToken(refreshToken);
+          return newToken?.access_token || "";
+        } catch (error2) {
+          log("Failed to refresh expired token:", error2);
+          if (error2.message.includes("offline") || error2.message.includes("Network")) {
+            log("Network issue - using expired token until network is restored");
+            return token.access_token;
+          }
+          throw new Error("Authentication expired. Please sign in again.");
+        }
+      } else {
+        throw new Error("no refresh token available");
+      }
     }
     return token?.access_token || "";
   };
@@ -800,20 +1006,66 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
     return cookieValue;
   }
   const fetchToken = async (code) => {
-    const token2 = await fetch("https://api.basic.tech/auth/token", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ code })
-    }).then((response) => response.json()).catch((error2) => log("Error:", error2));
-    if (token2.error) {
-      log("error fetching token", token2.error);
-      return;
-    } else {
-      setToken(token2);
+    try {
+      if (!isOnline) {
+        log("Network is offline, marking refresh as pending");
+        setPendingRefresh(true);
+        throw new Error("Network offline - refresh will be retried when online");
+      }
+      const token2 = await fetch("https://api.basic.tech/auth/token", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ code })
+      }).then((response) => response.json()).catch((error2) => {
+        log("Network error fetching token:", error2);
+        if (!isOnline) {
+          setPendingRefresh(true);
+          throw new Error("Network offline - refresh will be retried when online");
+        }
+        throw new Error("Network error during token refresh");
+      });
+      if (token2.error) {
+        log("error fetching token", token2.error);
+        if (token2.error.includes("network") || token2.error.includes("timeout")) {
+          setPendingRefresh(true);
+          throw new Error("Network issue - refresh will be retried when online");
+        }
+        await storageAdapter.remove(STORAGE_KEYS.REFRESH_TOKEN);
+        await storageAdapter.remove(STORAGE_KEYS.USER_INFO);
+        document.cookie = `basic_token=; Secure; SameSite=Strict`;
+        document.cookie = `basic_access_token=; Secure; SameSite=Strict`;
+        setUser({});
+        setIsSignedIn(false);
+        setToken(null);
+        setIsAuthReady(true);
+        throw new Error(`Token refresh failed: ${token2.error}`);
+      } else {
+        setToken(token2);
+        setPendingRefresh(false);
+        if (token2.refresh_token) {
+          await storageAdapter.set(STORAGE_KEYS.REFRESH_TOKEN, token2.refresh_token);
+          log("Updated refresh token in storage");
+        }
+        document.cookie = `basic_access_token=${token2.access_token}; Secure; SameSite=Strict; HttpOnly=false`;
+        log("Updated access token in cookie");
+      }
+      return token2;
+    } catch (error2) {
+      log("Token refresh error:", error2);
+      if (!error2.message.includes("offline") && !error2.message.includes("Network")) {
+        await storageAdapter.remove(STORAGE_KEYS.REFRESH_TOKEN);
+        await storageAdapter.remove(STORAGE_KEYS.USER_INFO);
+        document.cookie = `basic_token=; Secure; SameSite=Strict`;
+        document.cookie = `basic_access_token=; Secure; SameSite=Strict`;
+        setUser({});
+        setIsSignedIn(false);
+        setToken(null);
+        setIsAuthReady(true);
+      }
+      throw error2;
     }
-    return token2;
   };
   const db_ = (tableName) => {
     const checkSignIn = () => {
@@ -856,12 +1108,13 @@ function BasicProvider({ children, project_id, schema, debug = false }) {
     user,
     signout,
     signin,
+    signinWithCode,
     getToken,
     getSignInLink,
     db: syncRef.current ? syncRef.current : noDb,
     dbStatus
   }, children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorDisplay, { error }),
+    error && isDevelopment() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorDisplay, { error }),
     isReady && children
   ] });
 }