@rebasepro/auth 0.0.1-canary.eae7889 → 0.1.0

package/dist/types.d.ts

@@ -4,8 +4,14 @@ import { AuthController, Role, User } from "@rebasepro/types";
  * with additional methods for email/password and Google login
  */
 export type RebaseAuthController = AuthController & {
-    /** Login with Google ID token from frontend Google Sign-In */
-    googleLogin: (idToken: string) => Promise<void>;
+    /** Login with Google — accepts legacy (token, tokenType) or code-flow payload */
+    googleLogin: {
+        (token: string, tokenType?: "idToken" | "accessToken"): Promise<void>;
+        (payload: {
+            code: string;
+            redirectUri: string;
+        }): Promise<void>;
+    };
     /** Generic OAuth login — works with any provider. Posts payload to /auth/{providerId}. */
     oauthLogin: (providerId: string, payload: Record<string, unknown>) => Promise<void>;
     /** Login with email and password */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/auth",
   "type": "module",
-  "version": "0.0.1-canary.eae7889",
+  "version": "0.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -11,9 +11,9 @@
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@rebasepro/ui": "0.0.1-canary.eae7889",
-    "@rebasepro/core": "0.0.1-canary.eae7889",
-    "@rebasepro/types": "0.0.1-canary.eae7889"
+    "@rebasepro/core": "0.1.0",
+    "@rebasepro/types": "0.1.0",
+    "@rebasepro/ui": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/api.ts

@@ -103,13 +103,33 @@ password })
 }
 
 /**
- * Login with Google ID token
+ * Google login payload — one of the three supported flows.
  */
-export async function googleLogin(idToken: string): Promise<AuthResponse> {
+export type GoogleLoginPayload =
+    | { idToken: string }
+    | { accessToken: string }
+    | { code: string; redirectUri: string };
+
+/**
+ * Login with Google.
+ *
+ * Overload 1 (legacy): `googleLogin("token", "idToken" | "accessToken")`
+ * Overload 2 (code flow): `googleLogin({ code, redirectUri })`
+ */
+export async function googleLogin(payload: GoogleLoginPayload): Promise<AuthResponse>;
+export async function googleLogin(token: string, tokenType?: "idToken" | "accessToken"): Promise<AuthResponse>;
+export async function googleLogin(
+    tokenOrPayload: string | GoogleLoginPayload,
+    tokenType: "idToken" | "accessToken" = "idToken"
+): Promise<AuthResponse> {
+    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<AuthResponse>(response);
@@ -349,17 +369,37 @@ export interface AuthConfigResponse {
     enabledProviders?: string[];
 }
 
+/**
+ * Inflight promise for `fetchAuthConfig` — ensures concurrent callers
+ * (e.g. React StrictMode double-mount) reuse the same network request.
+ */
+let authConfigInflight: Promise<AuthConfigResponse> | null = null;
+
 /**
  * Fetch auth configuration / status from the backend
- * This is an unauthenticated endpoint used to detect bootstrap mode
+ * This is an unauthenticated endpoint used to detect bootstrap mode.
+ *
+ * Concurrent calls are deduplicated: only one network request is made
+ * and all callers share the same promise.
  */
 export async function fetchAuthConfig(): Promise<AuthConfigResponse> {
-    const response = await fetchWithHandling(`${baseApiUrl}/api/auth/config`, {
-        method: "GET",
-        headers: { "Content-Type": "application/json" }
-    });
+    if (authConfigInflight) {
+        return authConfigInflight;
+    }
 
-    return handleResponse<AuthConfigResponse>(response);
+    authConfigInflight = (async () => {
+        const response = await fetchWithHandling(`${baseApiUrl}/api/auth/config`, {
+            method: "GET",
+            headers: { "Content-Type": "application/json" }
+        });
+        return handleResponse<AuthConfigResponse>(response);
+    })();
+
+    try {
+        return await authConfigInflight;
+    } finally {
+        authConfigInflight = null;
+    }
 }
 
 export { AuthApiError };

package/src/components/AdminViews.tsx

@@ -26,14 +26,12 @@ export function createUserManagementAdminViews({ userManagement, apiUrl, getAuth
         {
             slug: "dev/users",
             name: "CMS Users",
-            group: "Admin",
             icon: "face",
             view: <UsersView userManagement={userManagement} apiUrl={apiUrl} getAuthToken={getAuthToken}/>
         },
         {
             slug: "dev/roles",
             name: "Roles",
-            group: "Admin",
             icon: "gpp_good",
             view: <RolesView userManagement={userManagement} collections={collections}/>
         }
@@ -71,6 +69,7 @@ export function UsersView({ userManagement, apiUrl, getAuthToken }: {
     getAuthToken: () => Promise<string>;
 }) {
     const { users, roles, saveUser, deleteUser, loading } = userManagement;
+    const usersError = 'usersError' in userManagement ? (userManagement as { usersError?: Error }).usersError : undefined;
     const snackbarController = useSnackbarController();
     const { user: loggedInUser } = useAuthController();
 
@@ -219,8 +218,15 @@ message: error instanceof Error ? error.message : "Error deleting user" });
                                 <TableCell colspan={4}>
                                     <CenteredView className="flex flex-col gap-4 my-8 items-center">
                                         <Typography variant="label">
-                                            There are no users yet
+                                            {usersError
+                                                ? "You don't have permission to view users"
+                                                : "There are no users yet"}
                                         </Typography>
+                                        {usersError && (
+                                            <Typography variant="caption" className="text-surface-500">
+                                                Contact an administrator if you need access to this section.
+                                            </Typography>
+                                        )}
                                     </CenteredView>
                                 </TableCell>
                             </TableRow>
@@ -405,6 +411,7 @@ height: "100%" }}>
 // ============================================
 export function RolesView({ userManagement, collections = [] }: { userManagement: UserManagement, collections?: EntityCollection[] }) {
     const { roles, saveRole, deleteRole, loading, allowDefaultRolesCreation } = userManagement;
+    const rolesError = 'rolesError' in userManagement ? (userManagement as { rolesError?: Error }).rolesError : undefined;
     const snackbarController = useSnackbarController();
 
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -516,9 +523,16 @@ isAdmin: false }
                                 <TableCell colspan={4}>
                                     <CenteredView className="flex flex-col gap-4 my-8 items-center">
                                         <Typography variant="label">
-                                            You don&apos;t have any roles yet.
+                                            {rolesError
+                                                ? "You don't have permission to view roles"
+                                                : "You don\u0026apos;t have any roles yet."}
                                         </Typography>
-                                        {allowDefaultRolesCreation && (
+                                        {rolesError && (
+                                            <Typography variant="caption" className="text-surface-500">
+                                                Contact an administrator if you need access to this section.
+                                            </Typography>
+                                        )}
+                                        {!rolesError && allowDefaultRolesCreation && (
                                             <Button onClick={createDefaultRoles}>
                                                 Create default roles
                                             </Button>

package/src/components/RebaseLoginView.tsx

@@ -141,7 +141,7 @@ export function RebaseLoginView({
     return (
         <div
             className={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"
             )}>
 
@@ -296,6 +296,37 @@ function LoginButton({
     );
 }
 
+const GoogleIcon = () => (
+    <svg viewBox="0 0 24 24" width="20" height="20">
+        <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"/>
+        <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"/>
+        <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"/>
+        <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"/>
+    </svg>
+);
+
+/** Google Identity Services SDK — injected by the GIS <script> tag. */
+declare global {
+    interface Window {
+        google?: {
+            accounts: {
+                oauth2: {
+                    initCodeClient(config: {
+                        client_id: string;
+                        scope: string;
+                        ux_mode: "popup" | "redirect";
+                        callback: (response: { code?: string; error?: string }) => void;
+                    }): { requestCode(): void };
+                };
+            };
+        };
+    }
+}
+
 function GoogleLoginButton({
     disabled,
     googleClientId,
@@ -305,52 +336,50 @@ function GoogleLoginButton({
     googleClientId: string,
     authController: RebaseAuthController
 }) {
-    const handleGoogleLogin = async () => {
-        try {
-            const google = (window as unknown as { google?: { accounts: { id: { initialize: (config: { client_id: string; callback: (response: { credential: string }) => void }) => void; prompt: () => void } } } }).google;
-            if (!google) {
-                console.error("Google Sign-In not loaded");
-                return;
-            }
+    const codeClientRef = useRef<{ requestCode(): void } | null>(null);
 
-            google.accounts.id.initialize({
-                client_id: googleClientId,
-                callback: async (response: { credential: string }) => {
-                    try {
-                        await authController.googleLogin(response.credential);
-                    } catch (err: unknown) {
-                        console.error("Google login error:", err);
-                    }
+    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: { code?: string; error?: string }) => {
+                if (response.error || !response.code) {
+                    console.error("Google login error:", response.error);
+                    return;
                 }
-            });
+                try {
+                    // Send the authorization code to the backend.
+                    // redirectUri "postmessage" is required when using popup ux_mode.
+                    await authController.googleLogin({
+                        code: response.code,
+                        redirectUri: "postmessage"
+                    });
+                } catch (err: unknown) {
+                    console.error("Google login error:", err);
+                }
+            }
+        });
+    }, [googleClientId, authController]);
 
-            google.accounts.id.prompt();
-        } catch (err: unknown) {
-            console.error("Google login error:", err);
+    const handleClick = () => {
+        if (!codeClientRef.current) {
+            console.error("Google Sign-In not loaded");
+            return;
         }
+        codeClientRef.current.requestCode();
     };
 
     return (
-        <Button
+        <LoginButton
             disabled={disabled}
-            className="w-full"
-            variant="outlined"
-            size="large"
-            onClick={handleGoogleLogin}>
-            <div className="flex items-center justify-center w-full gap-3 py-1">
-                <svg viewBox="0 0 24 24" width="20" height="20">
-                    <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"/>
-                    <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"/>
-                    <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"/>
-                    <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"/>
-                </svg>
-                <Typography variant="button">Continue with Google</Typography>
-            </div>
-        </Button>
+            text="Sign in with Google"
+            icon={<GoogleIcon/>}
+            onClick={handleClick}
+        />
     );
 }
 
@@ -518,6 +547,7 @@ function LoginForm({
             <LoadingButton
                 type="submit"
                 variant="filled"
+                color="primary"
                 className="w-full mt-1"
                 size="large"
                 loading={authController.authLoading}
@@ -681,6 +711,7 @@ function ForgotPasswordForm({
             <LoadingButton
                 type="submit"
                 variant="filled"
+                color="primary"
                 className="w-full"
                 size="large"
                 loading={authController.authLoading}

package/src/hooks/useBackendUserManagement.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Role, User } from "@rebasepro/types";
 
 /**
@@ -135,6 +135,14 @@ export function useBackendUserManagement(config: BackendUserManagementConfig): U
     const [usersError, setUsersError] = useState<Error | undefined>();
     const [rolesError, setRolesError] = useState<Error | undefined>();
 
+    // Tracks the UID for which roles+users were last successfully loaded.
+    // Prevents redundant refetches on React StrictMode double-mounts.
+    const lastLoadedUidRef = useRef<string | null>(null);
+
+    // Ref to hold the latest apiRequest so the initial-load effect doesn't
+    // re-trigger every time the callback identity changes.
+    const apiRequestRef = useRef<typeof apiRequest | null>(null);
+
     /**
      * Make authenticated API request
      */
@@ -226,6 +234,9 @@ export function useBackendUserManagement(config: BackendUserManagementConfig): U
         throw lastError;
     }, [apiUrl, getAuthToken]);
 
+    // Keep the ref in sync after every render.
+    apiRequestRef.current = apiRequest;
+
     /**
      * Load roles from API
      */
@@ -260,7 +271,11 @@ export function useBackendUserManagement(config: BackendUserManagementConfig): U
 
     /**
      * Initial data load - only when user is logged in
-     * Load roles first, then admin users
+     * Load roles first, then admin users.
+     *
+     * Dependencies are intentionally limited to `currentUser?.uid` so the
+     * effect does NOT re-run when callback identities change.  The latest
+     * `apiRequest` is read via `apiRequestRef`.
      */
     useEffect(() => {
         // Don't load if no user is logged in
@@ -269,27 +284,56 @@ export function useBackendUserManagement(config: BackendUserManagementConfig): U
             return;
         }
 
+        // Skip refetch if we already loaded data for this same UID
+        // (e.g. React StrictMode unmounts and re-mounts with the same user).
+        if (lastLoadedUidRef.current === currentUser.uid) {
+            setLoading(false);
+            return;
+        }
+
         const abortController = new AbortController();
 
         const load = async () => {
             setLoading(true);
+            const request = apiRequestRef.current!;
+
             // Load roles first
             try {
-                const data = await apiRequest("/roles", "GET", undefined, 6, abortController.signal);
+                const data = await request("/roles", "GET", undefined, 6, abortController.signal);
                 setRoles(data.roles.map(convertRole));
                 setRolesError(undefined);
             } catch (error: unknown) {
-                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)));
+
+                // If the error is a permission issue (e.g. 403), skip loading
+                // users — they will fail with the same error and we'd show a
+                // duplicate snackbar / error message.
+                const status = (error as { status?: number }).status;
+                if (status === 403 || status === 401) {
+                    setUsersError(error instanceof Error ? error : new Error(String(error)));
+                    setLoading(false);
+                    return;
                 }
             }
+
             // Then load all users if not aborted
             if (!abortController.signal.aborted) {
-                await loadUsers(abortController.signal);
+                try {
+                    const data = await request("/users", "GET", undefined, 6, abortController.signal);
+                    const allUsers: User[] = data.users.map((u: ApiUser) => convertUser(u));
+                    setUsers(allUsers);
+                    setUsersError(undefined);
+                } catch (error: unknown) {
+                    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);
             }
         };
@@ -298,7 +342,8 @@ export function useBackendUserManagement(config: BackendUserManagementConfig): U
         return () => {
             abortController.abort();
         };
-    }, [currentUser, apiRequest, loadUsers]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentUser?.uid]);
 
     /**
      * Search users with server-side pagination.

package/src/hooks/useRebaseAuthController.ts

@@ -306,6 +306,7 @@ export function useRebaseAuthController(
 
     // Handle successful authentication
     const handleAuthSuccess = useCallback(async (userInfo: UserInfo, tokens: AuthTokens) => {
+        console.log("[Auth] handleAuthSuccess called, user:", userInfo.email, "uid:", userInfo.uid);
         tokensRef.current = tokens;
         let convertedUser = convertToUser(userInfo);
 
@@ -321,11 +322,13 @@ roles: customRoles.map(r => r.id) };
         // Save to localStorage for persistence
         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]);
 
     // Email/password login
@@ -360,13 +363,18 @@ roles: customRoles.map(r => r.id) };
         }
     }, [handleAuthSuccess]);
 
-    // Google login with ID token
-    const googleLogin = useCallback(async (idToken: string) => {
+    // Google login — supports legacy (token, tokenType) and code-flow payload
+    const googleLogin = useCallback(async (
+        tokenOrPayload: string | { code: string; redirectUri: string },
+        tokenType?: "idToken" | "accessToken"
+    ) => {
         setAuthLoading(true);
         setAuthProviderError(null);
 
         try {
-            const response = await authApi.googleLogin(idToken);
+            const response = typeof tokenOrPayload === "string"
+                ? await authApi.googleLogin(tokenOrPayload, tokenType ?? "idToken")
+                : await authApi.googleLogin(tokenOrPayload);
             await handleAuthSuccess(response.user, response.tokens);
         } catch (error: unknown) {
             setAuthProviderError(error as Error);

package/src/types.ts

@@ -5,8 +5,11 @@ import { AuthController, Role, User } from "@rebasepro/types";
  * with additional methods for email/password and Google login
  */
 export type RebaseAuthController = AuthController & {
-    /** Login with Google ID token from frontend Google Sign-In */
-    googleLogin: (idToken: string) => Promise<void>;
+    /** Login with Google — accepts legacy (token, tokenType) or code-flow payload */
+    googleLogin: {
+        (token: string, tokenType?: "idToken" | "accessToken"): Promise<void>;
+        (payload: { code: string; redirectUri: string }): Promise<void>;
+    };
     /** Generic OAuth login — works with any provider. Posts payload to /auth/{providerId}. */
     oauthLogin: (providerId: string, payload: Record<string, unknown>) => Promise<void>;
     /** Login with email and password */