@rebasepro/auth 0.0.1-canary.eae7889 → 0.1.0

package/dist/index.umd.js

@@ -71,11 +71,12 @@
     });
     return handleResponse(response);
   }
-  async function googleLogin(idToken) {
+  async function googleLogin(tokenOrPayload, tokenType = "idToken") {
+    const body = typeof tokenOrPayload === "string" ? { [tokenType]: tokenOrPayload } : tokenOrPayload;
     const response = await fetchWithHandling(`${baseApiUrl}/api/auth/google`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ idToken })
+      body: JSON.stringify(body)
     });
     return handleResponse(response);
   }
@@ -195,12 +196,23 @@
     });
     return handleResponse(response);
   }
+  let authConfigInflight = null;
   async function fetchAuthConfig() {
-    const response = await fetchWithHandling(`${baseApiUrl}/api/auth/config`, {
-      method: "GET",
-      headers: { "Content-Type": "application/json" }
-    });
-    return handleResponse(response);
+    if (authConfigInflight) {
+      return authConfigInflight;
+    }
+    authConfigInflight = (async () => {
+      const response = await fetchWithHandling(`${baseApiUrl}/api/auth/config`, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" }
+      });
+      return handleResponse(response);
+    })();
+    try {
+      return await authConfigInflight;
+    } finally {
+      authConfigInflight = null;
+    }
   }
   const STORAGE_KEY = "rebase_auth";
   const TOKEN_REFRESH_BUFFER_MS = 2 * 60 * 1e3;
@@ -411,6 +423,7 @@
       }
     }, [client, getAuthToken, refreshAccessToken$1, clearSessionAndSignOut]);
     const handleAuthSuccess = react.useCallback(async (userInfo, tokens) => {
+      console.log("[Auth] handleAuthSuccess called, user:", userInfo.email, "uid:", userInfo.uid);
       tokensRef.current = tokens;
       let convertedUser = convertToUser(userInfo);
       if (defineRolesFor) {
@@ -423,11 +436,13 @@
         }
       }
       saveAuthToStorage(tokens, userInfo);
+      console.log("[Auth] Calling setUser, roles:", convertedUser.roles);
       setUser(convertedUser);
       setAuthError(null);
       setAuthProviderError(null);
       setLoginSkipped(false);
       scheduleTokenRefresh(tokens);
+      console.log("[Auth] handleAuthSuccess completed");
     }, [scheduleTokenRefresh, defineRolesFor]);
     const emailPasswordLogin = react.useCallback(async (email, password) => {
       setAuthLoading(true);
@@ -455,11 +470,11 @@
         setAuthLoading(false);
       }
     }, [handleAuthSuccess]);
-    const googleLogin$1 = react.useCallback(async (idToken) => {
+    const googleLogin$1 = react.useCallback(async (tokenOrPayload, tokenType) => {
       setAuthLoading(true);
       setAuthProviderError(null);
       try {
-        const response = await googleLogin(idToken);
+        const response = typeof tokenOrPayload === "string" ? await googleLogin(tokenOrPayload, tokenType ?? "idToken") : await googleLogin(tokenOrPayload);
         await handleAuthSuccess(response.user, response.tokens);
       } catch (error) {
         setAuthProviderError(error);
@@ -794,6 +809,8 @@
     const [loading, setLoading] = react.useState(true);
     const [usersError, setUsersError] = react.useState();
     const [rolesError, setRolesError] = react.useState();
+    const lastLoadedUidRef = react.useRef(null);
+    const apiRequestRef = react.useRef(null);
     const apiRequest = react.useCallback(async (endpoint, method = "GET", body, retryCount = 6, signal) => {
       let lastError = null;
       for (let attempt = 0; attempt < retryCount; attempt++) {
@@ -861,6 +878,7 @@
       }
       throw lastError;
     }, [apiUrl, getAuthToken]);
+    apiRequestRef.current = apiRequest;
     react.useCallback(async (signal) => {
       try {
         const data = await apiRequest("/roles", "GET", void 0, 6, signal);
@@ -889,23 +907,43 @@
         setLoading(false);
         return;
       }
+      if (lastLoadedUidRef.current === currentUser.uid) {
+        setLoading(false);
+        return;
+      }
       const abortController = new AbortController();
       const load = async () => {
         setLoading(true);
+        const request = apiRequestRef.current;
         try {
-          const data = await apiRequest("/roles", "GET", void 0, 6, abortController.signal);
+          const data = await request("/roles", "GET", void 0, 6, abortController.signal);
           setRoles(data.roles.map(convertRole));
           setRolesError(void 0);
         } catch (error) {
-          if (error instanceof Error && error.name !== "AbortError") {
-            console.error("Failed to load roles:", error);
-            setRolesError(error);
+          if (error instanceof Error && error.name === "AbortError") return;
+          console.error("Failed to load roles:", error);
+          setRolesError(error instanceof Error ? error : new Error(String(error)));
+          const status = error.status;
+          if (status === 403 || status === 401) {
+            setUsersError(error instanceof Error ? error : new Error(String(error)));
+            setLoading(false);
+            return;
           }
         }
         if (!abortController.signal.aborted) {
-          await loadUsers(abortController.signal);
+          try {
+            const data = await request("/users", "GET", void 0, 6, abortController.signal);
+            const allUsers = data.users.map((u) => convertUser(u));
+            setUsers(allUsers);
+            setUsersError(void 0);
+          } catch (error) {
+            if (error instanceof Error && error.name === "AbortError") return;
+            console.error("Failed to load users:", error);
+            setUsersError(error instanceof Error ? error : new Error(String(error)));
+          }
         }
         if (!abortController.signal.aborted) {
+          lastLoadedUidRef.current = currentUser.uid;
           setLoading(false);
         }
       };
@@ -913,7 +951,7 @@
       return () => {
         abortController.abort();
       };
-    }, [currentUser, apiRequest, loadUsers]);
+    }, [currentUser?.uid]);
     const searchUsers = react.useCallback(async (options) => {
       const params = new URLSearchParams();
       if (options.limit !== void 0) params.set("limit", String(options.limit));
@@ -1114,7 +1152,7 @@
       "div",
       {
         className: ui.cls(
-          "relative flex items-center justify-center h-screen w-screen p-4 transition-opacity duration-500 bg-white dark:bg-surface-950",
+          "relative flex items-center justify-center h-screen w-screen p-4 transition-opacity duration-500 bg-white dark:bg-surface-900",
           fadeIn ? "opacity-100" : "opacity-0"
         ),
         children: [
@@ -1268,74 +1306,79 @@
       }
     );
   }
+  const GoogleIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#4285F4",
+        d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#34A853",
+        d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FBBC05",
+        d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#EA4335",
+        d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      }
+    )
+  ] });
   function GoogleLoginButton({
     disabled,
     googleClientId,
     authController
   }) {
-    const handleGoogleLogin = async () => {
-      try {
-        const google = window.google;
-        if (!google) {
-          console.error("Google Sign-In not loaded");
-          return;
-        }
-        google.accounts.id.initialize({
-          client_id: googleClientId,
-          callback: async (response) => {
-            try {
-              await authController.googleLogin(response.credential);
-            } catch (err) {
-              console.error("Google login error:", err);
-            }
+    const codeClientRef = react.useRef(null);
+    react.useEffect(() => {
+      const google = window.google;
+      if (!google || codeClientRef.current) return;
+      codeClientRef.current = google.accounts.oauth2.initCodeClient({
+        client_id: googleClientId,
+        scope: "openid email profile",
+        ux_mode: "popup",
+        callback: async (response) => {
+          if (response.error || !response.code) {
+            console.error("Google login error:", response.error);
+            return;
           }
-        });
-        google.accounts.id.prompt();
-      } catch (err) {
-        console.error("Google login error:", err);
+          try {
+            await authController.googleLogin({
+              code: response.code,
+              redirectUri: "postmessage"
+            });
+          } catch (err) {
+            console.error("Google login error:", err);
+          }
+        }
+      });
+    }, [googleClientId, authController]);
+    const handleClick = () => {
+      if (!codeClientRef.current) {
+        console.error("Google Sign-In not loaded");
+        return;
       }
+      codeClientRef.current.requestCode();
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
+      LoginButton,
       {
         disabled,
-        className: "w-full",
-        variant: "outlined",
-        size: "large",
-        onClick: handleGoogleLogin,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center w-full gap-3 py-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#4285F4",
-                d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#34A853",
-                d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#FBBC05",
-                d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#EA4335",
-                d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "button", children: "Continue with Google" })
-        ] })
+        text: "Sign in with Google",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(GoogleIcon, {}),
+        onClick: handleClick
       }
     );
   }
@@ -1456,6 +1499,7 @@
         {
           type: "submit",
           variant: "filled",
+          color: "primary",
           className: "w-full mt-1",
           size: "large",
           loading: authController.authLoading,
@@ -1577,6 +1621,7 @@
         {
           type: "submit",
           variant: "filled",
+          color: "primary",
           className: "w-full",
           size: "large",
           loading: authController.authLoading,
@@ -1604,14 +1649,12 @@
       {
         slug: "dev/users",
         name: "CMS Users",
-        group: "Admin",
         icon: "face",
         view: /* @__PURE__ */ jsxRuntime.jsx(UsersView, { userManagement, apiUrl, getAuthToken })
       },
       {
         slug: "dev/roles",
         name: "Roles",
-        group: "Admin",
         icon: "gpp_good",
         view: /* @__PURE__ */ jsxRuntime.jsx(RolesView, { userManagement, collections })
       }
@@ -1632,6 +1675,7 @@
   }
   function UsersView({ userManagement, apiUrl, getAuthToken }) {
     const { users, roles, saveUser, deleteUser, loading } = userManagement;
+    const usersError = "usersError" in userManagement ? userManagement.usersError : void 0;
     const snackbarController = core.useSnackbarController();
     const { user: loggedInUser } = core.useAuthController();
     const [dialogOpen, setDialogOpen] = react.useState(false);
@@ -1751,7 +1795,10 @@
               return role ? /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role }, roleId) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: roleId }, roleId);
             }) }) })
           ] }, user.uid)),
-          users.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { colspan: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "There are no users yet" }) }) }) })
+          users.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { colspan: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: usersError ? "You don't have permission to view users" : "There are no users yet" }),
+            usersError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-500", children: "Contact an administrator if you need access to this section." })
+          ] }) }) })
         ] })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1908,6 +1955,7 @@
   }
   function RolesView({ userManagement, collections = [] }) {
     const { roles, saveRole, deleteRole, loading, allowDefaultRolesCreation } = userManagement;
+    const rolesError = "rolesError" in userManagement ? userManagement.rolesError : void 0;
     const snackbarController = core.useSnackbarController();
     const [dialogOpen, setDialogOpen] = react.useState(false);
     const [selectedRole, setSelectedRole] = react.useState();
@@ -2000,8 +2048,9 @@
             ] }, role.id);
           }),
           roles.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { colspan: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "You don't have any roles yet." }),
-            allowDefaultRolesCreation && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: createDefaultRoles, children: "Create default roles" })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: rolesError ? "You don't have permission to view roles" : "You don&apos;t have any roles yet." }),
+            rolesError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-500", children: "Contact an administrator if you need access to this section." }),
+            !rolesError && allowDefaultRolesCreation && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: createDefaultRoles, children: "Create default roles" })
           ] }) }) })
         ] })
       ] }) }),