react-aad | React wrapper for Azure AD | OAuth library

Is there a "best" way of achieving this?

Basically I want to leverage my company's Azure AD tenant to build a fully featured internal application. Using Microsoft Graph, I can retrieve users via their identifier guids, and use the identifiers as foreign keys for various tables in our on premises database, instead of having a dedicated User table, which would need to be populated and synced up with the AD. There are many other prospective uses for Graph, but leveraging users is the priority right now.

A large chunk of my application is built already. I am able to lock down my client app using the package react-aad-msal, requiring users to authenticate through single-sign-on. I have also successfully been able to pass that token back to the protected .NET Core API, accessing various endpoints as the authenticated user.

From here, I am not sure how I can develop the calls to Microsoft Graph. At which point should I make the connection? Should the client application connect to both the on-prem API, as well as Graph? Or should it only connect to the on-prem, which would then connect to Graph? Curious to know the pros and cons of either method.

I've also heard tell that Microsoft is working on their own package: @azure/msal-react, and that react-aad-msal should no longer be used (as it only supports msal 1.0 and not 2.0. I have no idea which version is better for my needs). While msal-react is still in development, apparently I should be using @azure/msal-browser. But I cannot find a good example of a react app using msal-browser to authenticate.

I'm wondering if this is possible?

I have my entire API locked behind an [Authorize] tag.

And my startup class is configured like so:

I'm developing a web application with a react frontend and a .NET CORE 3.1 backend and was asked to add Azure AD single sign on capabilities. I'm using the react-aad-msal library (https://www.npmjs.com/package/react-aad-msal). I'm calling MsalAuthProvider.getAccessToken() and get this error:

Can't construct an AccessTokenResponse from a AuthResponse that has a token type of "id_token".

Can anyone help me?

Anyone? Btw. getAccessToken() is actually inside the standard msal library, if that helps.

I'm developing an SPA with React that is hosted as an Azure Static Web App. The App is secured with Azure AD Authentication which works great, I already built a Login that works fine and I can call Azure (Graph) APIs with the token I got and retrieve information for the granted scopes (e.g. user profile picture). To achieve this, I'm using a wrapper called React AAD MSAL which neatly wraps the Microsoft Authentication Library (msal@1.4.0).

So far so good, no problems here. But I'm in need of a backend, of course. I decided to this with Azure Functions, since serverless is the best way for me here. So I made a quick HTTP trigger protoype that runs in Azure as Azure Function und works when I call the URL with the correct paramters.

But of course the Azure Function needs to be secured, so only my React App can call this function. So I thought there should be way to do this through Azure AD, since my user is already logged in as such.

I tried and tried and tried different ways I found online but none of them seem to work or I am doing something wrong.

The general tutorial I tried to follow is this one from MS itself. I tried using the "Express" setting which of course didn't work. I tried the advanced configuration, which also didn't work. The advanced tutorial says you need to have an App registration for the service, I'm not even sure if this is can be my Static Web App or a new on (I tried both with no success). Isn't it enough to tell the Azure Function that it is now AAD secured and may only accept calls from a source secured by an access token that contains the App ID of my app, which is provided in the settings? You can easily provide all these settings, it just doesn't seem to work.

So I'm stalling very early on here. To call the function itself, I first need to get a Authorization Token. According to this tutorial from MS (see "Validate tokens from providers"), I need to send an access token which I got when logging in to my SPA Web App to the Azure Function endpoint ending in .auth/login/aad. Getting this token is easy, since React AAD MSAL provides a method authProvider.getAccessToken() which I can use to extract it. I'm then making a POST request to https:///.auth/login/aad with the access token in the body as JSON { 'access_token': authToken.accessToken }. I should be getting an Authentication Token which I can then use to call the actual function, but I always get the same response, no matter what I try: You do not have permission to view this directory or page.

So this is where I am. I tried different methods and solutions I found to no avail. Maybe I did something wrong from the ground up, maybe I'm using the wrong methods, I really don't know at this point. Does anyone have experience with this? Is there something wrong in my general approach, do I need to do something else? Or is it just something in the configuration I need to change? Any help here would be greatly appreciated.

Edit: Since it was asked, here's how I retrieve the token. The concept behind this is using a redux-thunk to dispatch an asynchronous action to the react-redux store. I simplified it not only for this question here but for my testing as well. Right now I'm only trying to get the authentication token and log the answer the POST request is giving me:

I am receiving Warning: componentWillReceiveProps has been renamed but I am not calling that method anywhere I can see.

The error stack is here - and it starts when a setState is called within componentDidMount which I would have thought is an okay thing to do:

We have 5 REACT portals and 1 Asp:net Core 3.1 API. We would like to use same API for all portals. They all authorizes through MSAL B2B (react-aad-msal). First I am trying to take one portal to work with one API. For that I have two App Regs (AccountRequestPortal and AccountAPI).

App Reg AccountRequestPortal :

AccountAPI:

Notice I have granted The portal access to the API.

API Configuration:

I have a react front-end that sits behind a login with azure b2c, it allows the user to log in if they are registered in my tenant.

I then sent a access token to my backed which i receive using "react-aad-msal" :

I have integrated basic authentication with the React-Aad-MSAL client into a my react-app which allows me to get things like the users name and email successfully. Here in a component I wanted to check the users groups before displaying some data.

I created a React app with create-react last week.

I have a simple form that displays a message when I click submit.

I would like to test it, this is the test i created SampleForm.test.tsx: