@firecms/user_management 3.0.0-canary.144 → 3.0.0-canary.145

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-canary.144",
+  "version": "3.0.0-canary.145",
   "publishConfig": {
     "access": "public"
   },
@@ -29,9 +29,9 @@
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/core": "^3.0.0-canary.144",
-    "@firecms/formex": "^3.0.0-canary.144",
-    "@firecms/ui": "^3.0.0-canary.144",
+    "@firecms/core": "^3.0.0-canary.145",
+    "@firecms/formex": "^3.0.0-canary.145",
+    "@firecms/ui": "^3.0.0-canary.145",
     "date-fns": "^3.6.0"
   },
   "peerDependencies": {
@@ -55,5 +55,5 @@
     "src",
     "bin"
   ],
-  "gitHead": "8f862289db623ffd350e61e4ab4a06957ed97bdf"
+  "gitHead": "e5d660f00c5806e1b63839c013af3c973f3dd47e"
 }

package/src/components/roles/RolesDetailsForm.tsx

@@ -32,6 +32,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");
     }

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,13 @@ 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>,
+    USER extends User = CONTROLLER extends AuthController<infer U> ? U : any>
+     {
+
+    authController: CONTROLLER;
 
     /**
      * The delegate in charge of persisting the data.
@@ -62,6 +67,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 +76,45 @@ 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, USER>): UserManagement<USER> & CONTROLLER {
 
     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 +123,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,25 +141,31 @@ 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;
         }
+        // if (authController.user === null) {
+        //     setUsersLoading(false);
+        //     return;
+        // }
 
         setUsersLoading(true);
         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 +174,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 +258,61 @@ 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]);
+    }, [roles, usersWithRoleIds]);
 
-    const authenticator: Authenticator = useCallback(({ user }) => {
-        console.debug("Authenticating user", user);
+    console.debug({
+        loading,
+        users,
+        usersError
+    });
 
+    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]);
-
-    const isAdmin = roles.some(r => r.id === "admin");
+    }, [loading, users]);
+
+    const userRoles = authController.user ? defineRolesFor(authController.user) : undefined;
+    const isAdmin = (userRoles ?? []).some(r => r.id === "admin");
+
+    // console.log("Setting roles", {
+    //     user: authController.user,
+    //     userRoles
+    // });
+    // useEffect(() => {
+    //     console.debug("Setting roles", {
+    //         authController,
+    //         userRoles
+    //     });
+    //     authController.setUserRoles?.(userRoles ?? []);
+    // }, [userRoles?.map(r => r.id)]);
 
     return {
         loading,
@@ -289,7 +331,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;