Some applications may require fine grained permissions to enable or disable access to certain features. Since there are many different possible strategies (single role, multiple roles or rights, ACLs, etc.), Admin Console Module simply provides hooks to execute your own authorization code.
Access control is setup along with FusionAuth, this allows us to manage roles effectively for each application the user is assigned a role. This refers to the backend setup that needs to be done to show them on Admin.
Each time react-admin needs to determine the user permissions, it calls the authProvider.getPermissions() method. It's up to you to return the user permissions, be it a string (e.g. 'admin') or an array of roles (e.g. ['post_editor', 'comment_moderator', 'super_admin']).
Following is an example where the authProvider stores the user's permissions in localStorage upon authentication, and returns these permissions when called with getPermissions:
Permissions can be useful to restrict access to resources or their views. To do so, you must use a function as the <Admin> only child. React-admin will call this function with the permissions returned by the authProvider.
// Restrict access to the edit and remove views to admin only
<Resource
name="customers"
list={VisitorList}
edit={permissions ==='admin'? VisitorEdit :null}
icon={VisitorIcon}
/>,
// Only include the categories resource for admin users
permissions ==='admin'?(
<Resource
name="categories"
list={CategoryList}
edit={CategoryEdit}
icon={CategoryIcon}
/>
):null,
]}
</Admin>
Note that the function returns an array of React elements. This is required to avoid having to wrap them in a container element which would prevent the Admin from working.
Tip: Even if that's possible, be careful when completely excluding a resource (like with the categories resource in this example) as it will prevent you to reference this resource in the other resource views, too.
You might want to display some fields or inputs only to users with specific permissions. By default, react-admin calls the authProvider for permissions for each resource routes, and passes them to the list, edit, create, and show components.
Here is an example of a Create view with a conditional Input based on permissions:
exportconstUserCreate=({permissions,...props})=>(
<Create{...props}>
<SimpleFormdefaultValue={{role:'user'}}>
<TextInputsource="name"validate={[required()]}/>
{permissions ==='admin'&&(
<TextInputsource="role"validate={[required()]}/>
)}
</SimpleForm>
</Create>
);
This also works inside an Edition view with a TabbedForm, and you can even hide a FormTab completely:
What about the List view, the DataGrid, SimpleList and Filter components? It works there, too. And in the next example, the permissions prop is passed down to a custom filters component.
You might want to check user permissions inside a custom page. That's the purpose of the usePermissions() hook, which calls the authProvider.getPermissions() method on mount, and returns the result when available:
The usePermissions hook is optimistic: it doesn't block rendering during the authProvider call. In the above example, the MyPage component renders even before getting the response from the authProvider. To avoid a blink in the interface while the authProvider is answering, use the loaded return value of usePermissions():
constMyPage=()=>{
const{loaded, permissions}=usePermissions();
return loaded ?(
<Card>
<CardContent>Lorem ipsum sic dolor amet...</CardContent>
What if you want to check the permissions inside a custom menu? Much like getting permissions inside a custom page, you'll have to use the usePermissions hook: