ra-rbac

import { RoleDefinitions } from '@react-admin/ra-rbac';

const roles: RoleDefinitions = {
    accountant: [
        { action: ['list', 'show'], resource: 'products' },
        { action: 'read', resource: 'products.*' },
        { type: 'deny', action: 'read', resource: 'products.description' },
        { action: 'list', resource: 'categories' },
        { action: 'read', resource: 'categories.*' },
        { action: ['list', 'show'], resource: 'customers' },
        { action: 'read', resource: 'customers.*' },
        { action: '*', resource: 'invoices' },
    ],
    contentEditor: [
        {
            action: ['list', 'create', 'edit', 'delete', 'export'],
            resource: 'products',
        },
        { action: 'read', resource: 'products.*' },
        { type: 'deny', action: 'read', resource: 'products.stock' },
        { type: 'deny', action: 'read', resource: 'products.sales' },
        { action: 'write', resource: 'products.*' },
        { type: 'deny', action: 'write', resource: 'products.stock' },
        { type: 'deny', action: 'write', resource: 'products.sales' },
        { action: 'list', resource: 'categories' },
        { action: ['list', 'edit'], resource: 'customers' },
        { action: ['list', 'edit'], resource: 'reviews' },
    ],
    stockManager: [
        { action: ['list', 'edit', 'export'], resource: 'products' },
        { action: 'read', resource: 'products.*' },
        {
            type: 'deny',
            action: 'read',
            resource: 'products.description',
        },
        { action: 'write', resource: 'products.stock' },
        { action: 'write', resource: 'products.sales' },
        { action: 'list', resource: 'categories' },
    ],
    administrator: [{ action: '*', resource: '*' }],
};

import { RoleDefinitions } from '@react-admin/ra-rbac';

const roles: RoleDefinitions = {
    accountant: [
        { action: ['list', 'show'], resource: 'products' },
        { action: 'read', resource: 'products.*' },
        { type: 'deny', action: 'read', resource: 'products.description' },
        { action: 'list', resource: 'categories' },
        { action: 'read', resource: 'categories.*' },
        { action: ['list', 'show'], resource: 'customers' },
        { action: 'read', resource: 'customers.*' },
        { action: '*', resource: 'invoices' },
    ],
    contentEditor: [
        {
            action: ['list', 'create', 'edit', 'delete', 'export'],
            resource: 'products',
        },
        { action: 'read', resource: 'products.*' },
        { type: 'deny', action: 'read', resource: 'products.stock' },
        { type: 'deny', action: 'read', resource: 'products.sales' },
        { action: 'write', resource: 'products.*' },
        { type: 'deny', action: 'write', resource: 'products.stock' },
        { type: 'deny', action: 'write', resource: 'products.sales' },
        { action: 'list', resource: 'categories' },
        { action: ['list', 'edit'], resource: 'customers' },
        { action: ['list', 'edit'], resource: 'reviews' },
    ],
    stockManager: [
        { action: ['list', 'edit', 'export'], resource: 'products' },
        { action: 'read', resource: 'products.*' },
        {
            type: 'deny',
            action: 'read',
            resource: 'products.description',
        },
        { action: 'write', resource: 'products.stock' },
        { action: 'write', resource: 'products.sales' },
        { action: 'list', resource: 'categories' },
    ],
    administrator: [{ action: '*', resource: '*' }],
};

// the admin role has all the permissions
const adminRole = [{ action: '*', resource: '*' }];

// the reader role can only read content, not create, edit or delete it
const readerRole = [{ action: 'read', resource: '*' }];

// fine-grained permissions on a per resource basis
const salesRole = [
    { 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'], resource: 'tasks' },
    { action: ['write'], resource: 'tasks.completed' },
];

// permissions can be restricted to a specific list of records, and are additive
const corrector123Role = [
    // can only grade the assignments assigned to him
    {
        action: ['read', 'export', 'edit', 'grade'],
        resource: 'assignments',
        record: { supervisor_id: '123' },
    },
    // can see the general stats page
    { action: 'read', resource: 'stats' },
    // can see the profile of every corrector
    { action: ['read'], resource: 'correctors' },
    // can edit his own profile
    { action: ['write'], resource: 'correctors', record: { id: '123' } },
];

// the admin role has all the permissions
const adminRole = [{ action: '*', resource: '*' }];

// the reader role can only read content, not create, edit or delete it
const readerRole = [{ action: 'read', resource: '*' }];

// fine-grained permissions on a per resource basis
const salesRole = [
    { 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'], resource: 'tasks' },
    { action: ['write'], resource: 'tasks.completed' },
];

// permissions can be restricted to a specific list of records, and are additive
const corrector123Role = [
    // can only grade the assignments assigned to him
    {
        action: ['read', 'export', 'edit', 'grade'],
        resource: 'assignments',
        record: { supervisor_id: '123' },
    },
    // can see the general stats page
    { action: 'read', resource: 'stats' },
    // can see the profile of every corrector
    { action: ['read'], resource: 'correctors' },
    // can edit his own profile
    { action: ['write'], resource: 'correctors', record: { id: '123' } },
];

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            {
                action: ['read', 'write'],
                resource: 'users',
                record: { id: '123' },
            },
            { action: 'read', resource: '*' },
        ]),
};

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            {
                action: ['read', 'write'],
                resource: 'users',
                record: { id: '123' },
            },
            { action: 'read', resource: '*' },
        ]),
};

import { mergeTranslations } from 'react-admin';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';
import {
    raRbacLanguageEnglish,
    raRbacLanguageFrench,
} from '@react-admin/ra-rbac';

const i18nProvider = polyglotI18nProvider(locale =>
    locale === 'en'
        ? mergeTranslations(englishMessages, raRbacLanguageEnglish)
        : mergeTranslations(frenchMessages, raRbacLanguageFrench)
);

import { mergeTranslations } from 'react-admin';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';
import {
    raRbacLanguageEnglish,
    raRbacLanguageFrench,
} from '@react-admin/ra-rbac';

const i18nProvider = polyglotI18nProvider(locale =>
    locale === 'en'
        ? mergeTranslations(englishMessages, raRbacLanguageEnglish)
        : mergeTranslations(frenchMessages, raRbacLanguageFrench)
);

const authProvider = {
    login: ({ username, password }) => {
        const request = new Request('https://mydomain.com/authenticate', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(data => {
                const permissions = getPermissionsFromRoles({
                    roleDefinitions: data.roleDefinitions,
                    userPermissions: data.user.permissions,
                    userRoles: data.user.roles,
                });
                localStorage.setItem(
                    'permissions',
                    JSON.stringify(permissions)
                );
            });
    },
    // ...
    getPermissions: () => {
        const permissions = JSON.parse(localStorage.getItem('permissions'));
        return Promise.resolve(permissions);
    },
};

const authProvider = {
    login: ({ username, password }) => {
        const request = new Request('https://mydomain.com/authenticate', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(data => {
                const permissions = getPermissionsFromRoles({
                    roleDefinitions: data.roleDefinitions,
                    userPermissions: data.user.permissions,
                    userRoles: data.user.roles,
                });
                localStorage.setItem(
                    'permissions',
                    JSON.stringify(permissions)
                );
            });
    },
    // ...
    getPermissions: () => {
        const permissions = JSON.parse(localStorage.getItem('permissions'));
        return Promise.resolve(permissions);
    },
};

import { useAuthenticated } from '@react-admin/ra-rbac';

const SecretData = () => {
    const { authenticated } = useAuthenticated();
    return authenticated ? null : <span>For your eyes only</span>;
};

import { useAuthenticated } from '@react-admin/ra-rbac';

const SecretData = () => {
    const { authenticated } = useAuthenticated();
    return authenticated ? null : <span>For your eyes only</span>;
};

import { useCanAccess } from '@react-admin/ra-rbac';
import { useRecordContext, DeleteButton } from 'react-admin';

const DeleteUserButton = () => {
    const record = useRecordContext();
    const { isLoading, canAccess } = useCanAccess({
        action: 'delete',
        resource: 'users',
        record,
    });
    if (isLoading || !canAccess) return null;
    return <DeleteButton record={record} resource="users" />;
};

import { useCanAccess } from '@react-admin/ra-rbac';
import { useRecordContext, DeleteButton } from 'react-admin';

const DeleteUserButton = () => {
    const record = useRecordContext();
    const { isLoading, canAccess } = useCanAccess({
        action: 'delete',
        resource: 'users',
        record,
    });
    if (isLoading || !canAccess) return null;
    return <DeleteButton record={record} resource="users" />;
};

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            {
                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' },
            },
        ]),
};

const { canAccess: canUseCompanyResource } = useCanAccess({
    resource: 'companies',
}); // canUseCompanyResource is true
const { canAccess: canUseCompanyResourceFromWildcard } = useCanAccess({
    resource: 'companies',
    action: '*',
}); // canUseCompanyResourceFromWildcard is true
const { canAccess: canReadCompanies } = useCanAccess({
    action: 'read',
    resource: 'companies',
}); // canReadCompanies is true
const { canAccess: canCreatePeople } = useCanAccess({
    action: 'create',
    resource: 'people',
}); // canCreatePeople is true
const { canAccess: canExportPeople } = useCanAccess({
    action: 'export',
    resource: 'people',
}); // canExportPeople is false
const { canAccess: canEditDeals } = useCanAccess({
    action: 'edit',
    resource: 'deals',
}); // canEditDeals is true
const { canAccess: canDeleteComments } = useCanAccess({
    action: 'delete',
    resource: 'tasks',
}); // canDeleteComments is true
const { canAccess: canReadSales } = useCanAccess({
    action: 'read',
    resource: 'sales',
}); // canReadSales is false
const { canAccess: canReadSelfSales } = useCanAccess(
    { action: 'read', resource: 'sales' },
    { id: '123' }
); // canReadSelfSales is true

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            {
                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' },
            },
        ]),
};

const { canAccess: canUseCompanyResource } = useCanAccess({
    resource: 'companies',
}); // canUseCompanyResource is true
const { canAccess: canUseCompanyResourceFromWildcard } = useCanAccess({
    resource: 'companies',
    action: '*',
}); // canUseCompanyResourceFromWildcard is true
const { canAccess: canReadCompanies } = useCanAccess({
    action: 'read',
    resource: 'companies',
}); // canReadCompanies is true
const { canAccess: canCreatePeople } = useCanAccess({
    action: 'create',
    resource: 'people',
}); // canCreatePeople is true
const { canAccess: canExportPeople } = useCanAccess({
    action: 'export',
    resource: 'people',
}); // canExportPeople is false
const { canAccess: canEditDeals } = useCanAccess({
    action: 'edit',
    resource: 'deals',
}); // canEditDeals is true
const { canAccess: canDeleteComments } = useCanAccess({
    action: 'delete',
    resource: 'tasks',
}); // canDeleteComments is true
const { canAccess: canReadSales } = useCanAccess({
    action: 'read',
    resource: 'sales',
}); // canReadSales is false
const { canAccess: canReadSelfSales } = useCanAccess(
    { action: 'read', resource: 'sales' },
    { id: '123' }
); // canReadSelfSales is true

import { List, Datagrid, TextField } from 'react-admin';
import { canAccess } from '@react-admin/ra-rbac';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'read', resource: 'products.price' },
        ]),
};

const ProductList = () => {
    const { permissions } = usePermissions();
    return (
        <List>
            <Datagrid>
                <TextField source="id" />
                <TextField source="reference" />
                <TextField source="width" />
                <TextField source="height" />
                {canAccess({
                    permissions,
                    action: 'read',
                    resource: 'products.price',
                }) && <TextField source="price" />}
                {/* this column will not render */}
                {canAccess({
                    permissions,
                    action: 'read',
                    resource: 'products.stock',
                }) && <TextField source="stock" />}
            </Datagrid>
        </List>
    );
};

import { List, Datagrid, TextField } from 'react-admin';
import { canAccess } from '@react-admin/ra-rbac';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'read', resource: 'products.price' },
        ]),
};

const ProductList = () => {
    const { permissions } = usePermissions();
    return (
        <List>
            <Datagrid>
                <TextField source="id" />
                <TextField source="reference" />
                <TextField source="width" />
                <TextField source="height" />
                {canAccess({
                    permissions,
                    action: 'read',
                    resource: 'products.price',
                }) && <TextField source="price" />}
                {/* this column will not render */}
                {canAccess({
                    permissions,
                    action: 'read',
                    resource: 'products.stock',
                }) && <TextField source="stock" />}
            </Datagrid>
        </List>
    );
};

import { Admin } from 'react-admin';
import { canAccess } from '@react-admin/ra-rbac';
import { dataProvider } from './dataProvider';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'edit', resource: 'categories' },
        ]),
};

const AccessDashboard = () => {
    const { permissions } = usePermissions();
    return (
        <>
            {canAccess({
                permissions,
                resource: 'commands',
            }) ? (
                <>List of last orders...</> // no access to this component
            ) : null}

            {canAccess({
                permissions,
                resource: 'products',
            }) ? (
               <>List of last products...</>
            ) : null}
            {canAccess({
                permissions,
                resource: 'categories',
            }) ? (
                <>List of last categories...</>
            ) : null}
        </>
    );
};

export const MyApp = () => (
    <Admin authProvider={authProvider} dataProvider={dataProvider} dashboard={AccessDashboard}>
        {/*...*/}
    </Admin>
);

import { Admin } from 'react-admin';
import { canAccess } from '@react-admin/ra-rbac';
import { dataProvider } from './dataProvider';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'edit', resource: 'categories' },
        ]),
};

const AccessDashboard = () => {
    const { permissions } = usePermissions();
    return (
        <>
            {canAccess({
                permissions,
                resource: 'commands',
            }) ? (
                <>List of last orders...</> // no access to this component
            ) : null}

            {canAccess({
                permissions,
                resource: 'products',
            }) ? (
               <>List of last products...</>
            ) : null}
            {canAccess({
                permissions,
                resource: 'categories',
            }) ? (
                <>List of last categories...</>
            ) : null}
        </>
    );
};

export const MyApp = () => (
    <Admin authProvider={authProvider} dataProvider={dataProvider} dashboard={AccessDashboard}>
        {/*...*/}
    </Admin>
);

import { IfCanAccess } from '@react-admin/ra-rbac';
import { DeleteButton, EditButton, ShowButton } from 'react-admin';

const RecordToolbar = () => (
    <Toolbar>
        <IfCanAccess action="edit">
            <EditButton />
        </IfCanAccess>
        <IfCanAccess action="show">
            <ShowButton />
        </IfCanAccess>
        <IfCanAccess action="delete">
            <DeleteButton />
        </IfCanAccess>
    </Toolbar>
);

import { IfCanAccess } from '@react-admin/ra-rbac';
import { DeleteButton, EditButton, ShowButton } from 'react-admin';

const RecordToolbar = () => (
    <Toolbar>
        <IfCanAccess action="edit">
            <EditButton />
        </IfCanAccess>
        <IfCanAccess action="show">
            <ShowButton />
        </IfCanAccess>
        <IfCanAccess action="delete">
            <DeleteButton />
        </IfCanAccess>
    </Toolbar>
);

import { Admin } from 'react-admin';
import { Resource } from '@react-admin/ra-rbac';
import { UserList, UserEdit, UserShow, UserCreate } from './users';
import {
    CommentList,
    CommentEdit,
    CommentCreate,
    CommentShow,
} from './comments';

import dataProvider from './dataProvider';
import authProvider from './authProvider';

const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <Resource
            name="users"
            list={UserList}
            edit={UserEdit}
            show={UserShow}
            create={UserCreate}
        />
        <Resource
            name="comments"
            list={CommentList}
            edit={CommentEdit}
            create={CommentCreate}
            show={CommentShow}
        />
    </Admin>
);

import { Admin } from 'react-admin';
import { Resource } from '@react-admin/ra-rbac';
import { UserList, UserEdit, UserShow, UserCreate } from './users';
import {
    CommentList,
    CommentEdit,
    CommentCreate,
    CommentShow,
} from './comments';

import dataProvider from './dataProvider';
import authProvider from './authProvider';

const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <Resource
            name="users"
            list={UserList}
            edit={UserEdit}
            show={UserShow}
            create={UserCreate}
        />
        <Resource
            name="comments"
            list={CommentList}
            edit={CommentEdit}
            create={CommentCreate}
            show={CommentShow}
        />
    </Admin>
);

import { Admin, Resource, ListGuesser, Layout, LayoutProps } from 'react-admin';
import { Menu } from '@react-admin/ra-rbac';
import * as posts from './posts';
import * as comments from './comments';
import * as users from './users';

import dataProvider from './dataProvider';
const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: '*', resource: 'posts' },
            { action: '*', resource: 'comments' },
        ]),
};

const CustomLayout = (props: LayoutProps) => <Layout {...props} menu={Menu} />;

const App = () => (
    <Admin
        dataProvider={dataProvider}
        authProvider={authProvider}
        layout={CustomLayout}
    >
        <Resource name="posts" {...posts} />
        <Resource name="comments" {...comments} />
        {/* the user won't see the Users menu */}
        <Resource name="users" {...users} />
    </Admin>
);

import { Admin, Resource, ListGuesser, Layout, LayoutProps } from 'react-admin';
import { Menu } from '@react-admin/ra-rbac';
import * as posts from './posts';
import * as comments from './comments';
import * as users from './users';

import dataProvider from './dataProvider';
const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: '*', resource: 'posts' },
            { action: '*', resource: 'comments' },
        ]),
};

const CustomLayout = (props: LayoutProps) => <Layout {...props} menu={Menu} />;

const App = () => (
    <Admin
        dataProvider={dataProvider}
        authProvider={authProvider}
        layout={CustomLayout}
    >
        <Resource name="posts" {...posts} />
        <Resource name="comments" {...comments} />
        {/* the user won't see the Users menu */}
        <Resource name="users" {...users} />
    </Admin>
);

import { Menu } from '@react-admin/ra-rbac';

export const MyMenu = () => (
    <Menu>
        {/* these menu items will only render for users with the right permissions */}
        <Menu.Item
            to="/products"
            resource="products"
            action="list"
            primaryText="Products"
        />
        <Menu.Item
            to="/categories"
            resource="categories"
            action="list"
            primaryText="Categories"
        />
        <Menu.Item
            to="/commands"
            resource="commands"
            action="list"
            primaryText="Commands"
        />
        {/* this menu item will render for all users */}
        <Menu.Item to="/preferences" primaryText="Preferences" />
    </Menu>
);

import { Menu } from '@react-admin/ra-rbac';

export const MyMenu = () => (
    <Menu>
        {/* these menu items will only render for users with the right permissions */}
        <Menu.Item
            to="/products"
            resource="products"
            action="list"
            primaryText="Products"
        />
        <Menu.Item
            to="/categories"
            resource="categories"
            action="list"
            primaryText="Categories"
        />
        <Menu.Item
            to="/commands"
            resource="commands"
            action="list"
            primaryText="Commands"
        />
        {/* this menu item will render for all users */}
        <Menu.Item to="/preferences" primaryText="Preferences" />
    </Menu>
);

import { List } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'export', resource: 'products' },
            // actions 'create' and 'delete' are missing
            { action: 'read', resource: 'products.name' },
            { action: 'read', resource: 'products.description' },
            { action: 'read', resource: 'products.price' },
            { action: 'read', resource: 'products.category' },
            // resource 'products.stock' is missing
        ]),
};

export const PostList = () => <List>// ...</List>;
// Users will see the Export action on top of the list, but not the Create action.
// Users will only see the authorized columns when clicking on the export button.

import { List } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'export', resource: 'products' },
            // actions 'create' and 'delete' are missing
            { action: 'read', resource: 'products.name' },
            { action: 'read', resource: 'products.description' },
            { action: 'read', resource: 'products.price' },
            { action: 'read', resource: 'products.category' },
            // resource 'products.stock' is missing
        ]),
};

export const PostList = () => <List>// ...</List>;
// Users will see the Export action on top of the list, but not the Create action.
// Users will only see the authorized columns when clicking on the export button.

const defaultExporter = records => {
    const recordsWithAuthorizedColumns = records.map(record =>
        Object.keys(record)
            .filter(key =>
                canAccess({
                    permissions,
                    action: 'read',
                    resource: `${resource}.${key}`,
                })
            )
            .reduce((obj, key) => ({ ...obj, [key]: record[key] }), {})
    );
    jsonExport(recordsWithAuthorizedColumns, (err, csv) =>
        downloadCSV(csv, resource)
    );
};

const defaultExporter = records => {
    const recordsWithAuthorizedColumns = records.map(record =>
        Object.keys(record)
            .filter(key =>
                canAccess({
                    permissions,
                    action: 'read',
                    resource: `${resource}.${key}`,
                })
            )
            .reduce((obj, key) => ({ ...obj, [key]: record[key] }), {})
    );
    jsonExport(recordsWithAuthorizedColumns, (err, csv) =>
        downloadCSV(csv, resource)
    );
};

import { List, Datagrid } from '@react-admin/ra-rbac';
import {
    ImageField,
    TextField,
    ReferenceField,
    NumberField,
} from 'react-admin';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'read', resource: 'products.thumbnail' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.category_id' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            { action: 'read', resource: 'products.price' },
            { action: 'read', resource: 'products.description' },
        ]),
};

const ProductList = () => (
    <List>
        {/* ra-rbac Datagrid */}
        <Datagrid>
            <ImageField source="thumbnail" />
            <TextField source="reference" />
            <ReferenceField source="category_id" reference="categories">
                <TextField source="name" />
            </ReferenceField>
            <NumberField source="width" />
            <NumberField source="height" />
            <NumberField source="price" />
            <TextField source="description" />
            {/** these two columns are not visible to the user **/}
            <NumberField source="stock" />
            <NumberField source="sales" />
        </Datagrid>
    </List>
);

import { List, Datagrid } from '@react-admin/ra-rbac';
import {
    ImageField,
    TextField,
    ReferenceField,
    NumberField,
} from 'react-admin';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: 'list', resource: 'products' },
            { action: 'read', resource: 'products.thumbnail' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.category_id' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            { action: 'read', resource: 'products.price' },
            { action: 'read', resource: 'products.description' },
        ]),
};

const ProductList = () => (
    <List>
        {/* ra-rbac Datagrid */}
        <Datagrid>
            <ImageField source="thumbnail" />
            <TextField source="reference" />
            <ReferenceField source="category_id" reference="categories">
                <TextField source="name" />
            </ReferenceField>
            <NumberField source="width" />
            <NumberField source="height" />
            <NumberField source="price" />
            <TextField source="description" />
            {/** these two columns are not visible to the user **/}
            <NumberField source="stock" />
            <NumberField source="sales" />
        </Datagrid>
    </List>
);

import { EditProps } from 'react-admin';
import { Edit } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'edit', 'clone'], resource: 'products' },
        ]),
};

export const PostEdit = () => <Edit>// ...</Edit>;
// user will see the clone button but not the show button

import { EditProps } from 'react-admin';
import { Edit } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'edit', 'clone'], resource: 'products' },
        ]),
};

export const PostEdit = () => <Edit>// ...</Edit>;
// user will see the clone button but not the show button

import { Edit, SimpleForm, TextInput } from '@react-admin/ra-rbac';

const CustomUnauthorizedView = () => <p>Custom Unauthorized View</p>;

const ProductEditCustomUnauthorized = () => (
    <Edit unauthorized={<CustomUnauthorizedView />}>
        <SimpleForm>
            <TextInput source="reference" />
        </SimpleForm>
    </Edit>
);

import { Edit, SimpleForm, TextInput } from '@react-admin/ra-rbac';

const CustomUnauthorizedView = () => <p>Custom Unauthorized View</p>;

const ProductEditCustomUnauthorized = () => (
    <Edit unauthorized={<CustomUnauthorizedView />}>
        <SimpleForm>
            <TextInput source="reference" />
        </SimpleForm>
    </Edit>
);

import { ShowProps } from 'react-admin';
import { Show } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show', 'edit'], resource: 'products' },
        ]),
};

export const PostShow = () => <Show>// ...</Show>;
// user will see the edit action on top of the Show view

import { ShowProps } from 'react-admin';
import { Show } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show', 'edit'], resource: 'products' },
        ]),
};

export const PostShow = () => <Show>// ...</Show>;
// user will see the edit action on top of the Show view

import { Show, SimpleShowLayout, TextField } from '@react-admin/ra-rbac';

const CustomUnauthorizedView = () => <p>Custom Unauthorized View</p>;

const ProductShowCustomUnauthorized = () => (
    <Show unauthorized={<CustomUnauthorizedView />}>
        <SimpleShowLayout>
            <TextField source="reference" />
        </SimpleShowLayout>
    </Show>
);

import { Show, SimpleShowLayout, TextField } from '@react-admin/ra-rbac';

const CustomUnauthorizedView = () => <p>Custom Unauthorized View</p>;

const ProductShowCustomUnauthorized = () => (
    <Show unauthorized={<CustomUnauthorizedView />}>
        <SimpleShowLayout>
            <TextField source="reference" />
        </SimpleShowLayout>
    </Show>
);

import { ShowProps } from 'react-admin';
import { SimpleShowLayout } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show'], resource: 'products' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            // 'products.description' is missing
            // 'products.image' is missing
            { action: 'read', resource: 'products.thumbnail' },
            // 'products.stock' is missing
        ]),
};

const ProductShow = () => (
    <Show>
        <SimpleShowLayout>
            {/* <-- RBAC SimpleShowLayout */}
            <TextField source="reference" />
            <TextField source="width" />
            <TextField source="height" />
            {/* not displayed */}
            <TextField source="description" />
            {/* not displayed */}
            <TextField source="image" />
            <TextField source="thumbnail" />
            {/* not displayed */}
            <TextField source="stock" />
        </SimpleShowLayout>
    </Show>
);

import { ShowProps } from 'react-admin';
import { SimpleShowLayout } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show'], resource: 'products' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            // 'products.description' is missing
            // 'products.image' is missing
            { action: 'read', resource: 'products.thumbnail' },
            // 'products.stock' is missing
        ]),
};

const ProductShow = () => (
    <Show>
        <SimpleShowLayout>
            {/* <-- RBAC SimpleShowLayout */}
            <TextField source="reference" />
            <TextField source="width" />
            <TextField source="height" />
            {/* not displayed */}
            <TextField source="description" />
            {/* not displayed */}
            <TextField source="image" />
            <TextField source="thumbnail" />
            {/* not displayed */}
            <TextField source="stock" />
        </SimpleShowLayout>
    </Show>
);

import { Show, TextField } from 'react-admin';
import { TabbedShowLayout } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show'], resource: 'products' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            { action: 'read', resource: 'products.thumbnail' },
            { action: 'read', resource: 'products.tab.description' },
            // 'products.tab.stock' is missing
            { action: 'read', resource: 'products.tab.images' },
        ]),
};

const ProductShow = () => (
    <Show>
        <TabbedShowLayout>
            <TabbedShowLayout.Tab label="Description" name="description">
                <TextField source="reference" />
                <TextField source="width" />
                <TextField source="height" />
                <TextField source="description" />
            </TabbedShowLayout.Tab>
            {/* Tab Stock is not displayed */}
            <TabbedShowLayout.Tab label="Stock" name="stock">
                <TextField source="stock" />
            </TabbedShowLayout.Tab>
            <TabbedShowLayout.Tab label="Images" name="images">
                <TextField source="image" />
                <TextField source="thumbnail" />
            </TabbedShowLayout.Tab>
        </TabbedShowLayout>
    </Show>
);

import { Show, TextField } from 'react-admin';
import { TabbedShowLayout } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show'], resource: 'products' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            { action: 'read', resource: 'products.thumbnail' },
            { action: 'read', resource: 'products.tab.description' },
            // 'products.tab.stock' is missing
            { action: 'read', resource: 'products.tab.images' },
        ]),
};

const ProductShow = () => (
    <Show>
        <TabbedShowLayout>
            <TabbedShowLayout.Tab label="Description" name="description">
                <TextField source="reference" />
                <TextField source="width" />
                <TextField source="height" />
                <TextField source="description" />
            </TabbedShowLayout.Tab>
            {/* Tab Stock is not displayed */}
            <TabbedShowLayout.Tab label="Stock" name="stock">
                <TextField source="stock" />
            </TabbedShowLayout.Tab>
            <TabbedShowLayout.Tab label="Images" name="images">
                <TextField source="image" />
                <TextField source="thumbnail" />
            </TabbedShowLayout.Tab>
        </TabbedShowLayout>
    </Show>
);

import { Show, TextField } from 'react-admin';
import { TabbedShowLayout } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show'], resource: 'products' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            // 'products.description' is missing
            { action: 'read', resource: 'products.thumbnail' },
            // 'products.image' is missing
            { action: 'read', resource: 'products.tab.description' },
            // 'products.tab.stock' is missing
            { action: 'read', resource: 'products.tab.images' },
        ]),
};

const ProductShow = () => (
    <Show>
        <TabbedShowLayout>
            <TabbedShowLayout.Tab label="Description" name="description">
                <TextField source="reference" />
                <TextField source="width" />
                <TextField source="height" />
                {/* Field Description is not displayed */}
                <TextField source="description" />
            </TabbedShowLayout.Tab>
            {/* Tab Stock is not displayed */}
            <TabbedShowLayout.Tab label="Stock" name="stock">
                <TextField source="stock" />
            </TabbedShowLayout.Tab>
            <TabbedShowLayout.Tab label="Images" name="images">
                {/* Field Image is not displayed */}
                <TextField source="image" />
                <TextField source="thumbnail" />
            </TabbedShowLayout.Tab>
        </TabbedShowLayout>
    </Show>
);

import { Show, TextField } from 'react-admin';
import { TabbedShowLayout } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'show'], resource: 'products' },
            { action: 'read', resource: 'products.reference' },
            { action: 'read', resource: 'products.width' },
            { action: 'read', resource: 'products.height' },
            // 'products.description' is missing
            { action: 'read', resource: 'products.thumbnail' },
            // 'products.image' is missing
            { action: 'read', resource: 'products.tab.description' },
            // 'products.tab.stock' is missing
            { action: 'read', resource: 'products.tab.images' },
        ]),
};

const ProductShow = () => (
    <Show>
        <TabbedShowLayout>
            <TabbedShowLayout.Tab label="Description" name="description">
                <TextField source="reference" />
                <TextField source="width" />
                <TextField source="height" />
                {/* Field Description is not displayed */}
                <TextField source="description" />
            </TabbedShowLayout.Tab>
            {/* Tab Stock is not displayed */}
            <TabbedShowLayout.Tab label="Stock" name="stock">
                <TextField source="stock" />
            </TabbedShowLayout.Tab>
            <TabbedShowLayout.Tab label="Images" name="images">
                {/* Field Image is not displayed */}
                <TextField source="image" />
                <TextField source="thumbnail" />
            </TabbedShowLayout.Tab>
        </TabbedShowLayout>
    </Show>
);

import { Edit, TextInput } from 'react-admin';
import { SimpleForm } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            // 'delete' is missing
            { action: ['list', 'edit'], resource: 'products' },
            { action: 'write', resource: 'products.reference' },
            { action: 'write', resource: 'products.width' },
            { action: 'write', resource: 'products.height' },
            // 'products.description' is missing
            { action: 'write', resource: 'products.thumbnail' },
            // 'products.image' is missing
        ]),
};

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="reference" />
            <TextInput source="width" />
            <TextInput source="height" />
            {/* not displayed */}
            <TextInput source="description" />
            {/* not displayed */}
            <TextInput source="image" />
            <TextInput source="thumbnail" />
            {/* no delete button */}
        </SimpleForm>
    </Edit>
);

import { Edit, TextInput } from 'react-admin';
import { SimpleForm } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            // 'delete' is missing
            { action: ['list', 'edit'], resource: 'products' },
            { action: 'write', resource: 'products.reference' },
            { action: 'write', resource: 'products.width' },
            { action: 'write', resource: 'products.height' },
            // 'products.description' is missing
            { action: 'write', resource: 'products.thumbnail' },
            // 'products.image' is missing
        ]),
};

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="reference" />
            <TextInput source="width" />
            <TextInput source="height" />
            {/* not displayed */}
            <TextInput source="description" />
            {/* not displayed */}
            <TextInput source="image" />
            <TextInput source="thumbnail" />
            {/* no delete button */}
        </SimpleForm>
    </Edit>
);

import { Edit, TextInput } from 'react-admin';
import { TabbedForm } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'edit'], resource: 'products' },
            { action: 'write', resource: 'products.reference' },
            { action: 'write', resource: 'products.width' },
            { action: 'write', resource: 'products.height' },
            // 'products.description' is missing
            { action: 'write', resource: 'products.thumbnail' },
            // 'products.image' is missing
            { action: 'write', resource: 'products.tab.description' },
            // 'products.tab.stock' is missing
            { action: 'write', resource: 'products.tab.images' },
        ]),
};

const ProductEdit = () => (
    <Edit>
        <TabbedForm>
            <TabbedForm.Tab label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                {/* Input Description is not displayed */}
                <TextInput source="description" />
            </TabbedForm.Tab>
            {/* Input Stock is not displayed */}
            <TabbedForm.Tab label="Stock" name="stock">
                <TextInput source="stock" />
            </TabbedForm.Tab>
            <TabbedForm.Tab label="Images" name="images">
                {/* Input Image is not displayed */}
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </TabbedForm.Tab>
        </TabbedForm>
    </Edit>
);

import { Edit, TextInput } from 'react-admin';
import { TabbedForm } from '@react-admin/ra-rbac';

const authProvider = {
    // ...
    getPermissions: () =>
        Promise.resolve([
            { action: ['list', 'edit'], resource: 'products' },
            { action: 'write', resource: 'products.reference' },
            { action: 'write', resource: 'products.width' },
            { action: 'write', resource: 'products.height' },
            // 'products.description' is missing
            { action: 'write', resource: 'products.thumbnail' },
            // 'products.image' is missing
            { action: 'write', resource: 'products.tab.description' },
            // 'products.tab.stock' is missing
            { action: 'write', resource: 'products.tab.images' },
        ]),
};

const ProductEdit = () => (
    <Edit>
        <TabbedForm>
            <TabbedForm.Tab label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                {/* Input Description is not displayed */}
                <TextInput source="description" />
            </TabbedForm.Tab>
            {/* Input Stock is not displayed */}
            <TabbedForm.Tab label="Stock" name="stock">
                <TextInput source="stock" />
            </TabbedForm.Tab>
            <TabbedForm.Tab label="Images" name="images">
                {/* Input Image is not displayed */}
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </TabbedForm.Tab>
        </TabbedForm>
    </Edit>
);

import { AccordionForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionForm.Panel label="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="stock" label="Stock">
                <TextInput source="stock" />
            </AccordionForm.Panel>
            // delete button not displayed
        </AccordionForm>
    </Edit>
);

import { AccordionForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionForm.Panel label="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="stock" label="Stock">
                <TextInput source="stock" />
            </AccordionForm.Panel>
            // delete button not displayed
        </AccordionForm>
    </Edit>
);

import { Edit, TextInput } from 'react-admin';
import { AccordionForm } from '@react-admin/ra-form-layout';
import { AccordionFormPanel } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionFormPanel label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionFormPanel>
            <AccordionFormPanel label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionFormPanel>
            // not displayed
            <AccordionFormPanel label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionFormPanel>
        </AccordionForm>
    </Edit>
);

import { Edit, TextInput } from 'react-admin';
import { AccordionForm } from '@react-admin/ra-form-layout';
import { AccordionFormPanel } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionFormPanel label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionFormPanel>
            <AccordionFormPanel label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionFormPanel>
            // not displayed
            <AccordionFormPanel label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionFormPanel>
        </AccordionForm>
    </Edit>
);

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { AccordionSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.section.description' },
        { action: 'write', resource: 'products.section.images' },
        // 'products.section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <AccordionSection label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionSection>
            <AccordionSection label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionSection>
            // not displayed
            <AccordionSection label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionSection>
        </SimpleForm>
    </Edit>
);

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { AccordionSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.section.description' },
        { action: 'write', resource: 'products.section.images' },
        // 'products.section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <AccordionSection label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionSection>
            <AccordionSection label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionSection>
            // not displayed
            <AccordionSection label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionSection>
        </SimpleForm>
    </Edit>
);

import { LongForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.Section.description' },
        { action: 'write', resource: 'products.Section.images' },
        // 'products.Section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongForm.Section name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </LongForm.Section>
            <LongForm.Section name="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongForm.Section>
            <LongForm.Section name="stock" label="Stock">
                <TextInput source="stock" />
            </LongForm.Section>
            // delete button not displayed
        </LongForm>
    </Edit>
);

import { LongForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.Section.description' },
        { action: 'write', resource: 'products.Section.images' },
        // 'products.Section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongForm.Section name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </LongForm.Section>
            <LongForm.Section name="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongForm.Section>
            <LongForm.Section name="stock" label="Stock">
                <TextInput source="stock" />
            </LongForm.Section>
            // delete button not displayed
        </LongForm>
    </Edit>
);

import { LongForm, LongFormSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongFormSection name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </LongFormSection>
            <LongFormSection name="images" label="Images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongFormSection>
            // not displayed
            <LongFormSection name="stock" label="Stock">
                <TextInput source="stock" />
            </LongFormSection>
        </LongForm>
    </Edit>
);

import { LongForm, LongFormSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongFormSection name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </LongFormSection>
            <LongFormSection name="images" label="Images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongFormSection>
            // not displayed
            <LongFormSection name="stock" label="Stock">
                <TextInput source="stock" />
            </LongFormSection>
        </LongForm>
    </Edit>
);

import { WizardForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                {/* Won't be displayed */}
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step name="images" label="Images">
                {/* Won't be displayed */}
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            {/* Won't be displayed */}
            <WizardForm.Step name="stock" label="Stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

import { WizardForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                {/* Won't be displayed */}
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step name="images" label="Images">
                {/* Won't be displayed */}
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            {/* Won't be displayed */}
            <WizardForm.Step name="stock" label="Stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

import { Edit, TextInput } from 'react-admin';
import { WizardForm, WizardFormStep } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            // not displayed
            <WizardForm.Step label="Stock" name="stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

import { Edit, TextInput } from 'react-admin';
import { WizardForm, WizardFormStep } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            // not displayed
            <WizardForm.Step label="Stock" name="stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

import { getPermissionsFromRoles } from '@react-admin/ra-rbac';

let permissions; // memory cache
let permissionsExpiresAt = 0;
const getPermissions = () => {
    const request = new Request('https://mydomain.com/permissions', {
        headers: new Headers({
            Authorization: `Bearer ${localStorage.getItem('token')}`,
        }),
    });
    return fetch(request)
        .then(res => resp.json())
        .then(data => {
            permissions = data.permissions;
            permissionsExpiresAt = Date.now() + 1000 * 60 * 5; // 5 minutes
        });
};

let roleDefinitions; // memory cache
let rolesExpiresAt = 0;
const getRoles = () => {
    const request = new Request('https://mydomain.com/roles', {
        headers: new Headers({
            Authorization: `Bearer ${localStorage.getItem('token')}`,
        }),
    });
    return fetch(request)
        .then(res => resp.json())
        .then(data => {
            roleDefinitions = data.roles;
            rolesExpiresAt = Date.now() + 1000 * 60 * 5; // 5 minutes
        });
};

const authProvider = {
    login: ({ username, password }) => {
        const request = new Request('https://mydomain.com/authenticate', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(data => {
                localStorage.setItem('token', JSON.stringify(data.token));
                localStorage.setItem('userRoles', JSON.stringify(data.roles));
            });
    },
    // ...
    getPermissions: async () => {
        if (Date.now() > rolesExpiresAt) {
            await getRoles();
        }
        if (Date.now() > permissionsExpiresAt) {
            await getPermissions();
        }
        return getPermissionsFromRoles({
            roleDefinitions,
            userPermissions: permissions,
            userRoles: localStorage.getItem('userRoles'),
        });
    },
};

import { getPermissionsFromRoles } from '@react-admin/ra-rbac';

let permissions; // memory cache
let permissionsExpiresAt = 0;
const getPermissions = () => {
    const request = new Request('https://mydomain.com/permissions', {
        headers: new Headers({
            Authorization: `Bearer ${localStorage.getItem('token')}`,
        }),
    });
    return fetch(request)
        .then(res => resp.json())
        .then(data => {
            permissions = data.permissions;
            permissionsExpiresAt = Date.now() + 1000 * 60 * 5; // 5 minutes
        });
};

let roleDefinitions; // memory cache
let rolesExpiresAt = 0;
const getRoles = () => {
    const request = new Request('https://mydomain.com/roles', {
        headers: new Headers({
            Authorization: `Bearer ${localStorage.getItem('token')}`,
        }),
    });
    return fetch(request)
        .then(res => resp.json())
        .then(data => {
            roleDefinitions = data.roles;
            rolesExpiresAt = Date.now() + 1000 * 60 * 5; // 5 minutes
        });
};

const authProvider = {
    login: ({ username, password }) => {
        const request = new Request('https://mydomain.com/authenticate', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(data => {
                localStorage.setItem('token', JSON.stringify(data.token));
                localStorage.setItem('userRoles', JSON.stringify(data.roles));
            });
    },
    // ...
    getPermissions: async () => {
        if (Date.now() > rolesExpiresAt) {
            await getRoles();
        }
        if (Date.now() > permissionsExpiresAt) {
            await getPermissions();
        }
        return getPermissionsFromRoles({
            roleDefinitions,
            userPermissions: permissions,
            userRoles: localStorage.getItem('userRoles'),
        });
    },
};

// In src/App.tsx
import { Admin, Resource } from 'react-admin';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';
import posts from './posts';

export const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <Resource name="posts" {...posts} />
    </Admin>
);

// in src/AccessDenied.tsx
export const AccessDenied = () => (
    <Typography>You don't have the required permissions to access this page.</Typography>
);

// in src/posts/PostCreate.tsx
import { Create, SimpleForm, TextInput } from 'react-admin';
import { IfCanAccess } from '@react-admin/ra-rbac';
import { AccessDenied } from '../AccessDenied';

export const PostCreate = () => (
    <IfCanAccess action="create" fallback={<AccessDenied />}>
        <Create>
            <SimpleForm>
                <TextInput source="title" />
            </SimpleForm>
        </Create>
    </IfCanAccess>
);

// In src/App.tsx
import { Admin, Resource } from 'react-admin';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';
import posts from './posts';

export const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <Resource name="posts" {...posts} />
    </Admin>
);

// in src/AccessDenied.tsx
export const AccessDenied = () => (
    <Typography>You don't have the required permissions to access this page.</Typography>
);

// in src/posts/PostCreate.tsx
import { Create, SimpleForm, TextInput } from 'react-admin';
import { IfCanAccess } from '@react-admin/ra-rbac';
import { AccessDenied } from '../AccessDenied';

export const PostCreate = () => (
    <IfCanAccess action="create" fallback={<AccessDenied />}>
        <Create>
            <SimpleForm>
                <TextInput source="title" />
            </SimpleForm>
        </Create>
    </IfCanAccess>
);

// In src/App.tsx
import { Admin, CustomRoutes, Resource } from 'react-admin';
import { Route } from 'react-router';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';
import posts from './posts';
import { AccessDenied } from '../AccessDenied';

export const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <CustomRoutes>
            <Route path="access-denied" element={<AccessDenied />} />
        </CustomRoutes>
        <Resource name="posts" {...posts} />
    </Admin>
);

// in src/AccessDenied.tsx
export const AccessDenied = () => (
    <Typography>You don't have the required permissions to access this page.</Typography>
);

// in src/posts/PostCreate.tsx
import { Create, SimpleForm, TextInput } from 'react-admin';
import { IfCanAccess } from '@react-admin/ra-rbac';
import { Navigate } from 'react-router-dom';

export const PostCreate = () => (
    <IfCanAccess action="create" fallback={<Navigate to="/access-denied" />}>
        <Create>
            <SimpleForm>
                <TextInput source="title" />
            </SimpleForm>
        </Create>
    </IfCanAccess>
);

// In src/App.tsx
import { Admin, CustomRoutes, Resource } from 'react-admin';
import { Route } from 'react-router';
import { dataProvider } from './dataProvider';
import { authProvider } from './authProvider';
import posts from './posts';
import { AccessDenied } from '../AccessDenied';

export const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <CustomRoutes>
            <Route path="access-denied" element={<AccessDenied />} />
        </CustomRoutes>
        <Resource name="posts" {...posts} />
    </Admin>
);

// in src/AccessDenied.tsx
export const AccessDenied = () => (
    <Typography>You don't have the required permissions to access this page.</Typography>
);

// in src/posts/PostCreate.tsx
import { Create, SimpleForm, TextInput } from 'react-admin';
import { IfCanAccess } from '@react-admin/ra-rbac';
import { Navigate } from 'react-router-dom';

export const PostCreate = () => (
    <IfCanAccess action="create" fallback={<Navigate to="/access-denied" />}>
        <Create>
            <SimpleForm>
                <TextInput source="title" />
            </SimpleForm>
        </Create>
    </IfCanAccess>
);

// In src/App.tsx
import { Admin, Resource } from "react-admin";
import { dataProvider } from "./dataProvider";
import {
    Admin,
    usePermissions,
    ListGuesser,
    Menu,
    Layout,
    Title,
} from 'react-admin';
import { canAccess, Permissions, Resource } from '@react-admin/ra-rbac';
import { Card, CardContent } from '@mui/material';
import InventoryIcon from '@mui/icons-material/Inventory';
import ClassIcon from '@mui/icons-material/Class';
import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';

const authProvider = () => ({
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>
        promiseFor([{ action: 'list', resource: 'products' }]),
});

const MyDashboard = () => {
    return (
        <Card sx={{ marginTop: 5 }}>
            <Title title="Welcome to the administration" />
            <CardContent>Lorem ipsum sic dolor amet...</CardContent>
        </Card>
    );
};

const MyMenu = () => {
    const { permissions } = usePermissions();
    return (
        <Menu>
            <Menu.DashboardItem />
            <Menu.Item
                to="/categories"
                primaryText="Categories"
                leftIcon={<ClassIcon />}
                disabled={
                    !canAccess({
                        permissions,
                        resource: 'categories',
                    })
                }
            />
            <Menu.Item
                to="/products"
                primaryText="Products"
                leftIcon={<InventoryIcon />}
                disabled={
                    !canAccess({
                        permissions,
                        resource: 'products',
                    })
                }
            />
            <Menu.Item
                to="/commands"
                primaryText="Commands"
                leftIcon={<ShoppingCartCheckoutIcon />}
                disabled={
                    !canAccess({
                        permissions,
                        resource: 'commands',
                    })
                }
            />
        </Menu>
    );
};

const MyLayout = props => <Layout {...props} menu={MyMenu} />;

export const App = () => (
    <Admin
        authProvider={authProvider}
        dataProvider={dataProvider}
        layout={MyLayout}
        dashboard={MyDashboard}
    >
        <Resource name="categories" list={ListGuesser} />
        <Resource name="products" list={ListGuesser} />
        <Resource name="commands" list={ListGuesser} />
    </Admin>
);

// In src/App.tsx
import { Admin, Resource } from "react-admin";
import { dataProvider } from "./dataProvider";
import {
    Admin,
    usePermissions,
    ListGuesser,
    Menu,
    Layout,
    Title,
} from 'react-admin';
import { canAccess, Permissions, Resource } from '@react-admin/ra-rbac';
import { Card, CardContent } from '@mui/material';
import InventoryIcon from '@mui/icons-material/Inventory';
import ClassIcon from '@mui/icons-material/Class';
import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';

const authProvider = () => ({
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>
        promiseFor([{ action: 'list', resource: 'products' }]),
});

const MyDashboard = () => {
    return (
        <Card sx={{ marginTop: 5 }}>
            <Title title="Welcome to the administration" />
            <CardContent>Lorem ipsum sic dolor amet...</CardContent>
        </Card>
    );
};

const MyMenu = () => {
    const { permissions } = usePermissions();
    return (
        <Menu>
            <Menu.DashboardItem />
            <Menu.Item
                to="/categories"
                primaryText="Categories"
                leftIcon={<ClassIcon />}
                disabled={
                    !canAccess({
                        permissions,
                        resource: 'categories',
                    })
                }
            />
            <Menu.Item
                to="/products"
                primaryText="Products"
                leftIcon={<InventoryIcon />}
                disabled={
                    !canAccess({
                        permissions,
                        resource: 'products',
                    })
                }
            />
            <Menu.Item
                to="/commands"
                primaryText="Commands"
                leftIcon={<ShoppingCartCheckoutIcon />}
                disabled={
                    !canAccess({
                        permissions,
                        resource: 'commands',
                    })
                }
            />
        </Menu>
    );
};

const MyLayout = props => <Layout {...props} menu={MyMenu} />;

export const App = () => (
    <Admin
        authProvider={authProvider}
        dataProvider={dataProvider}
        layout={MyLayout}
        dashboard={MyDashboard}
    >
        <Resource name="categories" list={ListGuesser} />
        <Resource name="products" list={ListGuesser} />
        <Resource name="commands" list={ListGuesser} />
    </Admin>
);