How to add Microsoft Identity/Azure AD login feature for my React/.NET Core 3.0 SPA web application

Question

I'm developing a web application with a ReactJS front end and a .NET Core 3.0 backend. To create it, I followed this tutorial, pretty much: https://learn.microsoft.com/en-us/as.net/core/security/authentication/identity-api-authorization?view=as.netcore-3.0 .

Currently I'm storing the users in a database hosted in Azure cloud. In the backend code's ConfigureServices() method in the Startup class, I connect to my database like this:

services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

Now, management wants to make the change so that the users are not stored in our own database but rather in Microsoft Identity (formerly called Azure Active Directory (Azure AD)). This is because lots of companies already have user accounts there and they wouldn't have to create new users.

Can someone tell me how I can transition to that destination from where I am now? I see some tutorials where I create a web application like that from scratch but I have the feeling I could change just a few lines of code of what I already have and make this change. Anyone?

Answer 1

I'm not sure if you only need to change just a few lines of code, but based on your requirement, you are looking for a way to integrate Azure AD Authentication into your ReactJS application to call your backend API application which is protected by Azure AD.

There are two steps:

1.Protect your webapi(server) with azure ad. You can refer to this step (TodoListService).

2.Get access token from your react app(client), then access webapi with the token. You need to register the client Azure AD app with adding permission to access the webapi application. See this step (TodoListClient).

There are no ready-made code examples for you to use directly. But you can refer to this tutorial and source code on how to use MSAL with React to call Microsoft Graph.

The only thing you need to modify is calling your own API instead of calling Microsoft Graph here.