الملاحظات تحرير

How to authenticate users with Microsoft Authentication Library for React

  • مقالة
  • قراءة خلال 2 دقائق

In this article series, learn how to authenticate users with the Microsoft Authentication Library for React (MSAL React) and call an Azure service on behalf of (OBO) the user.

If your server-side app doesn't need to call into an Azure service on behalf of an authenticated user, then your React client app wouldn't need to pass the user's access to token to the Azure Function app.

Application architecture

The application architecture includes:

  • A React client, which provides the user authentication step and can call an Azure service on behalf of (OAuth on-behalf-of flow) the user from either:
    • The React client itself.
    • or from an Azure Function app.
  • A serverless Azure Function app provides an API endpoint abstracting away the call into an Azure service. This is the suggested mechanism when:
    • The call to an Azure service includes information you don't want exposed in the browser
    • Or the call(s) require long-running operations.
  • An Azure service (Microsoft Graph) used to demonstrate how to call an Azure service on behalf of a user.
  • An Azure database (Cosmos DB) used as the custom web app's database, storing information specific to the web app.

The HTTP call to an Azure service requires an access token with higher permissions. This token shouldn't be cached in the browser storage.

Architectural diagram showing the user, through a browser, connecting to a Static web app. The Static web app then connects to Microsoft Identity to get an access token, then to Microsoft Graph to get user information, then to Cosmos DB to store custom information specific to this web app.

Authentication architecture

This article explains how to authenticate users to your client app with a Microsoft Identity provider app. The authentication starts on the React client.

Steps to authenticate Explanation
In the browser, the user selects the Login button with either the pop-up or redirect method. The pop-up manages the redirect to the Microsoft identity platform authorization endpoint.
The authentication flow displays Either a pop-up window displays or the web browser redirects to a page.
The user logs into their Microsoft account. The user has to provide correct credentials before the access token is returned to the React client, then to the user's browser session.
The browser continues to the React client app's root route, '/'. The access token is managed by the MSAL React library and held in session.
The user selects another route in the app. The new route also requires and checks user authentication. Any calls to the Function API receive the user's access token so the API can act on behalf of the user.

The Profile and FunctionAPI menu choices both call the Microsoft Graph API and pass the user's credentials, which are required to access that API. The Microsoft Graph API is used to demonstrate the passing of credentials to any API, including your own custom API.

How the sample code is organized?

The sample includes the following:

Area Purpose
Client React app (presentation layer). It calls the Microsoft Graph directly or uses the Azure Function app.
Serverless API Calls the Microsoft Graph API on behalf of user. Creates user document in Cosmos DB which includes user name, email, and favorite color.

Set up your development environment

Install the following for your local development environment.

Next steps