Skip to main content

Auth Provider

React-Admin use auth providers to authenticate users on your application. We have developped an Auth Provider which is specifically designed to connect to a SemApps-based server. It works with OIDC, Cas or local authentication.

Installation

npm install @semapps/auth-provider

Basic configuration

import { Admin } from 'react-admin';
import { authProvider, SsoLoginPage } from '@semapps/auth-provider';
import dataProvider from './dataProvider.js';

const App = () => (
<Admin
authProvider={authProvider({
dataProvider,
authType: 'sso' // or "local" or "pod"
})}
loginPage={SsoLoginPage} // Or you can use the LocalLoginPage
>
<Resource name="Project" ... />
<Resource name="Organization" ... />
</Admin>
);

See the official React-Admin 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'
);

Advanced configuration

allowAnonymous

By default your app will be accessible to anonymous users.

If you wish to force all users to login, you can pass a allowAnonymous: false param to the auth provider.

checkPermissions

If you want to check permissions based on WebACL, you need to set checkPermissions: true.

Additionally, you should use the page components below instead of React-Admin's default Create, Edit, List and Show components.

checkUser

If you only want certain types of users to access your app, you can pass a checkUser function to the authProvider.

This function receives user data and must return true or false, depending on whether the user is granted access or not.

This checkUser function is also available to any of your components using the React-Admin's useAuthProvider hook.

Pages components

CreateWithPermissions

Same as React-Admin Create component, except:

  • It ensures the logged-in user has the right to create a new resource.

EditWithPermissions

Same as React-Admin Edit component, except:

  • It ensures the logged-in user has the right to edit the resource.
  • It displays the Permissions button (through an EditActionsWithPermissions component which can be imported independently) if the logged-in user has acl:Control right.
  • It does not show the delete button if user doesn't have a acl:write right (through an EditToolbarWithPermissions component which can be imported independently).

ListWithPermissions

Same as React-Admin List component, except:

  • It displays the Permissions button (through a ListActionsWithPermissions component which can be imported independently) if the logged-in user has acl:Control right.

ShowWithPermissions

Same as React-Admin Show component, except:

  • It ensures the logged-in user has the right to view the resource
  • It displays the Permissions button (through a ShowActionsWithPermissions component which can be imported independently) if the logged-in user has acl:Control right.

Other components

AuthDialog

const MyPage = () => {
const [openAuth, setOpenAuth] = useState(false);
return (
<>
<Button onClick={() => setOpenAuth(true)}>Protected action</Button>
<AuthDialog open={openAuth} onClose={() => setOpenAuth(false)} />
</>
);
};
PropertyTypeDefaultDescription
openBooleanrequiredTrue if the dialog is open
onCloseFunctionrequiredFunction to close the dialog
redirectStringCurrent pathPath where to redirect after login
titleString"Login required"Title of the dialog
messageString"Please login to continue"Content of the dialog

All other props are passed to the underlying Material-UI Dialog component.

LocalLoginPage

Login/signup page to use with a local authentication. Include reset password feature.

PropertyTypeDefaultDescription
hasSignupStringtrueSet to false if you don't want the user to be able to signup
allowUsernameBooleanfalseIndicates if login is allowed with username (instead of email).
onLoginFunctionFunction called at the end of the login process. Should redirect.
onSignupFunctionFunction called at the end of the signup process. Should redirect.
additionalSignupValuesObjectAdditional values to send to the signup endpoint
passwordScorerFunctiondefaultScorerScorer to evaluate and indicate password strength. Set to false to disable.

SsoLoginPage

Login page to use with a SSO authentication (OIDC/Cas).

PropertyTypeDefaultDescription
userResourceString"Person"True if the dialog is open
textElementText to show above the SSO button
propertiesExistArrayProperties to check after the user has been created

Hooks

useAgents

Return a list of WAC agents (users, groups or classes) based on the URI of a resource or a container.

const { agents, addPermission, removePermission } = useAgents(uri);

Parameters

PropertyTypeDefaultDescription
uriStringrequiredURI of the resource or container

Return values

PropertyTypeDescription
agentsArrayArray of objects with id, predicate and permissions
addPermissionFunctionFunction to add a new permission
removePermissionFunctionFunction to remove an existing permission

useCheckAuthenticated

Return the identity of the logged-in user. If user is not logged, redirect to the login page.

const { identity, loading } = useCheckAuthenticated();

Return values

PropertyTypeDescription
identityObjectObject returned by the auth provider's getIdentity method
loadingBooleanTrue if the user data is loading

useCheckPermissions

Check if the logged-in user has the right to access the resource or container with a given mode.

const { permissions } = useCheckPermissions(uri, mode, redirectUrl);

Parameters

PropertyTypeDefaultDescription
uriStringrequiredURI of the resource or container
modeStringrequired"list", "edit", "create" or "show"
redirectUrlString"/"Path to redirect to if the user doesn't have the required permissions

Return value

PropertyTypeDescription
permissionsObjectPermissions of the logged-in user for the resource

useSignup

Return the signup method of the auth provider. Used by the LocalLoginPage.

const signup = useSignup();