Merge pull request marmelab#10300 from marmelab/crm-can-access

Leverage canAccess in CRM demo

Author: slax57

examples/crm/package.json

@@ -14,9 +14,9 @@
         "faker": "~5.4.0",
         "lodash": "~4.17.5",
         "papaparse": "^5.4.1",
-        "ra-data-fakerest": "^5.0.0",
+        "ra-data-fakerest": "^5.3.0",
         "react": "^18.3.1",
-        "react-admin": "^5.0.0",
+        "react-admin": "^5.3.0",
         "react-cropper": "^2.3.3",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.0.3",

examples/crm/src/layout/Header.tsx

@@ -12,9 +12,9 @@ import {
     Typography,
 } from '@mui/material';
 import {
+    CanAccess,
     LoadingIndicator,
     Logout,
-    usePermissions,
     UserMenu,
     useUserMenu,
 } from 'react-admin';
@@ -24,7 +24,6 @@ import { useConfigurationContext } from '../root/ConfigurationContext';
 const Header = () => {
     const { logo, title } = useConfigurationContext();
     const location = useLocation();
-    const { permissions } = usePermissions();
 
     let currentPath: string | boolean = '/';
     if (!!matchPath('/', location.pathname)) {
@@ -102,7 +101,9 @@ const Header = () => {
                             <LoadingIndicator />
                             <UserMenu>
                                 <ConfigurationMenu />
-                                {permissions === 'admin' && <UsersMenu />}
+                                <CanAccess resource="sales" action="list">
+                                    <UsersMenu />
+                                </CanAccess>
                                 <Logout />
                             </UserMenu>
                         </Box>

examples/crm/src/login/SignupPage.tsx

@@ -6,13 +6,8 @@ import {
     TextField,
     Typography,
 } from '@mui/material';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import {
-    useDataProvider,
-    useLogin,
-    useNotify,
-    usePermissions,
-} from 'react-admin';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useDataProvider, useLogin, useNotify } from 'react-admin';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { Navigate } from 'react-router';
 import { CrmDataProvider } from '../providers/types';
@@ -21,7 +16,7 @@ import { SignUpData } from '../types';
 import { LoginSkeleton } from './LoginSkeleton';
 
 export const SignupPage = () => {
-    const { refetch } = usePermissions();
+    const queryClient = useQueryClient();
     const dataProvider = useDataProvider<CrmDataProvider>();
     const { logo, title } = useConfigurationContext();
     const { data: isInitialized, isPending } = useQuery({
@@ -43,7 +38,10 @@ export const SignupPage = () => {
                 redirectTo: '/contacts',
             }).then(() => {
                 notify('Initial user successfully created');
-                refetch();
+                // FIXME: We should probably provide a hook for that in the ra-core package
+                queryClient.invalidateQueries({
+                    queryKey: ['auth', 'canAccess'],
+                });
             });
         },
         onError: () => {

examples/crm/src/providers/commons/canAccess.ts

@@ -0,0 +1,26 @@
+// FIXME: This should be exported from the ra-core package
+type CanAccessParams<
+    RecordType extends Record<string, any> = Record<string, any>,
+> = {
+    action: string;
+    resource: string;
+    record?: RecordType;
+};
+
+export const canAccess = <
+    RecordType extends Record<string, any> = Record<string, any>,
+>(
+    role: string,
+    params: CanAccessParams<RecordType>
+) => {
+    if (role === 'admin') {
+        return true;
+    }
+
+    // Non admins can't access the sales resource
+    if (params.resource === 'sales') {
+        return false;
+    }
+
+    return true;
+};

examples/crm/src/providers/fakerest/authProvider.ts

@@ -1,5 +1,6 @@
 import { AuthProvider } from 'react-admin';
 import { Sale } from '../../types';
+import { canAccess } from '../commons/canAccess';
 import { dataProvider } from './dataProvider';
 
 export const DEFAULT_USER = {
@@ -50,19 +51,15 @@ export const authProvider: AuthProvider = {
         localStorage.getItem(USER_STORAGE_KEY)
             ? Promise.resolve()
             : Promise.reject(),
-    getPermissions: async () => {
+    canAccess: async ({ signal, ...params }) => {
+        // Get the current user
         const userItem = localStorage.getItem(USER_STORAGE_KEY);
         const localUser = userItem ? (JSON.parse(userItem) as Sale) : null;
-        if (!localUser) {
-            return Promise.reject('user is not logged in');
-        }
+        if (!localUser) return false;
 
-        // We fetch permissions from server to avoid local storage tampering
-        const user = await dataProvider.getOne<Sale>('sales', {
-            id: localUser.id,
-        });
-
-        return user.data?.administrator ? 'admin' : 'user';
+        // Compute access rights from the sale role
+        const role = localUser.administrator ? 'admin' : 'user';
+        return canAccess(role, params);
     },
     getIdentity: () => {
         const userItem = localStorage.getItem(USER_STORAGE_KEY);

examples/crm/src/sales/SalesCreate.tsx

@@ -4,17 +4,14 @@ import {
     SimpleForm,
     useDataProvider,
     useNotify,
-    usePermissions,
     useRedirect,
 } from 'react-admin';
 import { SubmitHandler } from 'react-hook-form';
-import { Navigate } from 'react-router';
 import { CrmDataProvider } from '../providers/types';
 import { SalesFormData } from '../types';
 import { SalesInputs } from './SalesInputs';
 
 export function SalesCreate() {
-    const { isPending, permissions } = usePermissions();
     const dataProvider = useDataProvider<CrmDataProvider>();
     const notify = useNotify();
     const redirect = useRedirect();
@@ -40,14 +37,6 @@ export function SalesCreate() {
         mutate(data);
     };
 
-    if (isPending) {
-        return null;
-    }
-
-    if (permissions !== 'admin') {
-        return <Navigate to="/" />;
-    }
-
     return (
         <Container maxWidth="sm" sx={{ mt: 4 }}>
             <Card>

examples/crm/src/sales/SalesEdit.tsx

@@ -7,12 +7,10 @@ import {
     useDataProvider,
     useEditController,
     useNotify,
-    usePermissions,
     useRecordContext,
     useRedirect,
 } from 'react-admin';
 import { SubmitHandler } from 'react-hook-form';
-import { Navigate } from 'react-router';
 import { CrmDataProvider } from '../providers/types';
 import { Sale, SalesFormData } from '../types';
 import { SalesInputs } from './SalesInputs';
@@ -26,8 +24,6 @@ function EditToolbar() {
 }
 
 export function SalesEdit() {
-    const { isPending, permissions } = usePermissions();
-
     const { record } = useEditController();
 
     const dataProvider = useDataProvider<CrmDataProvider>();
@@ -54,14 +50,6 @@ export function SalesEdit() {
         mutate(data);
     };
 
-    if (isPending) {
-        return null;
-    }
-
-    if (permissions !== 'admin') {
-        return <Navigate to="/" />;
-    }
-
     return (
         <Container maxWidth="sm" sx={{ mt: 4 }}>
             <Card>

examples/crm/src/sales/SalesList.tsx

@@ -7,10 +7,8 @@ import {
     SearchInput,
     TextField,
     TopToolbar,
-    usePermissions,
     useRecordContext,
 } from 'react-admin';
-import { Navigate } from 'react-router';
 
 const SalesListActions = () => (
     <TopToolbar>
@@ -47,15 +45,6 @@ const OptionsField = (_props: { label?: string | boolean }) => {
 };
 
 export function SalesList() {
-    const { isPending, permissions } = usePermissions();
-    if (isPending) {
-        return null;
-    }
-
-    if (permissions !== 'admin') {
-        return <Navigate to="/" />;
-    }
-
     return (
         <Stack gap={4}>
             <List

yarn.lock

@@ -17360,7 +17360,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"ra-data-fakerest@npm:^5.0.0, ra-data-fakerest@npm:^5.3.1, ra-data-fakerest@workspace:packages/ra-data-fakerest":
+"ra-data-fakerest@npm:^5.3.0, ra-data-fakerest@npm:^5.3.1, ra-data-fakerest@workspace:packages/ra-data-fakerest":
   version: 0.0.0-use.local
   resolution: "ra-data-fakerest@workspace:packages/ra-data-fakerest"
   dependencies:
@@ -17716,9 +17716,9 @@ __metadata:
     faker: "npm:~5.4.0"
     lodash: "npm:~4.17.5"
     papaparse: "npm:^5.4.1"
-    ra-data-fakerest: "npm:^5.0.0"
+    ra-data-fakerest: "npm:^5.3.0"
     react: "npm:^18.3.1"
-    react-admin: "npm:^5.0.0"
+    react-admin: "npm:^5.3.0"
     react-cropper: "npm:^2.3.3"
     react-dom: "npm:^18.3.1"
     react-error-boundary: "npm:^4.0.3"
@@ -17781,7 +17781,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-admin@npm:^5.0.0, react-admin@npm:^5.3.1, react-admin@workspace:packages/react-admin":
+"react-admin@npm:^5.0.0, react-admin@npm:^5.3.0, react-admin@npm:^5.3.1, react-admin@workspace:packages/react-admin":
   version: 0.0.0-use.local
   resolution: "react-admin@workspace:packages/react-admin"
   dependencies: