MSAL authentication and authorization from React to Web API

Question

I have some trouble understanding the MSAL authentication and authorization. I have a single page app developed in React. I have setup the MSAL Azure SSO authentication by registering the web app on the Azure AD. Now, I have a Web API (in .Net Core) which is running on a separate app service. How do I integrate the authentication from my React app to the Web API?

Few questions coming to mind:

• Do I have to register the Web API app as well similar to my React app?
• Do I have to pass the auth token from my React App to the Web API?
• Do I have to setup the authentication only on the Web API side (using MSAL.Net) and the React App will connect to it?

Please share your thoughts. Let me know if I can explain any better.

Answer 1

Here is a complete video tutorial and source code on how to use MSAL with React to call Microsoft Graph.

The only different in your case will be that instead of calling Microsoft Graph, you will call your own API.

Bottomline is - there is no direct integration package yet for react. Which can also be read from the official statement on the msal-js repo:

After our current libraries are up to standards, we will begin balancing new feature requests, with new platforms such as react and node.js.

Answer 2

1. If you are the author of both react app and web API, you can register just one app and use ClientId for both.
2. Yes. If your react app is standalone app (not a part of Asp.net app) you can use msal.js to login with AzureAD and then use openId token to login to your web API. Also you can use access token to access services secured by Azure (e.g. Microsoft Graph) directly from React.
3. If your React app is a part of Asp.net app, you can setup Auth on server. If it's standalone app you need to use approach from 2.

If your React app is standalone app and if you are going to access "downstream" API (like Microsoft Graph) from Web API, you need to implement On-Behalf-Of mechanism on your Web API. In two words: - user login with React app and access Web API with openId token; - Web API acquires new access token based on token sent from client - Web API access Microsoft Graph with this new access token.

You can find Server side example here. Client side example from another answer works in this case, but you need to send row openId to Web API instead on access token.

P.S. You can use access token instead of idToken to access your WebAPI as well, but in this case you need to define separate scope for your WebAPI in Azure as well. After that you can use this scope to access your WebAPI and separate set of scopes to access MS Graph.