ra-auth-msal

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:

• The actual ra-auth-msal package
• A simple demo app you can run locally to try out ra-auth-msal with your own Azure AD instance

Simple Demo

Prerequesites

• You need to have an active Azure account. You can create one for free here.

Initial setup

1. Clone this project

You 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.

1. Sign in to the Azure portal.
2. If you have access to multiple tenants, use the Directories + subscriptions filter in the top menu to switch to the tenant in which you want to register the application.
3. Search for and select Microsoft Entra ID.
4. Under Manage, select App registrations > New registration.
5. Enter a Name for your application. Users of your app might see this name, and you can change it later.
6. Under Supported account types, select Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
7. Select Register. On the app Overview page, note the Application (client) ID value for later use.
8. Under Manage, select Authentication.
9. Under Platform configurations, select Add a platform. In the pane that opens select Single-page application.
10. Set the Redirect URI value to http://localhost:8080/auth-callback.
11. Select Configure.

Now it is time to create some users and some groups, which will enable us to demonstrate the permissions feature.

1. In the Azure portal, Search for and select Microsoft Entra ID.
2. Under Manage, select Groups, create a new group of type 'Security', called admins. Leave all the other options to their default values. Note its identifier (it looks like 8fe1206d-db34-4274-90b2-b554f5672afb)
3. Under Manage, select Groups, create a second group called users. Note its identifier (it looks like 8fe1206d-db34-4274-90b2-b554f5672afb)
4. Under Users, click New user > Create a user.
5. Choose chris as the User Name and Chris Green as the Name.
6. In Password, unselect Auto-generate password, and choose a password of your choice.
7. In Assignements, select Add group, select only the users group and select Select.
8. Make sure Block sign in is set to false
9. Click Create.
10. Repeat the same steps to create a second user, called 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.

1. In the Microsoft Entra ID Dashboard
2. Under Manage, select App registrations, then All applications > and select the App you created before
3. Select Token configuration.
4. Click on Add groups claim.
5. Select Security groups
6. Inside both the ID and Access sections, check the Emit groups as role claims checkbox.
7. Click Add.

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.

Running The Demo App

Install the dependencies and start the Demo App with the following command:

make install start

Using the Simple Demo

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.

• Signing in with Chris Green will only grant the user role permissions
• Signing in with John Smith will grant full admin role permissions, allowing for instance to see the Users resource in the main menu

Feel free to play around with this demo, along with the MASL config, to understand better how it works!

License

This repository and the code it contains are licensed under the MIT License and sponsored by marmelab.