V3.md

This is a guide on how to configure Authorization and Data provider for React Admin V3.

Follow this link for React Admin V2:

• Setup for React Admin V2.

Authorization

Use AuthProviderV3 class to create an instance of auth provider and pass it to the <Admin> component.

You can add AdministratorResource to resources to display default UI for administrators management. AdministratorResource includes list, edit and create views.

It also supports roles and permissions logic so pass permissions to your resources. This will give you ability to hide certain resources, views, elements in your app.

import { AuthProviderV3, AdministratorResource } from 'obrigado-react-admin-frontend-utils'
import { Admin } from 'react-admin'
...
const apiUrl="http://localhost:4000/graphql"
const authProvider = new AuthProviderV3(apiUrl, true)

 <Admin authProvider={authProvider}>
    {permissions => {
      console.log('permissions', permissions)
      return [
          AdministratorResource
       ]
    }}
 </Admin>

Roles & permissions in components

Edit and create views of AdministratorResource automatically get a list of roles from backend and display them in a SelectInput from react-admin. In order for roles to be retrieved it is necessary to specify API URL in the config.

If you need a list of roles anywhere else in your app, you can use getRolesList method that is available in config.

Config also includes getAPI method that returns you API URL.

import config from "../config"
import { useState, useEffect } from 'react'
import {SimpleForm, Create} from 'react-admin'

export const CreateComponent= (props) => {
  
    const [roles, setRoles] = useState([]);
    
    useEffect(() => {
        config.getRolesList().then(data => setRoles(data));
    }, [])
    
    console.log('roles', roles)
    return (
        <Create {...props}>
            <SimpleForm>
                ...
            </SimpleForm>
        </Create>
    )
}

Data provider

Use buildDataProviderV3 function to create data provider. The function returns an instance of DataProviderV3 class. It is also asynchronous so Admin element should be displayed only when data provider is completely loaded.

import React from 'react'
import { Admin } from 'react-admin'
import { AuthProviderV3, buildDataProviderV3} from 'obrigado-react-admin-frontend-utils'


class App extends React.Component {
  state = {
    dataProvider: null,
    authProvider: null
  }
  constructor(props) {
    super(props)
    const apiUrl = "http://localhost:4000/graphql";
    buildDataProviderV3(apiUrl).then(provider=>{
      this.setState({dataProvider: provider})
    });
    this.state = {authProvider: new AuthProviderV3(apiUrl, true)};
  }

  render() {
    if (!this.state.dataProvider) {
      return <div>Loading...</div>
    }
    return (
        <Admin 
          dataProvider={this.state.dataProvider}
          authProvider={this.state.authProvider}
         >
         ...
        </Admin>
    )
  }
};

export default App;

Creating several lists with the same resource

In case you need to display several pages that use the same resource, you can use the following naming format: ResourceName@Alias.

import { RegularOrders } from './RegularOrders'
import { FilteredOrders } from './FilteredOrders'

...
<Admin 
   dataProvider={this.state.dataProvider}
   authProvider={this.state.authProvider}
 >
    <Resource source="Order" list={RegularOrders} />
    <Resource source="Order@Filtered" list={FilteredOrders} />
</Admin>