Search code examples
reactjsazure-active-directoryazure-ad-b2cazure-ad-msal

MSAL authentication and authorization from React to Web API

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.

Solution

  • 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.