TOC
Steps
References

Steps:

Create an App registration in Microsoft Entra.

After creation, note down the Application (client) ID and Directory (tenant) ID, which will be used later.

Create a Linux web app in Azure Portal and use Node.js.

After creation, note down the App Name, which will be used later.

Download the sample code in your development environment:

git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

You can use VS Code to open the react-spa subfolder.

Edit src/authConfig.js and make the corresponding modifications:

clientId
Specify the Application (client) ID obtained in step 2

authority
Fill in the Directory (tenant) ID obtained in step 2 in the specified format. (https://login.microsoftonline.com/<TENANT_ID>)

redirectUri
Fill in the App Name obtained in step 4 in the specified format. (https://<APP_NAME>.azurewebsites.net/.auth/login/aad/callback)

Run the following command to install the relevant packages:

npm install

Run the following command to compile the project. After execution, a build subfolder will be created.

npm run build

Create or modify build/.deployment with the following content:

[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=false

Publish your project, specifying the build subfolder during the publishing process.

After publishing, go back to the App registration in Microsoft Entra, find Authentication, create a Platform, specify Single-Page Application, and fill in the value of authority from Step 7.

Go back to the project, navigate to Configuration, and specify the Startup Command as follows:

pm2 serve /home/site/wwwroot –no-daemon –spa

After restarting the web app, you can visit your webpage using a browser.

References:

Quickstart: Sign in to a SPA & call an API – React – Microsoft identity platform | Microsoft Learn

​Microsoft Tech Community – Latest Blogs –Read More