Toan Le

Tutorial: Using Azure AD with React and .NET Core

2023-02-22

In this tutorial, we’ll walk through using Azure Active Directory (AD) to secure a React application with a .NET Core backend.

Prerequisites

  • An Azure account with permissions to create an Azure AD tenant and register an application
  • .NET Core SDK installed
  • Node.js and npm installed
  • React app created with create-react-app

Part 1: Azure AD setup

  1. Log into the Azure portal and create a new Azure AD tenant.
  2. Register a new application in the Azure AD tenant.
  3. Configure the application’s redirect URI to match the URI of your React application (e.g. http://localhost:3000).
  4. Grant the application permissions to access the API(s) that the .NET Core backend will expose.

For redirecting logout to work without HTTPS, modify the Front-Channel Logout in the manifest.
image

Make sure to expose the api scope
image

Part 2: .NET Core backend setup

  1. Create a new .NET Core Web API project.
  2. Install the Microsoft.AspNetCore.Authentication.JwtBearer NuGet package.
  3. Configure the authentication middleware to use Azure AD as the authentication provider.
  4. Add an authorization policy to require authenticated users for protected endpoints.

In the appsettings.json image

In program config image

Part 3: React app setup

  1. Install the react-aad-msal npm package to handle authentication with Azure AD.
  2. Configure the react-aad-msal provider component to use your Azure AD application’s client ID and redirect URI.
  3. Wrap the React app with the react-aad-msal provider component.
  4. Use the AuthenticationContext object provided by react-aad-msal to authenticate the user and acquire and access token.
  5. Send the access token as a bearer token in requests to the .NET Core backend.

The acquireTokenSilent will handle the token refresh.
image

Conclusion

By following this tutorial, you should now have a React application secured with Azure AD authentication and a .NET Core backend that validates access tokens. With this setup, you can build secure, authenticated applications that utilize Azure AD for identity management.

Copyright (c) 2023