We continue the implementation of a free and robust authentication and access control mechanism in the SPA application, namely Azure App Registration. In this post, we will use the previously created app registration to create a working demo. Let’s move directly to the example described in the Microsoft documentation. LINK.
To start running the example, you should begin by preparing your runtime environment. Here are the steps outlined in the documentation:
Preinstaled Node.js (server javascript) / installed GIT
(tool for working with code repositories) / Modern web browser. This example uses ES6 conventions. The tutorial suggests using VS Code, but you can manage without it. We start by downloading the project, so create a new folder on drive C (creating a folder on the desktop may cause problems) and enter 'cmd’ in the address bar to open the console.
After launching the console, we enter the command:
git clone https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial.git
Now, we execute the commands (confirming each line with Enter).
cd ms-identity-javascript-react-tutorial
cd 5-AccessControl\1-call-api-roles\SPA
npm install
Installing all dependencies may take a while, and upon completion, we should see the following message:
Now, in the file explorer, open the file authConfig.js (path is \ms-identity-javascript-react-tutorial\5-AccessControl\1-call-api-roles\API) and fill it out based on the app registration done in part 1 of the blog. Save the changes.
Next, move on to edit the second file authConfig.js (path \ms-identity-javascript-react-tutorial\5-AccessControl\1-call-api-roles\SPA\src\authConfig.js) and fill it out with data from the app registration, and of course, save the changes.
At this point, we are ready to launch the sample application. We have two applications: one Frontend (React) and the other Backend (Node.js server). We go to the directory created at the beginning of the blog:
//FRONTEND
cd ms-identity-javascript-react-tutorial
cd 5-AccessControl\1-call-api-roles\SPA
npm start
//FRONTEND
cd ms-identity-javascript-react-tutorial
cd 5-AccessControl\1-call-api-roles\SPA
npm start
The application should start automatically; if not, launch the browser and enter the address http://localhost:3000/. The next step is to start the backend application:
//BACKEND
cd ms-identity-javascript-react-tutorial
cd 5-AccessControl\1-call-api-roles\API
npm install
npm start
At this point, we have a working example of authentication using SPA application registration in Microsoft Entra, in which the data embedded in the authorization token are detailed. A detailed description of the functionalities implemented in the example and a discussion of the source codes can be found in the Microsoft documentation. Microsoft .
The topic is extensive and complex, but it is an excellent starting point for building your own application with authentication and roles defined in Microsoft Entra.
