Add access control

docs/Admin.md

@@ -159,6 +159,7 @@ Here are all the props accepted by the component:
 | `store`            | Optional | `Store`         | -                    | The Store for managing user preferences                         |
 | `theme`            | Optional | `object`        | `default LightTheme` | The main (light) theme configuration                            |
 | `title`            | Optional | `string`        | -                    | The error page title                                            |
+| `unauthorized`     | Optional | `Component`     | -                    | The component displayed in the `/unauthorized` page             |
 
 
 ## `dataProvider`
@@ -1005,6 +1006,30 @@ const MyTitle = () => {
 };
 ```
 
+## `unauthorized`
+
+When using an authProvider that supports [the `canAccess` method](./AuthProviderWriting.md#canaccess), react-admin will check whether users can access a resource page and display the `unauthorized` component when they can't.
+
+You can replace that "unauthorized" screen by passing a custom component as the `unauthorized` prop:
+
+```tsx
+import * as React from 'react';
+import { Admin } from 'react-admin';
+
+const Unauthorized = () => (
+    <div>
+        <h1>Authorization error</h1>
+        <p>You don't have access to this page.</p>
+    </div>
+)
+
+const App = () => (
+    <Admin unauthorized={Unauthorized}>
+        ...
+    </Admin>
+);
+```
+
 ## Adding Custom Pages
 
 The [`children`](#children) prop of the `<Admin>` component define the routes of the application.

docs/AuthProviderWriting.md

@@ -17,6 +17,7 @@ const authProvider = {
     getIdentity: () => Promise.resolve(/* ... */),
     handleCallback: () => Promise.resolve(/* ... */), // for third-party authentication only
     // authorization
+    canAccess: params => Promise.resolve(/* ... */)
     getPermissions: () => Promise.resolve(/* ... */),
 };
 ```
@@ -65,6 +66,7 @@ const authProvider = {
             fullName: 'John Doe',
         }),
     getPermissions: () => Promise.resolve(''),
+    canAccess: ({ action, resource, record }) => Promise.resolve(true),
 };
 
 export default authProvider;
@@ -402,6 +404,10 @@ React-admin doesn't use permissions by default, but it provides [the `usePermiss
 
 [The Role-Based Access Control (RBAC) module](./AuthRBAC.md) allows fined-grained permissions in react-admin apps, and specifies a custom return format for `authProvider.getPermissions()`. Check [the RBAC documentation](./AuthRBAC.md#authprovider-methods) for more information.
 
+### `canAccess`
+
+This method should return a boolean indicating whether users can perform the provided action on the provided resource (in the [Role-Based Access Control (RBAC)](https://en.wikipedia.org/wiki/Role-based_access_control) sense).
+
 ### `handleCallback`
 
 This method is used when integrating a third-party authentication provider such as [Auth0](https://auth0.com/). React-admin provides a route at the `/auth-callback` path, to be used as the callback URL in the authentication service. After logging in using the authentication service, users will be redirected to this route. The `/auth-callback` route calls the `authProvider.handleCallback` method on mount. 
@@ -475,6 +481,7 @@ React-admin calls the `authProvider` methods with the following params:
 | `getIdentity`    | Get the current user identity                   |                    | 
 | `handleCallback` | Validate users after third party authentication service redirection                |  |
 | `getPermissions` | Get the current user credentials                | `Object` whatever params passed to `usePermissions()` - empty for react-admin default routes |
+| `canAccess`      | Check authorization for an action over a resource | `{ action: string, resource: string, record: string }` |
 
 ## Response Format
 
@@ -489,6 +496,7 @@ React-admin calls the `authProvider` methods with the following params:
 | `getIdentity`    | Auth backend returned identity    | `{ id: string | number, fullName?: string, avatar?: string }`  | 
 | `handleCallback` | User is authenticated   | `void | { redirectTo?: string | boolean  }` route to redirect to after login |
 | `getPermissions` | Auth backend returned permissions | `Object | Array` free format - the response will be returned when `usePermissions()` is called |
+| `canAccess`      | Auth backend returned authorization | `boolean |
 
 ## Error Format
 
@@ -503,4 +511,35 @@ When the auth backend returns an error, the Auth Provider should return a reject
 | `getIdentity`    | Auth backend failed to return identity    | `Object` free format - returned as `error` when `useGetIdentity()` is called | 
 | `handleCallback` | Failed to authenticate users after redirection | `void | { redirectTo?: string, logoutOnFailure?: boolean, message?: string }` |
 | `getPermissions` | Auth backend failed to return permissions | `Object` free format - returned as `error` when `usePermissions()` is called. The error will be passed to `checkError` |
+| `canAccess`      | Auth backend failed to return authorization | `Object` free format - returned as `error` when `useCanAccess()` is called. The error will be passed to `checkError` |
+
+## Query Cancellation
+
+React-admin supports [Query Cancellation](https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation), which means that when a component is unmounted, any pending query that it initiated is cancelled. This is useful to avoid out-of-date side effects and to prevent unnecessary network requests.
+
+To enable this feature, your auth provider must have a `supportAbortSignal` property set to `true`.
+
+```tsx
+const authProvider = { /* ... */ };
+authProvider.supportAbortSignal = true;
+```
+
+Now, every call to the auth provider will receive an additional `signal` parameter (an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) instance). You must pass this signal down to the fetch call:
+
+```tsx
+const authProvider = {
+    canAccess: async ({ resource, action, record, signal }) => {
+        const url = `${API_URL}/can_access?resource=${resource}&action=${action}`;
+        const options = { signal: params.signal };
+        const res = await fetch(url, options);
+        if (!res.ok) {
+            throw new HttpError(res.statusText);
+        }
+        return res.json();
+    },
+}
+```
+
+Some auth providers may already support query cancellation. Check their documentation for details.
 
+**Note**: In development, if your app is using [`<React.StrictMode>`](https://react.dev/reference/react/StrictMode), enabling query cancellation will duplicate the API queries. This is only a development issue and won't happen in production.

docs/Authentication.md

@@ -49,6 +49,8 @@ const authProvider = {
     getIdentity: () => Promise.resolve(),
     // get the user permissions (optional)
     getPermissions: () => Promise.resolve(),
+    // check whether users have the right to perform an action on a resource (optional)
+    canAccess: () => Promise.resolve(),
 };
 ```
 

docs/Resource.md

@@ -434,4 +434,21 @@ const App = () => (
 
 When users navigate to the `/posts` route, react-admin will display a loading indicator while the `PostList` component is being loaded.
 
-![Loading indicator](./img/lazy-resource.png)
+![Loading indicator](./img/lazy-resource.png)
+
+## Access Control
+
+When using an authProvider that supports [the `canAccess` method](./AuthProviderWriting.md#canaccess), react-admin will check whether users can access a resource page and display [the `unauthorized` component](./Admin.md#unauthorized) when they can't.
+
+For instance, given the following resource:
+
+```tsx
+<Resource name="posts" list={PostList} create={PostCreate} edit={PostEdit} show={PostShow} />
+```
+
+React-admin will call the `authProvider.canAccess` method when users try to access the pages with the following parameters:
+
+- For the list page: `{ action: "list", resource: "posts" }`
+- For the create page: `{ action: "create", resource: "posts" }`
+- For the edit page: `{ action: "edit", resource: "posts" }`
+- For the show page: `{ action: "show", resource: "posts" }`

docs/useCanAccess.md

@@ -5,39 +5,38 @@ title: "useCanAccess"
 
 # `useCanAccess`
 
-This hook, part of [the ra-rbac module](https://react-admin-ee.marmelab.com/documentation/ra-rbac)<img class="icon" src="./img/premium.svg" />, calls the `authProvider.getPermissions()` to get the role definitions, then checks whether the requested action and resource are allowed for the current user. 
+This hook calls the `authProvider.canAccess()` method on mount for a provided resource and action (and optionally a record). It returns an object containing a `canAccess` boolean set to `true` if users have access to the resource and action. 
 
 ## Usage
 
-`useCanAccess` takes an object `{ action, resource, record }` as argument. It returns an object describing the state of the RBAC request. As calls to the `authProvider` are asynchronous, the hook returns a `isPending` state in addition to the `canAccess` key.
+`useCanAccess` takes an object `{ action, resource, record }` as argument. It returns an object describing the state of the request. As calls to the `authProvider` are asynchronous, the hook returns a `isPending` state in addition to the `canAccess` key.
 
 ```jsx
-import { useCanAccess } from '@react-admin/ra-rbac';
-import { useRecordContext, DeleteButton } from 'react-admin';
+import { useCanAccess, useRecordContext, DeleteButton } from 'react-admin';
 
 const DeleteUserButton = () => {
     const record = useRecordContext();
-    const { isPending, canAccess } = useCanAccess({ action: 'delete', resource: 'users', record });
+    const { isPending, canAccess, error } = useCanAccess({ action: 'delete', resource: 'users', record });
     if (isPending || !canAccess) return null;
+    if (error) return <div>{error.message}</div>
     return <DeleteButton record={record} resource="users" />;
 };
 ```
 
-When checking if a user can access a resource, ra-rbac grabs the permissions corresponding to his roles. If at least one of these permissions allows him to access the resource, the user is granted access. Otherwise, the user is denied.
-
 ```jsx
+const permissions = [
+    { action: ["read", "create", "edit", "export"], resource: "companies" },
+    { action: ["read", "create", "edit", "delete"], resource: "users" },
+];
 const authProvider= {
     // ...
-    getPermissions: () => Promise.resolve({
-        permissions: [
-            { action: ["read", "create", "edit", "export"], resource: "companies" },
-            { action: ["read", "create", "edit"], resource: "people" },
-            { action: ["read", "create", "edit", "export"], resource: "deals" },
-            { action: ["read", "create"], resource: "comments" },
-            { action: ["read", "create", "edit", "delete"], resource: "tasks" },
-            { action: ["read", "write"], resource: "sales", record: { "id": "123" } },
-        ],
-    }),
+    canAccess: ({ resource, action, record }) => {
+        const permission = permissions.find(p => {
+            if (p.resource !== resource) return false;
+            if (p.action.includes(action)) return false;
+            return true;
+        })
+    },
 };
 
 const { canAccess: canUseCompanyResource } = useCanAccess({
@@ -56,10 +55,6 @@ const { canAccess: canReadSales } = useCanAccess({ action: "read", resource: "sa
 const { canAccess: canReadSelfSales } = useCanAccess({ action: "read", resource: "sales" }, { id: "123" }); // canReadSelfSales is true
 ```
 
-**Tip**: The *order* of permissions as returned by the `authProvider` isn't significant. As soon as at least one permission grants access to an action on a resource, the user will be able to perform it.
-
-**Tip**: `useCanAccess` is asynchronous, because it calls `usePermissions` internally. If you have to use `useCanAccess` several times in a component, the rendered result will "blink" as the multiple calls to `authProvider.getPermissions()` resolve. To avoid that behavior, you can use the `usePermissions` hook once, then call [the `canAccess` helper](./canAccess.md). 
-
 ## Parameters
 
 `useCanAccess` expects a single parameter object with the following properties:

packages/ra-core/src/auth/index.ts

@@ -13,6 +13,7 @@ export * from './AuthContext';
 export * from './LogoutOnMount';
 export * from './types';
 export * from './useAuthenticated';
+export * from './useCanAccess';
 export * from './useCheckAuth';
 export * from './useGetIdentity';
 export * from './useHandleAuthCallback';

packages/ra-core/src/auth/useCanAccess.spec.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import expect from 'expect';
+import { waitFor, render, screen } from '@testing-library/react';
+
+import { QueryClient } from '@tanstack/react-query';
+import { Basic } from './useCanAccess.stories';
+
+describe('useCanAccess', () => {
+    it('should return a loading state on mount', () => {
+        render(<Basic />);
+        screen.getByText('LOADING');
+    });
+
+    it('should return isPending: true by default after a tick', async () => {
+        render(<Basic />);
+        screen.getByText('LOADING');
+        await waitFor(() => {
+            expect(screen.queryByText('LOADING')).toBeNull();
+        });
+    });
+
+    it('should allow access on mount when there is no authProvider', () => {
+        render(<Basic authProvider={null} />);
+        expect(screen.queryByText('LOADING')).toBeNull();
+        screen.getByText('canAccess: YES');
+    });
+
+    it('should return that the resource is accessible when canAccess return true', async () => {
+        const authProvider = {
+            login: () => Promise.reject('bad method'),
+            logout: () => Promise.reject('bad method'),
+            checkAuth: () => Promise.reject('bad method'),
+            checkError: () => Promise.reject('bad method'),
+            getPermissions: () => Promise.reject('bad method'),
+            canAccess: () => Promise.resolve(true),
+        };
+        render(<Basic authProvider={authProvider} />);
+        await waitFor(() => {
+            expect(screen.queryByText('LOADING')).toBeNull();
+            expect(screen.queryByText('canAccess: YES')).not.toBeNull();
+        });
+    });
+
+    it('should return that the resource is accessible when auth provider does not have an canAccess method', async () => {
+        const authProvider = {
+            login: () => Promise.reject('bad method'),
+            logout: () => Promise.reject('bad method'),
+            checkAuth: () => Promise.reject('bad method'),
+            checkError: () => Promise.reject('bad method'),
+            getPermissions: () => Promise.reject('bad method'),
+            canAccess: undefined,
+        };
+        render(<Basic authProvider={authProvider} />);
+
+        await waitFor(() => {
+            expect(screen.queryByText('LOADING')).toBeNull();
+            expect(screen.queryByText('canAccess: YES')).not.toBeNull();
+        });
+    });
+
+    it('should return that the resource is not accessible when canAccess return false', async () => {
+        const authProvider = {
+            login: () => Promise.reject('bad method'),
+            logout: () => Promise.reject('bad method'),
+            checkAuth: () => Promise.reject('bad method'),
+            checkError: () => Promise.reject('bad method'),
+            getPermissions: () => Promise.reject('bad method'),
+            canAccess: () => Promise.resolve(false),
+        };
+        render(<Basic authProvider={authProvider} />);
+
+        await waitFor(() => {
+            expect(screen.queryByText('LOADING')).toBeNull();
+            expect(screen.queryByText('canAccess: NO')).not.toBeNull();
+            expect(screen.queryByText('ERROR')).toBeNull();
+        });
+    });
+
+    it('should return an error after a tick if the auth.canAccess call fails and checkError resolves', async () => {
+        const authProvider = {
+            login: () => Promise.reject('bad method'),
+            logout: () => Promise.reject('bad method'),
+            checkAuth: () => Promise.reject('bad method'),
+            getPermissions: () => Promise.reject('bad method'),
+            checkError: () => Promise.resolve(),
+            canAccess: () => Promise.reject('not good'),
+        };
+        render(<Basic authProvider={authProvider} />);
+
+        await waitFor(() => {
+            expect(screen.queryByText('LOADING')).toBeNull();
+        });
+        await waitFor(() => {
+            expect(screen.queryByText('ERROR')).not.toBeNull();
+        });
+    });
+
+    it('should abort the request if the query is canceled', async () => {
+        const abort = jest.fn();
+        const authProvider = {
+            canAccess: jest.fn(
+                ({ signal }) =>
+                    new Promise(() => {
+                        signal.addEventListener('abort', () => {
+                            abort(signal.reason);
+                        });
+                    })
+            ) as any,
+            checkError: () => Promise.resolve(),
+            supportAbortSignal: true,
+        } as any;
+        const queryClient = new QueryClient();
+        render(<Basic authProvider={authProvider} queryClient={queryClient} />);
+        await waitFor(() => {
+            expect(authProvider.canAccess).toHaveBeenCalled();
+        });
+        queryClient.cancelQueries({
+            queryKey: ['auth', 'canAccess'],
+        });
+        await waitFor(() => {
+            expect(abort).toHaveBeenCalled();
+        });
+    });
+});