Introduction

When creating custom web applications to use in an enterprise environment, security is always at the forefront. The first step in securing an app and the backend services and data it provides to users is user authentication and authorization.

In the distant past, creating an identity solution (i.e. a repository of usernames, passwords and secure authentication processes) would have been part of app development.

Today, most applications use trusted identity provides--such as Microsoft Entra--to authenticate users and authorize them to use applications and backend platform services.

In this video post, we'll walk through the end-to-end process for creating a React application from scratch--and integrating it with Entra for user authentication and authorization.

Solution Architecture

Below is an illustration of the solution we'll develop in this tutorial.

What's Covered

In the video, we'll cover the following topics:

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.

Video

Below is the embedded YouTube video of the full tutorial. If you're interested only in certain sections, bookmarks are provided to skip ahead (or back) to the specific video sections.