Tutorial: Implementing Entra MSAL with a React Web Application

This video is an end-to-end video tutorial walking through the process of creating an App Registration in Entra for a React Application, followed by the implementation of the app from scratch. This video covers all the steps for the configuration in detail. Feel free to use the bookmarks on the timeline to advance to only the sections you're interested in. This video is the demonstration component of the following blog post: https://robkerr.ai/implement-entra-authentication-react-webapp/ Topics Covered: 1. Creating an Entra App Registration. This is the foundational step in leveraging Entra as a custom app's identity provider. 2. Adding Authorized Redirect URLs. An app registration is secured so that only specific applications can use it. 3. Restrict Apps to Specific Users and Groups. While optional, Entra can provide Enterprise apps with a security layer that chooses which users and/or security groups can use the application. 4. Creating a new React App. To keep with the "end to end" nature of this post, we'll create a new React app from scratch, and integrate it with the App Registration created in step 1. 5. Implement Login Flows. Finally we'll implement the common login, logout and token refresh flows most apps will need--explaining how the code works and why it's needed. GitHub Repo: https://github.com/robkerr/azure-msal-react-tutorial 0:00 Introduction 3:05 Create App Registration 3:44 Add redirect URIs 4:39 Save App Client ID 5:03 Authorize User to App 6:15 Create the React App 9:04 Install MSAL 9:59 Configure MSAL Instance 12:30 Prepare UI Elements 15:58 Implement Login Button 20:14 Initial Login Test 21:19 Add User App Assignment 23:16 Admin Consent of API Permission 25:48 Implement Token Refresh 26:56 Examine Entra Token 27:25 Implement Logout 29:06 Test silent SSO login 29:40 Summary