@firecms/user_management 3.0.0-3.0.0-canary.44.0 → 3.0.0-beta.10

package/src/hooks/useBuildUserManagement.tsx

@@ -0,0 +1,314 @@
+import React, { useCallback, useEffect } from "react";
+import equal from "react-fast-compare"
+
+import { UserManagement } from "../types";
+import {
+    Authenticator,
+    DataSourceDelegate,
+    Entity,
+    PermissionsBuilder,
+    removeUndefined,
+    Role,
+    User
+} from "@firecms/core";
+import { resolveUserRolePermissions } from "../utils";
+
+type UserWithRoleIds = Omit<User, "roles"> & { roles: string[] };
+
+export interface UserManagementParams {
+
+    /**
+     * The delegate in charge of persisting the data.
+     */
+    dataSourceDelegate?: DataSourceDelegate;
+
+    /**
+     * Path where the plugin users configuration is stored.
+     * Default: __FIRECMS/config/users
+     * You can specify a different path if you want to store the user management configuration in a different place.
+     * Please keep in mind that the FireCMS users are not necessarily the same as the Firebase users (but they can be).
+     * The path should be relative to the root of the database, and should always have an odd number of segments.
+     */
+    usersPath?: string;
+
+    /**
+     * Path where the plugin roles configuration is stored.
+     * Default: __FIRECMS/config/roles
+     */
+    rolesPath?: string;
+
+    /**
+     * Maximum number of users that can be created.
+     */
+    usersLimit?: number;
+
+    /**
+     * Can the logged user edit roles
+     */
+    canEditRoles?: boolean;
+
+    /**
+     * If there are no roles in the database, provide a button to create the default roles.
+     */
+    allowDefaultRolesCreation?: boolean;
+
+    /**
+     * Include the collection config permissions in the user management system.
+     */
+    includeCollectionConfigPermissions?: boolean;
+
+}
+
+/**
+ * This hook is used to build a user management object that can be used to
+ * manage users and roles in a Firestore backend.
+ * @param dataSourceDelegate
+ * @param usersPath
+ * @param rolesPath
+ * @param usersLimit
+ * @param canEditRoles
+ * @param allowDefaultRolesCreation
+ * @param includeCollectionConfigPermissions
+ */
+export function useBuildUserManagement({
+                                           dataSourceDelegate,
+                                           usersPath = "__FIRECMS/config/users",
+                                           rolesPath = "__FIRECMS/config/roles",
+                                           usersLimit,
+                                           canEditRoles = true,
+                                           allowDefaultRolesCreation,
+                                           includeCollectionConfigPermissions
+                                       }: UserManagementParams): UserManagement {
+
+    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 users = usersWithRoleIds.map(u => ({
+        ...u,
+        roles: roles.filter(r => u.roles?.includes(r.id))
+    }) as User);
+
+    const [rolesError, setRolesError] = React.useState<Error | undefined>();
+    const [usersError, setUsersError] = React.useState<Error | undefined>();
+
+    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;
+        }
+
+        setRolesLoading(true);
+        return dataSourceDelegate.listenCollection?.({
+            path: rolesPath,
+            onUpdate(entities: Entity<any>[]): void {
+                setRolesError(undefined);
+                try {
+                    const newRoles = entityToRoles(entities);
+                    if (!equal(newRoles, roles))
+                        setRoles(newRoles);
+                } catch (e) {
+                    setRoles([]);
+                    console.error("Error loading roles", e);
+                    setRolesError(e as Error);
+                }
+                setRolesLoading(false);
+            },
+            onError(e: any): void {
+                setRoles([]);
+                console.error("Error loading roles", e);
+                setRolesError(e);
+                setRolesLoading(false);
+            }
+        });
+
+    }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, rolesPath]);
+
+    useEffect(() => {
+        if (!dataSourceDelegate || !usersPath) return;
+        if (dataSourceDelegate.initialised !== undefined && !dataSourceDelegate.initialised) return;
+        if (dataSourceDelegate.authenticated !== undefined && !dataSourceDelegate.authenticated) {
+            setUsersLoading(false);
+            return;
+        }
+
+        setUsersLoading(true);
+        return dataSourceDelegate.listenCollection?.({
+            path: usersPath,
+            onUpdate(entities: Entity<any>[]): void {
+                setUsersError(undefined);
+                try {
+                    const newUsers = entitiesToUsers(entities);
+                    if (!equal(newUsers, usersWithRoleIds))
+                        setUsersWithRoleIds(newUsers);
+                } catch (e) {
+                    setUsersWithRoleIds([]);
+                    console.error("Error loading users", e);
+                    setUsersError(e as Error);
+                }
+                setUsersLoading(false);
+            },
+            onError(e: any): void {
+                setUsersWithRoleIds([]);
+                console.error("Error loading users", e);
+                setUsersError(e);
+                setUsersLoading(false);
+            }
+        });
+
+    }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, usersPath]);
+
+    const saveUser = useCallback(async (user: User): Promise<User> => {
+        if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+        if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+
+        console.debug("Persisting user", user);
+
+        const roleIds = user.roles?.map(r => r.id);
+        const email = user.email?.toLowerCase().trim();
+        if (!email) throw Error("Email is required");
+
+        const userExists = users.find(u => u.email?.toLowerCase() === email);
+        const data = {
+            ...user,
+            roles: roleIds ?? []
+        };
+        if (!userExists) {
+            // @ts-ignore
+            data.created_on = new Date();
+        }
+
+        return dataSourceDelegate.saveEntity({
+            status: "existing",
+            path: usersPath,
+            entityId: email,
+            values: removeUndefined(data)
+        }).then(() => user);
+    }, [usersPath, dataSourceDelegate?.initialised]);
+
+    const saveRole = useCallback((role: Role): Promise<void> => {
+        if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+        if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+        console.debug("Persisting role", role);
+        const {
+            id,
+            ...roleData
+        } = role;
+        return dataSourceDelegate.saveEntity({
+            status: "existing",
+            path: rolesPath,
+            entityId: id,
+            values: removeUndefined(roleData)
+        }).then(() => {
+            return;
+        });
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+
+    const deleteUser = useCallback(async (user: User): Promise<void> => {
+        if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+        if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+        console.debug("Deleting", user);
+        const { uid } = user;
+        const entity: Entity<any> = {
+            path: usersPath,
+            id: uid,
+            values: {}
+        };
+        await dataSourceDelegate.deleteEntity({ entity })
+    }, [usersPath, dataSourceDelegate?.initialised]);
+
+    const deleteRole = useCallback(async (role: Role): Promise<void> => {
+        if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+        if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+        console.debug("Deleting", role);
+        const { id } = role;
+        const entity: Entity<any> = {
+            path: rolesPath,
+            id: id,
+            values: {}
+        };
+        await dataSourceDelegate.deleteEntity({ entity })
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+
+    const collectionPermissions: PermissionsBuilder = useCallback(({
+                                                                       collection,
+                                                                       user
+                                                                   }) => resolveUserRolePermissions({
+        collection,
+        user
+    }), []);
+
+    const defineRolesFor: ((user: User) => Role[] | undefined) = useCallback((user) => {
+        if (!users) throw Error("Users not loaded");
+        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);
+
+        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) {
+            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) {
+            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");
+
+    return {
+        loading,
+        roles,
+        users,
+        saveUser,
+        saveRole,
+        rolesError,
+        deleteUser,
+        deleteRole,
+        usersLimit,
+        usersError,
+        isAdmin,
+        canEditRoles: canEditRoles === undefined ? true : canEditRoles,
+        allowDefaultRolesCreation: allowDefaultRolesCreation === undefined ? true : allowDefaultRolesCreation,
+        includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
+        collectionPermissions,
+        defineRolesFor,
+        authenticator
+    }
+}
+
+const entitiesToUsers = (docs: Entity<Omit<UserWithRoleIds, "id">>[]): (UserWithRoleIds)[] => {
+    return docs.map((doc) => {
+        const data = doc.values as any;
+        const newVar = {
+            uid: doc.id,
+            ...data,
+            created_on: data?.created_on,
+            updated_on: data?.updated_on
+        };
+        return newVar as (UserWithRoleIds);
+    });
+}
+
+const entityToRoles = (entities: Entity<Omit<Role, "id">>[]): Role[] => {
+    return entities.map((doc) => ({
+        id: doc.id,
+        ...doc.values
+    } as Role));
+}

package/src/types/user_management.tsx

@@ -22,6 +22,11 @@ export type UserManagement<USER extends User = User> = {
      */
     canEditRoles?: boolean;
 
+    /**
+     * Is the logged user Admin?
+     */
+    isAdmin?: boolean;
+
     /**
      * Include a button to create default roles, in case there are no roles in the system.
      */

package/src/utils/permissions.ts

@@ -45,13 +45,14 @@ export function resolveUserRolePermissions<UserType extends User>
 function resolveCollectionRole(role: Role, id: string): Permissions {
 
     const basePermissions = {
-        read: role.isAdmin || role.defaultPermissions?.read,
-        create: role.isAdmin || role.defaultPermissions?.create,
-        edit: role.isAdmin || role.defaultPermissions?.edit,
-        delete: role.isAdmin || role.defaultPermissions?.delete
+        read: (role.isAdmin || role.defaultPermissions?.read) ?? false,
+        create: (role.isAdmin || role.defaultPermissions?.create) ?? false,
+        edit: (role.isAdmin || role.defaultPermissions?.edit) ?? false,
+        delete: (role.isAdmin || role.defaultPermissions?.delete) ?? false
     };
-    if (role.collectionPermissions && role.collectionPermissions[id]) {
-        return mergePermissions(role.collectionPermissions[id], basePermissions);
+    const thisCollectionPermissions = role.collectionPermissions?.[id];
+    if (thisCollectionPermissions) {
+        return mergePermissions(thisCollectionPermissions, basePermissions);
     } else if (role.defaultPermissions) {
         return mergePermissions(role.defaultPermissions, basePermissions);
     } else {

package/src/hooks/useFirestoreUserManagement.tsx

@@ -1,274 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import {
-    addDoc,
-    collection,
-    deleteDoc,
-    doc,
-    DocumentSnapshot,
-    getFirestore,
-    onSnapshot,
-    setDoc
-} from "firebase/firestore";
-import { FirebaseApp } from "firebase/app";
-import { UserManagement } from "../types";
-import { Authenticator, PermissionsBuilder, Role, User } from "@firecms/core";
-import { resolveUserRolePermissions } from "../utils";
-
-type UserWithRoleIds = User & { roles: string[] };
-
-export interface UserManagementParams {
-    /**
-     * The Firebase app to use for the user management. The config will be saved in the Firestore
-     * collection indicated by `configPath`.
-     */
-    firebaseApp?: FirebaseApp;
-    /**
-     * Path where the plugin users configuration is stored.
-     * Default: __FIRECMS/config/users
-     * You can specify a different path if you want to store the user management configuration in a different place.
-     * Please keep in mind that the FireCMS users are not necessarily the same as the Firebase users (but they can be).
-     * The path should be relative to the root of the Firestore database, and should always have an odd number of segments.
-     */
-    usersPath?: string;
-
-    /**
-     * Path where the plugin roles configuration is stored.
-     * Default: __FIRECMS/config/roles
-     */
-    rolesPath?: string;
-
-    /**
-     * Maximum number of users that can be created.
-     */
-    usersLimit?: number;
-
-    /**
-     * Can the logged user edit roles
-     */
-    canEditRoles?: boolean;
-
-    /**
-     * If there are no roles in the database, provide a button to create the default roles.
-     */
-    allowDefaultRolesCreation?: boolean;
-
-    /**
-     * Include the collection config permissions in the user management system.
-     */
-    includeCollectionConfigPermissions?: boolean;
-
-}
-
-/**
- * This hook is used to build a user management object that can be used to
- * manage users and roles in a Firestore backend.
- * @param backendFirebaseApp
- * @param usersPath
- * @param rolesPath
- * @param usersLimit
- * @param canEditRoles
- */
-export function useFirestoreUserManagement({
-                                               firebaseApp,
-                                               usersPath = "__FIRECMS/config/users",
-                                               rolesPath = "__FIRECMS/config/roles",
-                                               usersLimit,
-                                               canEditRoles = true,
-                                               allowDefaultRolesCreation,
-                                               includeCollectionConfigPermissions
-                                           }: UserManagementParams): UserManagement {
-
-    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 users = usersWithRoleIds.map(u => ({
-        ...u,
-        roles: roles.filter(r => u.roles?.includes(r.id))
-    }) as User);
-
-    const [rolesError, setRolesError] = React.useState<Error | undefined>();
-    const [usersError, setUsersError] = React.useState<Error | undefined>();
-
-    const loading = rolesLoading || usersLoading;
-
-    useEffect(() => {
-        if (!firebaseApp || !rolesPath) return;
-        const firestore = getFirestore(firebaseApp);
-
-        return onSnapshot(collection(firestore, rolesPath),
-            {
-                next: (snapshot) => {
-                    setRolesError(undefined);
-                    try {
-                        const newRoles = docsToRoles(snapshot.docs);
-                        setRoles(newRoles);
-                    } catch (e) {
-                        console.error("Error loading roles", e);
-                        setRolesError(e as Error);
-                    }
-                    setRolesLoading(false);
-                },
-                error: (e) => {
-                    console.error("Error loading roles", e);
-                    setRolesError(e);
-                    setRolesLoading(false);
-                }
-            }
-        );
-    }, [firebaseApp, rolesPath]);
-
-    useEffect(() => {
-        if (!firebaseApp || !usersPath) return;
-        const firestore = getFirestore(firebaseApp);
-
-        return onSnapshot(collection(firestore, usersPath),
-            {
-                next: (snapshot) => {
-                    setUsersError(undefined);
-                    try {
-                        const newUsers = docsToUsers(snapshot.docs);
-                        setUsersWithRoleIds(newUsers);
-                    } catch (e) {
-                        console.error("Error loading users", e);
-                        setUsersError(e as Error);
-                    }
-                    setUsersLoading(false);
-                },
-                error: (e) => {
-                    console.error("Error loading users", e);
-                    setUsersError(e);
-                    setUsersLoading(false);
-                }
-            }
-        );
-    }, [firebaseApp, usersPath]);
-
-    const saveUser = useCallback(async (user: User): Promise<User> => {
-        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
-        const firestore = getFirestore(firebaseApp);
-        if (!firestore || !usersPath) throw Error("useFirestoreUserManagement Firestore not initialised");
-        console.debug("Persisting user", user);
-        const roleIds = user.roles?.map(r => r.id);
-        const {
-            uid,
-            ...userData
-        } = user;
-        const data = {
-            ...userData,
-            roles: roleIds
-        };
-        if (uid) {
-            return setDoc(doc(firestore, usersPath, uid), data, { merge: true }).then(() => user);
-        } else {
-            return addDoc(collection(firestore, usersPath), data).then(() => user);
-        }
-    }, [usersPath, firebaseApp]);
-
-    const saveRole = useCallback((role: Role): Promise<void> => {
-        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
-        const firestore = getFirestore(firebaseApp);
-        if (!firestore || !rolesPath) throw Error("useFirestoreUserManagement Firestore not initialised");
-        console.debug("Persisting role", role);
-        const {
-            id,
-            ...roleData
-        } = role;
-        const ref = doc(firestore, rolesPath, id);
-        return setDoc(ref, roleData, { merge: true });
-    }, [rolesPath, firebaseApp]);
-
-    const deleteUser = useCallback(async (user: User): Promise<void> => {
-        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
-        const firestore = getFirestore(firebaseApp);
-        if (!firestore || !usersPath) throw Error("useFirestoreUserManagement Firestore not initialised");
-        console.debug("Deleting", user);
-        const { uid } = user;
-        return deleteDoc(doc(firestore, usersPath, uid));
-    }, [usersPath, firebaseApp]);
-
-    const deleteRole = useCallback((role: Role): Promise<void> => {
-        if (!firebaseApp) throw Error("useFirestoreUserManagement Firebase not initialised");
-        const firestore = getFirestore(firebaseApp);
-        if (!firestore || !rolesPath) throw Error("useFirestoreUserManagement Firestore not initialised");
-        console.debug("Deleting", role);
-        const { id } = role;
-        const ref = doc(firestore, rolesPath, id);
-        return deleteDoc(ref);
-    }, [rolesPath, firebaseApp]);
-
-    const collectionPermissions: PermissionsBuilder = useCallback(({
-                                                                       collection,
-                                                                       user
-                                                                   }) => resolveUserRolePermissions({
-        collection,
-        user
-    }), []);
-
-    const defineRolesFor: ((user: User) => Role[] | undefined) = useCallback((user) => {
-        if (!users) throw Error("Users not loaded");
-        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);
-
-        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) {
-            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) {
-            return true;
-        }
-
-        throw Error("Could not find a user with the provided email in the user management system.");
-    }, [loading, users])
-
-    return {
-        loading,
-        roles,
-        users,
-        saveUser,
-        saveRole,
-        rolesError,
-        deleteUser,
-        deleteRole,
-        usersLimit,
-        usersError,
-        canEditRoles: canEditRoles === undefined ? true : canEditRoles,
-        allowDefaultRolesCreation: allowDefaultRolesCreation === undefined ? true : allowDefaultRolesCreation,
-        includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
-        collectionPermissions,
-        defineRolesFor,
-        authenticator
-    }
-}
-
-const docsToUsers = (docs: DocumentSnapshot[]): (UserWithRoleIds)[] => {
-    return docs.map((doc) => {
-        const data = doc.data() as any;
-        const newVar = {
-            uid: doc.id,
-            ...data,
-            created_on: data?.created_on?.toDate(),
-            updated_on: data?.updated_on?.toDate()
-        };
-        return newVar as (UserWithRoleIds);
-    });
-}
-
-const docsToRoles = (docs: DocumentSnapshot[]): Role[] => {
-    return docs.map((doc) => ({
-        id: doc.id,
-        ...doc.data()
-    } as Role));
-}