@firecms/user_management 3.0.0-beta.10 → 3.0.0-beta.11

package/dist/types/user_management.d.ts

@@ -1,5 +1,6 @@
 import { Authenticator, PermissionsBuilder, Role, User } from "@firecms/core";
 export type UserManagement<USER extends User = User> = {
+    authenticator?: Authenticator<USER>;
     loading: boolean;
     users: USER[];
     saveUser: (user: USER) => Promise<USER>;
@@ -37,11 +38,6 @@ export type UserManagement<USER extends User = User> = {
      * @param user
      */
     defineRolesFor: (user: User) => Promise<Role[] | undefined> | Role[] | undefined;
-    /**
-     * You can build an authenticator callback from the current configuration of the user management.
-     * It will only allow access to users with the required roles.
-     */
-    authenticator?: Authenticator;
     rolesError?: Error;
     usersError?: Error;
 };

package/dist/useUserManagementPlugin.d.ts

@@ -1,10 +1,10 @@
-import { FireCMSPlugin } from "@firecms/core";
-import { PersistedUser, UserManagement } from "./types";
-export declare function useUserManagementPlugin({ userManagement }: {
-    userManagement: UserManagement;
+import { FireCMSPlugin, User } from "@firecms/core";
+import { UserManagement } from "./types";
+export declare function useUserManagementPlugin<USER extends User = any>({ userManagement }: {
+    userManagement: UserManagement<USER>;
 }): FireCMSPlugin;
 export declare function IntroWidget({ noUsers, noRoles, userManagement }: {
     noUsers: boolean;
     noRoles: boolean;
-    userManagement: UserManagement<PersistedUser>;
+    userManagement: UserManagement<any>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/utils/permissions.d.ts

@@ -1,8 +1,8 @@
 import { EntityCollection, Permissions, Role, User } from "@firecms/core";
 export declare const RESERVED_GROUPS: string[];
-export declare function resolveUserRolePermissions<UserType extends User>({ collection, user }: {
+export declare function resolveUserRolePermissions<USER extends User>({ collection, user }: {
     collection: EntityCollection<any>;
-    user: UserType | null;
+    user: USER | null;
 }): Permissions;
 export declare function getUserRoles(roles: Role[], fireCMSUser: User): Role[] | undefined;
 export declare const areRolesEqual: (rolesA: Role[], rolesB: Role[]) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/user_management",
   "type": "module",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -29,9 +29,9 @@
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/core": "^3.0.0-beta.10",
-    "@firecms/formex": "^3.0.0-beta.10",
-    "@firecms/ui": "^3.0.0-beta.10",
+    "@firecms/core": "^3.0.0-beta.11",
+    "@firecms/formex": "^3.0.0-beta.11",
+    "@firecms/ui": "^3.0.0-beta.11",
     "date-fns": "^3.6.0"
   },
   "peerDependencies": {
@@ -39,11 +39,13 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20.16.11",
+    "@types/node": "^20.17.9",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8"
+    "@types/react-dom": "^18.3.1",
+    "babel-plugin-react-compiler": "beta",
+    "eslint-plugin-react-compiler": "beta",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11"
   },
   "scripts": {
     "dev": "vite",
@@ -55,5 +57,5 @@
     "src",
     "bin"
   ],
-  "gitHead": "f844c3f86094efec6c33313c3f106f30cdcd309f"
+  "gitHead": "cb6d419faf2664cfd6cb2603a834e4bf499a92bb"
 }

package/src/components/roles/RolesDetailsForm.tsx

@@ -5,10 +5,11 @@ import { EntityCollection, FieldCaption, Role, toSnakeCase, useAuthController, U
 import {
     Button,
     Checkbox,
+    CheckIcon,
     Dialog,
     DialogActions,
     DialogContent,
-    DoneIcon,
+    DialogTitle,
     LoadingButton,
     Paper,
     Select,
@@ -32,6 +33,7 @@ export const RoleYupSchema = Yup.object().shape({
 
 function canRoleBeEdited(loggedUser: User) {
     const loggedUserIsAdmin = loggedUser.roles?.map(r => r.id).includes("admin");
+    console.log("loggedUserIsAdmin", loggedUser);
     if (!loggedUserIsAdmin) {
         throw new Error("Only admins can edit roles");
     }
@@ -142,14 +144,10 @@ export function RolesDetailsForm({
                           position: "relative",
                           height: "100%"
                       }}>
+                    <DialogTitle variant={"h4"} gutterBottom={false}>
+                        Role
+                    </DialogTitle>
                     <DialogContent className="flex-grow">
-                        <div
-                            className="flex flex-row pt-12 pb-8">
-                            <Typography variant={"h4"}
-                                        className="flex-grow">
-                                Role
-                            </Typography>
-                        </div>
 
                         <div className={"grid grid-cols-12 gap-8"}>
 
@@ -341,6 +339,8 @@ export function RolesDetailsForm({
                             <div className={"col-span-12 md:col-span-4"}>
                                 <Select
                                     error={touched.config && Boolean(errors.config)}
+                                    size={"large"}
+                                    fullWidth={true}
                                     id="createCollections"
                                     name="createCollections"
                                     label="Create collections"
@@ -363,6 +363,8 @@ export function RolesDetailsForm({
 
                             <div className={"col-span-12 md:col-span-4"}>
                                 <Select
+                                    size={"large"}
+                                    fullWidth={true}
                                     error={touched.config && Boolean(errors.config)}
                                     id="editCollections"
                                     name="editCollections"
@@ -389,6 +391,8 @@ export function RolesDetailsForm({
 
                             <div className={"col-span-12 md:col-span-4"}>
                                 <Select
+                                    size={"large"}
+                                    fullWidth={true}
                                     error={touched.config && Boolean(errors.config)}
                                     id="deleteCollections"
                                     name="deleteCollections"
@@ -433,7 +437,7 @@ export function RolesDetailsForm({
                             type="submit"
                             disabled={!dirty}
                             loading={isSubmitting}
-                            startIcon={<DoneIcon/>}
+                            startIcon={<CheckIcon/>}
                         >
                             {isNewRole ? "Create role" : "Update"}
                         </LoadingButton>

package/src/components/users/UserDetailsForm.tsx

@@ -2,15 +2,15 @@ import React, { useCallback } from "react";
 import * as Yup from "yup";
 import {
     Button,
+    CheckIcon,
     Dialog,
     DialogActions,
     DialogContent,
-    DoneIcon,
+    DialogTitle,
     LoadingButton,
     MultiSelect,
     MultiSelectItem,
     TextField,
-    Typography,
 } from "@firecms/ui";
 import { FieldCaption, Role, useAuthController, User, useSnackbarController } from "@firecms/core";
 import { Formex, useCreateFormex } from "@firecms/formex";
@@ -140,14 +140,11 @@ export function UserDetailsForm({
                         position: "relative",
                         height: "100%"
                     }}>
+
+                    <DialogTitle variant={"h4"} gutterBottom={false}>
+                        User
+                    </DialogTitle>
                     <DialogContent className="h-full flex-grow">
-                        <div
-                            className="flex flex-row pt-4 pb-4">
-                            <Typography variant={"h4"}
-                                        className="flex-grow">
-                                User
-                            </Typography>
-                        </div>
 
                         <div className={"grid grid-cols-12 gap-8"}>
 
@@ -220,7 +217,7 @@ export function UserDetailsForm({
                             type="submit"
                             disabled={!dirty}
                             loading={isSubmitting}
-                            startIcon={<DoneIcon/>}
+                            startIcon={<CheckIcon/>}
                         >
                             {isNewUser ? "Create user" : "Update"}
                         </LoadingButton>

package/src/components/users/UsersTable.tsx

@@ -54,7 +54,6 @@ export function UsersTable({ onUserClicked }: {
 
                 <TableHeader>
                     <TableCell className="truncate w-16"></TableCell>
-                    <TableCell>ID</TableCell>
                     <TableCell>Email</TableCell>
                     <TableCell>Name</TableCell>
                     <TableCell>Roles</TableCell>
@@ -88,7 +87,6 @@ export function UsersTable({ onUserClicked }: {
                                         </IconButton>
                                     </Tooltip>
                                 </TableCell>
-                                <TableCell>{user.uid}</TableCell>
                                 <TableCell>{user.email}</TableCell>
                                 <TableCell className={"font-medium align-left"}>{user.displayName}</TableCell>
                                 <TableCell className="align-left">

package/src/hooks/useBuildUserManagement.tsx

@@ -3,6 +3,7 @@ import equal from "react-fast-compare"
 
 import { UserManagement } from "../types";
 import {
+    AuthController,
     Authenticator,
     DataSourceDelegate,
     Entity,
@@ -13,9 +14,11 @@ import {
 } from "@firecms/core";
 import { resolveUserRolePermissions } from "../utils";
 
-type UserWithRoleIds = Omit<User, "roles"> & { roles: string[] };
+type UserWithRoleIds<USER extends User = any> = Omit<USER, "roles"> & { roles: string[] };
 
-export interface UserManagementParams {
+export interface UserManagementParams<CONTROLLER extends AuthController<any> = AuthController<any>> {
+
+    authController: CONTROLLER;
 
     /**
      * The delegate in charge of persisting the data.
@@ -62,6 +65,7 @@ export interface UserManagementParams {
 /**
  * This hook is used to build a user management object that can be used to
  * manage users and roles in a Firestore backend.
+ * @param authController
  * @param dataSourceDelegate
  * @param usersPath
  * @param rolesPath
@@ -70,38 +74,49 @@ export interface UserManagementParams {
  * @param allowDefaultRolesCreation
  * @param includeCollectionConfigPermissions
  */
-export function useBuildUserManagement({
-                                           dataSourceDelegate,
-                                           usersPath = "__FIRECMS/config/users",
-                                           rolesPath = "__FIRECMS/config/roles",
-                                           usersLimit,
-                                           canEditRoles = true,
-                                           allowDefaultRolesCreation,
-                                           includeCollectionConfigPermissions
-                                       }: UserManagementParams): UserManagement {
+export function useBuildUserManagement<CONTROLLER extends AuthController<any> = AuthController<any>,
+    USER extends User = CONTROLLER extends AuthController<infer U> ? U : any>
+({
+     authController,
+     dataSourceDelegate,
+     usersPath = "__FIRECMS/config/users",
+     rolesPath = "__FIRECMS/config/roles",
+     usersLimit,
+     canEditRoles = true,
+     allowDefaultRolesCreation,
+     includeCollectionConfigPermissions
+ }: UserManagementParams<CONTROLLER>): UserManagement<USER> & CONTROLLER {
+
+    if (!authController) {
+        throw Error("useBuildUserManagement: You need to provide an authController since version 3.0.0-beta.11. Check https://firecms.co/docs/pro/migrating_from_v3_beta");
+    }
 
     const [rolesLoading, setRolesLoading] = React.useState<boolean>(true);
     const [usersLoading, setUsersLoading] = React.useState<boolean>(true);
     const [roles, setRoles] = React.useState<Role[]>([]);
-    const [usersWithRoleIds, setUsersWithRoleIds] = React.useState<UserWithRoleIds[]>([]);
+    const [usersWithRoleIds, setUsersWithRoleIds] = React.useState<UserWithRoleIds<USER>[]>([]);
 
     const users = usersWithRoleIds.map(u => ({
         ...u,
         roles: roles.filter(r => u.roles?.includes(r.id))
-    }) as User);
+    }) as USER);
 
     const [rolesError, setRolesError] = React.useState<Error | undefined>();
     const [usersError, setUsersError] = React.useState<Error | undefined>();
 
-    const loading = rolesLoading || usersLoading;
+    const _usersLoading = usersLoading;
+    const _rolesLoading = rolesLoading;
+
+    const loading = _rolesLoading || _usersLoading;
 
     useEffect(() => {
         if (!dataSourceDelegate || !rolesPath) return;
         if (dataSourceDelegate.initialised !== undefined && !dataSourceDelegate.initialised) return;
-        if (dataSourceDelegate.authenticated !== undefined && !dataSourceDelegate.authenticated) {
-            setRolesLoading(false);
-            return;
-        }
+        if (authController?.initialLoading) return;
+        // if (authController.user === null) {
+        //     setRolesLoading(false);
+        //     return;
+        // }
 
         setRolesLoading(true);
         return dataSourceDelegate.listenCollection?.({
@@ -110,8 +125,9 @@ export function useBuildUserManagement({
                 setRolesError(undefined);
                 try {
                     const newRoles = entityToRoles(entities);
-                    if (!equal(newRoles, roles))
+                    if (!equal(newRoles, roles)) {
                         setRoles(newRoles);
+                    }
                 } catch (e) {
                     setRoles([]);
                     console.error("Error loading roles", e);
@@ -127,13 +143,14 @@ export function useBuildUserManagement({
             }
         });
 
-    }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, rolesPath]);
+    }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, rolesPath]);
 
     useEffect(() => {
         if (!dataSourceDelegate || !usersPath) return;
-        if (dataSourceDelegate.initialised !== undefined && !dataSourceDelegate.initialised) return;
-        if (dataSourceDelegate.authenticated !== undefined && !dataSourceDelegate.authenticated) {
-            setUsersLoading(false);
+        if (dataSourceDelegate.initialised !== undefined && !dataSourceDelegate.initialised) {
+            return;
+        }
+        if (authController?.initialLoading) {
             return;
         }
 
@@ -141,11 +158,12 @@ export function useBuildUserManagement({
         return dataSourceDelegate.listenCollection?.({
             path: usersPath,
             onUpdate(entities: Entity<any>[]): void {
+                console.debug("Updating users", entities);
                 setUsersError(undefined);
                 try {
                     const newUsers = entitiesToUsers(entities);
-                    if (!equal(newUsers, usersWithRoleIds))
-                        setUsersWithRoleIds(newUsers);
+                    // if (!equal(newUsers, usersWithRoleIds))
+                    setUsersWithRoleIds(newUsers);
                 } catch (e) {
                     setUsersWithRoleIds([]);
                     console.error("Error loading users", e);
@@ -154,16 +172,16 @@ export function useBuildUserManagement({
                 setUsersLoading(false);
             },
             onError(e: any): void {
-                setUsersWithRoleIds([]);
                 console.error("Error loading users", e);
+                setUsersWithRoleIds([]);
                 setUsersError(e);
                 setUsersLoading(false);
             }
         });
 
-    }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, usersPath]);
+    }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, usersPath]);
 
-    const saveUser = useCallback(async (user: User): Promise<User> => {
+    const saveUser = useCallback(async (user: USER): Promise<USER> => {
         if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
         if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
 
@@ -238,39 +256,49 @@ export function useBuildUserManagement({
     const collectionPermissions: PermissionsBuilder = useCallback(({
                                                                        collection,
                                                                        user
-                                                                   }) => resolveUserRolePermissions({
-        collection,
-        user
-    }), []);
+                                                                   }) =>
+        resolveUserRolePermissions({
+            collection,
+            user
+        }), []);
 
     const defineRolesFor: ((user: User) => Role[] | undefined) = useCallback((user) => {
-        if (!users) throw Error("Users not loaded");
+        if (!usersWithRoleIds) throw Error("Users not loaded");
+        const users = usersWithRoleIds.map(u => ({
+            ...u,
+            roles: roles.filter(r => u.roles?.includes(r.id))
+        }) as User);
         const mgmtUser = users.find(u => u.email?.toLowerCase() === user?.email?.toLowerCase());
         return mgmtUser?.roles;
-    }, [users]);
-
-    const authenticator: Authenticator = useCallback(({ user }) => {
-        console.debug("Authenticating user", user);
+    }, [roles, usersWithRoleIds]);
 
+    const authenticator: Authenticator<USER> = useCallback(({ user }) => {
         if (loading) {
-            console.warn("User management is still loading");
             return false;
         }
 
-        // This is an example of how you can link the access system to the user management plugin
         if (users.length === 0) {
+            console.warn("No users created yet");
             return true; // If there are no users created yet, we allow access to every user
         }
 
         const mgmtUser = users.find(u => u.email?.toLowerCase() === user?.email?.toLowerCase());
         if (mgmtUser) {
+            console.debug("User found in user management system", mgmtUser);
             return true;
         }
 
         throw Error("Could not find a user with the provided email in the user management system.");
-    }, [loading, users, usersError, rolesError]);
+    }, [loading, users]);
+
+    const userRoles = authController.user ? defineRolesFor(authController.user) : undefined;
+    const isAdmin = (userRoles ?? []).some(r => r.id === "admin");
 
-    const isAdmin = roles.some(r => r.id === "admin");
+    const userRoleIds = userRoles?.map(r => r.id);
+    useEffect(() => {
+        console.debug("Setting roles", userRoles);
+        authController.setUserRoles?.(userRoles ?? []);
+    }, [userRoleIds]);
 
     return {
         loading,
@@ -289,7 +317,14 @@ export function useBuildUserManagement({
         includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
         collectionPermissions,
         defineRolesFor,
-        authenticator
+        authenticator,
+        ...authController,
+        initialLoading: authController.initialLoading || loading,
+        userRoles: userRoles,
+        user: authController.user ? {
+            ...authController.user,
+            roles: userRoles
+        } : null
     }
 }
 

package/src/types/user_management.tsx

@@ -2,6 +2,8 @@ import { Authenticator, PermissionsBuilder, Role, User } from "@firecms/core";
 
 export type UserManagement<USER extends User = User> = {
 
+    authenticator?: Authenticator<USER>;
+
     loading: boolean;
 
     users: USER[];
@@ -49,12 +51,6 @@ export type UserManagement<USER extends User = User> = {
      */
     defineRolesFor: (user: User) => Promise<Role[] | undefined> | Role[] | undefined;
 
-    /**
-     * You can build an authenticator callback from the current configuration of the user management.
-     * It will only allow access to users with the required roles.
-     */
-    authenticator?: Authenticator;
-
     rolesError?: Error;
     usersError?: Error;
 

package/src/useUserManagementPlugin.tsx

@@ -1,11 +1,11 @@
-import { FireCMSPlugin, useAuthController, useSnackbarController } from "@firecms/core";
+import { FireCMSPlugin, useAuthController, User, useSnackbarController } from "@firecms/core";
 import { UserManagementProvider } from "./UserManagementProvider";
-import { PersistedUser, UserManagement } from "./types";
+import { UserManagement } from "./types";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { DEFAULT_ROLES } from "./components/roles/default_roles";
 
-export function useUserManagementPlugin({ userManagement }: {
-    userManagement: UserManagement,
+export function useUserManagementPlugin<USER extends User = any>({ userManagement }: {
+    userManagement: UserManagement<USER>,
 }): FireCMSPlugin {
 
     const noUsers = userManagement.users.length === 0;
@@ -39,7 +39,7 @@ export function IntroWidget({
                             }: {
     noUsers: boolean;
     noRoles: boolean;
-    userManagement: UserManagement<PersistedUser>;
+    userManagement: UserManagement<any>;
 }) {
 
     const authController = useAuthController();
@@ -53,7 +53,7 @@ export function IntroWidget({
 
     return (
         <Paper
-            className={"my-4 flex flex-col px-4 py-6 bg-white dark:bg-slate-800 gap-2"}>
+            className={"my-4 flex flex-col px-4 py-6 bg-white dark:bg-surface-accent-800 gap-2"}>
             <Typography variant={"subtitle2"} className={"uppercase"}>Create your users and roles</Typography>
             <Typography>
                 You have no users or roles defined. You can create default roles and add the current user as admin.

package/src/utils/permissions.ts

@@ -9,13 +9,13 @@ const DEFAULT_PERMISSIONS = {
     delete: false
 };
 
-export function resolveUserRolePermissions<UserType extends User>
+export function resolveUserRolePermissions<USER extends User>
 ({
      collection,
      user
  }: {
     collection: EntityCollection<any>,
-    user: UserType | null
+    user: USER | null
 }): Permissions {
 
     const roles = user?.roles;