React Web App & Dataverse Web API

[davidyc]

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.

[GuidoPreite]

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 · Accepted solution]

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]

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

[cchannon]

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.

[manojmane]

Hi @davidyc ,

any luck on the sample app ? 

[davidyc]

Yes, my React app sends API calls to Firebase cloud functions which then use the client id/secret to make API requests to Dataverse and return the data to the web app. This is what @joeristroy was describing.

[manojmane]

@davidyc Can you share the git link of sample application of react.