Setting up Active Directory Authentication with React.js and .NET Core 5

Jag Singh
4 min readAug 17, 2021
Courtesy of https://wallpaperaccess.com/microsoft-azure

When creating a web app, authentication is one of those things that you hope to knock out quickly so that you can get to fun stuff but almost always ends up taking far more time than it should. In this tutorial, we’ll set up one type of authentication flow that you may find useful when building enterprise applications: the .NET API with a React.js SPA all integrated with Microsoft Active Directory.

Microsoft’s expansive development ecosystem and strong focus on the developer experience often means that complex tasks, like setting up CD pipelines and even many types of auth integrations, can be done with just a few clicks in Visual Studio. However, not all use cases are supported for this type of auto configuration — including the particular one we’re covering. By mixing and matching some official Microsoft docs and adding in a few tips from my own experience setting this up, I hope to save you some unnecessary scrambling and circular-trips in the sometimes frustrating sea of documentation.

Conceptual Overview

At a basic level, the problem we are trying to solve is this: someone is going be interacting with our client application (React.js) — we need to make sure that they are authorized to do so. This entails two parts.

--

--

Jag Singh

Software Engineer at California Dept. of Technology || Computer Science @ University of California, Davis || Tech and AI enthusiast