@rebasepro/auth 0.0.1-canary.f81da60 → 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 token (ID token from One Tap, or access token from popup) */
-    googleLogin: (token: string, tokenType?: "idToken" | "accessToken") => 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.f81da60",
+  "version": "0.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -11,9 +11,9 @@
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@rebasepro/core": "0.0.1-canary.f81da60",
-    "@rebasepro/ui": "0.0.1-canary.f81da60",
-    "@rebasepro/types": "0.0.1-canary.f81da60"
+    "@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 token (ID token or access token)
+ * Google login payload — one of the three supported flows.
  */
-export async function googleLogin(token: string, tokenType: "idToken" | "accessToken" = "idToken"): 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({ [tokenType]: token })
+        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}/>
         }
@@ -153,7 +151,7 @@ message: error instanceof Error ? error.message : "Error deleting user" });
     return (
         <Container className="w-full flex flex-col py-4 gap-4" maxWidth={"6xl"}>
             {/* Bootstrap warning when no admins */}
-            {!hasAdmin && !usersError && loggedInUser && (
+            {!hasAdmin && loggedInUser && (
                 <div className="bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-700 rounded p-4 flex items-center justify-between">
                     <div>
                         <Typography variant="label" className="text-yellow-800 dark:text-yellow-200">

package/src/components/RebaseLoginView.tsx

@@ -213,15 +213,21 @@ export function RebaseLoginView({
                                         />
                                     )}
                                     {showRegistration && (
-                                        <Button
-                                            className="w-full"
-                                            variant="filled"
-                                            color="primary"
-                                            size="large"
-                                            onClick={() => switchMode("register")}
-                                        >
-                                            Create an account
-                                        </Button>
+                                        <div className="mt-2 text-center">
+                                            <Typography variant="body2" color="secondary">
+                                                Don&apos;t have an account?{" "}
+                                                <button
+                                                    type="button"
+                                                    className={cls(
+                                                        "font-semibold hover:underline cursor-pointer",
+                                                        "text-primary-600 dark:text-primary-400"
+                                                    )}
+                                                    onClick={() => switchMode("register")}
+                                                >
+                                                    Create one
+                                                </button>
+                                            </Typography>
+                                        </div>
                                     )}
                                 </div>
                             )}
@@ -303,6 +309,24 @@ const GoogleIcon = () => (
     </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,
@@ -312,22 +336,28 @@ function GoogleLoginButton({
     googleClientId: string,
     authController: RebaseAuthController
 }) {
-    const tokenClientRef = useRef<any>(null);
+    const codeClientRef = useRef<{ requestCode(): void } | null>(null);
 
     useEffect(() => {
-        const google = (window as any).google;
-        if (!google || tokenClientRef.current) return;
+        const google = window.google;
+        if (!google || codeClientRef.current) return;
 
-        tokenClientRef.current = google.accounts.oauth2.initTokenClient({
+        codeClientRef.current = google.accounts.oauth2.initCodeClient({
             client_id: googleClientId,
             scope: "openid email profile",
-            callback: async (response: { access_token?: string; error?: string }) => {
-                if (response.error || !response.access_token) {
+            ux_mode: "popup",
+            callback: async (response: { code?: string; error?: string }) => {
+                if (response.error || !response.code) {
                     console.error("Google login error:", response.error);
                     return;
                 }
                 try {
-                    await authController.googleLogin(response.access_token, "accessToken");
+                    // 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);
                 }
@@ -336,11 +366,11 @@ function GoogleLoginButton({
     }, [googleClientId, authController]);
 
     const handleClick = () => {
-        if (!tokenClientRef.current) {
+        if (!codeClientRef.current) {
             console.error("Google Sign-In not loaded");
             return;
         }
-        tokenClientRef.current.requestAccessToken();
+        codeClientRef.current.requestCode();
     };
 
     return (

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 or access token
-    const googleLogin = useCallback(async (token: string, tokenType: "idToken" | "accessToken" = "idToken") => {
+    // 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(token, tokenType);
+            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 token (ID token from One Tap, or access token from popup) */
-    googleLogin: (token: string, tokenType?: "idToken" | "accessToken") => 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 */