An auth provider for react-admin that handles authentication using the Microsoft Authentication Library (MSAL).
This is useful when using Azure Active Directory to authenticate your users.
This repository contains:
ra-auth-msal
packagera-auth-msal
with your own Azure AD instanceYou need to register and configure this demo application to use your own Azure AD instance. Please follow the steps below (taken from the quickstart tutorial) or read the React-Admin Authentication Using Active Directory post on Marmelab's blog.
http://localhost:8080/auth-callback
.Now it is time to create some users and some groups, which will enable us to demonstrate the permissions feature.
admins
. Leave all the other options to their default values. Note its identifier (it looks like 8fe1206d-db34-4274-90b2-b554f5672afb
)users
. Note its identifier (it looks like 8fe1206d-db34-4274-90b2-b554f5672afb
)chris
as the User Name and Chris Green
as the Name.users
group and select Select.John Smith
, and assign it both the users
and admins
groups.Lastly, we need to configure the app to include the goups claim in the ID token.
Now we can configure the demo app. First we need to setup some environment variables. We can do this by creating a .env
file in the root of the project.
cp packages/demo-react-admin/.env.template packages/demo-react-admin/.env
The following variables are required:
VITE_MSAL_CLIENT_ID="12345678-1234-1234-1234-123456789012"
VITE_MSAL_AUTHORITY="https://login.microsoftonline.com/common"
VITE_APP_BASE_URI="http://localhost:8080"
VITE_MSAL_ADMIN_GROUP="12345678-1234-1234-1234-123456789012"
VITE_MSAL_USER_GROUP="12345678-1234-1234-1234-123456789013"
Please fill in the VITE_MSAL_CLIENT_ID
with the Application (client) ID you noted earlier, the VITE_MSAL_ADMIN_GROUP
with the admin group identifier and the VITE_MSAL_USER_GROUP
with the user group identifier
We are now all set to run the demo app.
Install the dependencies and start the Demo App with the following command:
make install start
Now that all is configured and running, you can browse to http://localhost:8080/ to access the React Admin App.
The first time you sign in with any of the users, you'll have to enter their temporary password and will be asked to enter a password of your choice.
Chris Green
will only grant the user
role permissionsJohn Smith
will grant full admin
role permissions, allowing for instance to see the Users resource in the main menuFeel free to play around with this demo, along with the MASL config, to understand better how it works!
This repository and the code it contains are licensed under the MIT License and sponsored by marmelab.