Skip to main content

Auth Provider

Installation#

npm install @semapps/auth-provider

Basic configuration#

Import the authProvider from the package and use it as-is with React-Admin

import { Admin } from 'react-admin';
import { authProvider } from '@semapps/auth-provider';
const App = () => (
<Admin
authProvider={authProvider({ middlewareUri: 'http://localhost:3000/' })}
...
>
<Resource name="Project" ... />
<Resource name="Organization" ... />
</Admin>
);

See the official React-Docs about authentication for more details.

You will also need to include the package-specific translations messages in React-Admin's i18nProvider:

import polyglotI18nProvider from 'ra-i18n-polyglot';
import frenchMessages from 'ra-language-french';
import { frenchMessages as authFrenchMessages } from '@semapps/auth-provider';
export const i18nProvider = polyglotI18nProvider(
lang => ({
...frenchMessages,
...authFrenchMessages
}),
'fr'
);

Adding user authentication to Archipelago layout#

import { Admin } from 'react-admin';
import { authProvider, LoginPage, LogoutButton, UserMenu } from '@semapps/auth-provider';
import { Layout, AppBar, theme } from '@semapps/archipelago-layout';
const AppBarWithUserMenu = props => <AppBar userMenu={<UserMenu />} {...props} />;
const LayoutWithUserMenu = props => <Layout {...props} appBar={AppBarWithUserMenu} />;
const App = () => (
<Admin
authProvider={authProvider({ middlewareUri: 'http://localhost:3000/' })}
layout={LayoutWithUserMenu}
loginPage={LoginPage}
logoutButton={LogoutButton}
>
<Resource name="Project" ... />
<Resource name="Organization" ... />
</Admin>
);

Checking permissions#

If you want to check permissions based on WebACL, you need to provide additional parameters to the authProvider.

import { Admin, Resource } from 'react-admin';
import { authProvider } from '@semapps/auth-provider';
import { httpClient } from '@semapps/semantic-data-provider';
const App = () => (
<Admin
authProvider={authProvider({
middlewareUri: 'http://localhost:3000/',
checkPermissions: true,
httpClient,
resources: {
Project: {
containerUri: 'http://localhost:3000/projects'
},
Organization: {
containerUri: 'http://localhost:3000/organizations'
}
}
})}
>
<Resource name="Project" />
<Resource name="Organization" />
</Admin>
);

Additionally, you should use the <ListWithPermissions />, <ShowWithPermissions /> and <EditWithPermissions /> components instead of React-Admin's default <List />, <Show /> and <Edit /> components.

This will hide the Create, Edit and Delete buttons to users who are not allowed to do these actions, and show a Permissions button to users who have acl:Control over a resource or a container.