CODEWITHSUNDEEP
reactjsazure-active-directoryazure-ad-b2cazure-ad-msal
Souvik Ghosh
Souvik Ghosh

Reputation: 4616

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:

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

Upvotes: 8

Views: 15651

Answers (3)

Luke Vanzweden
Luke Vanzweden

Reputation: 646

See Here. It allows you to call Graph API from client side.

Upvotes: 0

Keen
Keen

Reputation: 193

  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.

Upvotes: 8

astaykov
astaykov

Reputation: 30893

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.

Upvotes: 7

Related Questions