cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
davidyc
Helper I
Helper I

React Web App & Dataverse Web API

Hi All, I'm looking to build a React Web App which can use the dataverse web api under an Application User profile. My research tells me that in order to achieve this an App Registration is required which then automatically creates an Application User record on the Users table in Dataverse. What I'm struggling to find online is an example of the code that would be needed to authenticate the app with Dataverse without having a popup where a user has to use login credentials (and 2 factor auth). I'm using another service for end user authentication of the web app. 

 

Any guidance or advice on this would be appreciated.

1 ACCEPTED SOLUTION

Accepted Solutions
cchannon
Super User
Super User

OK, so it won't actually be that easy, because you're talking about an authentication pattern that isn't really best practice. It's not impossible, but it isn't as easy as maybe it ought to be.

So, the library you're looking for to get AD tokens from your react SPA is microsoft-authentication-library-for-js 

 

This library gives you an easy API for creating what's known as a PublicClientApplication that will acquire a user token silently or prompt a user to sign in to AD if there is no already available token. However, from your description, that's not quite what you're looking for: you are talking about what's known as a ConfidentialClient: a different type of auth connection to AD that is intended for Apps to acquire a token based on Id/Secret or Id/Secret/User Creds. Here's a more detailed explanation of the difference: Public and confidential client apps (MSAL) - Microsoft identity platform | Microsoft Docs

If you can authenticate with user credentials (i.e. the users in your app have a corresponding user in DataVerse) then I suggest you use the PublicClient. Just go to that link I posted above and the Readmes there have plenty of documentation and examples to follow. This is the straightforward and secure answer, and it is also clearly in keeping with MSFT licensing expectations.

But, if you MUST authenticate as an App User, then it gets a bit more complex. MSAL.js is intended for attended authentication scenarios, so it is totally built around publicclient objects. You'll have to switch to MSAL.net to get support for ConfidentialClients, so what you're probably going to wind up doing is to create an Azure Function that acts as an API you can call from your React App. There are other ways to get ConfidentialClient if you don't like .net, but all of them are intended to be server-side, so you will pretty much have to push this kind of auth to some kind of code execution that is NOT in the user's browser.

View solution in original post

4 REPLIES 4
GuidoPreite
Resolver III
Resolver III

you can create an app registration and you can use clientid/clientsecret authentication instead of oauth

you can follow the initial steps of this post to create the app registration, the app user and assign the security roles

https://benediktbergmann.eu/2022/01/04/setup-a-service-principal-in-power-automate/

 

cchannon
Super User
Super User

OK, so it won't actually be that easy, because you're talking about an authentication pattern that isn't really best practice. It's not impossible, but it isn't as easy as maybe it ought to be.

So, the library you're looking for to get AD tokens from your react SPA is microsoft-authentication-library-for-js 

 

This library gives you an easy API for creating what's known as a PublicClientApplication that will acquire a user token silently or prompt a user to sign in to AD if there is no already available token. However, from your description, that's not quite what you're looking for: you are talking about what's known as a ConfidentialClient: a different type of auth connection to AD that is intended for Apps to acquire a token based on Id/Secret or Id/Secret/User Creds. Here's a more detailed explanation of the difference: Public and confidential client apps (MSAL) - Microsoft identity platform | Microsoft Docs

If you can authenticate with user credentials (i.e. the users in your app have a corresponding user in DataVerse) then I suggest you use the PublicClient. Just go to that link I posted above and the Readmes there have plenty of documentation and examples to follow. This is the straightforward and secure answer, and it is also clearly in keeping with MSFT licensing expectations.

But, if you MUST authenticate as an App User, then it gets a bit more complex. MSAL.js is intended for attended authentication scenarios, so it is totally built around publicclient objects. You'll have to switch to MSAL.net to get support for ConfidentialClients, so what you're probably going to wind up doing is to create an Azure Function that acts as an API you can call from your React App. There are other ways to get ConfidentialClient if you don't like .net, but all of them are intended to be server-side, so you will pretty much have to push this kind of auth to some kind of code execution that is NOT in the user's browser.

joeristroy
Helper I
Helper I

@cchannon has got it pretty much covered, 
If your app runs on the server, you can pretty much just get a token from Azure Active Directory using the token authentication endpoint and use that token in the header for your other requests.

If your app runs in the client browser, you are going to have to implement some sort of middleware server side in order to get the token from Azure AD and pass that to your client app so you can use it in your web request. Or even better, just implement every API call in your serverside middleware and only pass the results to your web app.


Yeah, the only exception to this would be if you were to use a more traditionally server side language in the browser (i.e. a Blazor app) because then you could use the msal library that allows for confidential client.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (2,111)