Azure Identity Platform - Authenticate logged in user against Custom WebAPI Endpoint using ReactJS Client

Question

Hi.

We have a dotnet Aspnet WebAPI based API using .Net Framework 4.7.2 which we access using a ReactJs client Application.

We want to authenticate users logged in as an Azure AD user against our API.

Our question is as follows:

• How do we set up our API in Azure AD to allow for "authenticate users logged in as an Azure AD user"
• How do we set up the Azure AD Client for the Azure AD user.

In the API we are using Auth 2.0 in the following manner (in startup):

    private static void ConfigureAuth(IAppBuilder app)
    {
        var clientId = ConfigurationManager.AppSettings["ida:ClientId"];
        var serviceScope = ConfigurationManager.AppSettings["ida:ServiceScope"];

        app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions
        {
            AccessTokenFormat = new JwtFormat(
                new TokenValidationParameters
                {
                    ValidAudiences = new[] { clientId, serviceScope },

                    // Change below to 'true' if you want this Web API to accept tokens issued to one Azure AD tenant only (single-tenant)
                    // Note that this is a simplification for the quickstart here. You should validate the issuer. For details,
                    // see https://github.com/Azure-Samples/active-directory-dotnet-native-aspnetcore
                    ValidateIssuer = false,
                },
                new OpenIdConnectSecurityKeyProvider("https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration")
            ),
        });
    }

In appsettings in the API we have the following:

<appSettings file="MyAppSettings.config">
<add key="ida:ClientId" value="<the client app id>" />
<add key="ida:ServiceScope" value="https://....onmicrosoft.com/Login/" />

In our react JS App whe have the following

import * as msal from '@azure/msal-browser';
const msalConfig = {
auth: {
clientId: '<the client app id>',
authority: 'https://login.microsoftonline.com/common',
},

We are able to log on to azure successfully and aquire a token

We then use this token as a bearer token to call an endpoint in our API using the NPM package @azure/msal-browser'
Our endpoint has the [Authenticate] attribute set.

  await APIClient.saveAccessTokenInMemory({
    access_token: tokenResponse.accessToken,
    expires: tokenResponse.expiresOn,
  });
  var config = await this.getConfig(tokenResponse);
  const response = await APIClient.getAD(<our API Endpoint>, config);

We get a 401 in return

Any clues to solve this issue would be greatly appreciated.
At the moment our best guess is that we have not set up the API and the Client correctly in Azure AD.