React/.Net Core Authentication with Azure AD MSAL

Question

I have a React front end that authenticates with Azure AD using the latest version of react-aad-msal, this part of it works fine. What I'm trying to achieve now is to secure my .NET Core API to the same Azure AD by sending a bearer token from the front end. I have this setup and auth to the front end works fine. I can get an access token in the latest version of react-aad-msal but when I send it to the API I always receive an 'invalid token' error. I'm not sure if I'm not using the correct scopes or if an access token is maybe not the right type of token to send? Here's the code:

API:

services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
            .AddAzureADBearer(options => Configuration.Bind("AzureAd", options));
...
app.UseAuthentication();

React App:

ReactDOM.render(
<AzureAD provider={authProvider} reduxStore={basicReduxStore}>
    {({login, logout, authenticationState}) => {
        if (authenticationState === AuthenticationState.Authenticated) {

The config for the authProvider looks like this:

config = {
    auth: {
        authority: 'https://login.microsoftonline.com/<mytenantidhere>',
        clientId: <clientidhere>,
        redirectUri: 'http://localhost:3000'
    },
    cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true
    }
};

export const msalConfig = config;
export const authParams = {
scopes: [
    'https://graph.microsoft.com/User.ReadBasic.All',
    'https://graph.microsoft.com/profile',
    'https://graph.microsoft.com/User.Read'
]
};

After the user is authenticated I want to get some additional info from the API like so:

const token = await authProvider.getAccessToken();
    context.token = token;

    axios
        .get('Employees/getCurrentEmployee', {
            headers: {
                'Authorization': "Bearer " + token.accessToken
            }
        })
        .then(response => {
            context.user = response.data;
        });

I can verify the token is in the header like so:

Authorization
Bearer eyJ0eXAiOiJKV1QiLCJub25…8Wt1C6ni32UZUwV-53hp53jxHG38w

But receiving this error:

Bearer error="invalid_token", error_description="The signature is invalid"

This answer might be useful: stackoverflow.com/questions/47953476/… — Bill Sambrone

TiagoBrenck TiagoBrenck · Accepted Answer · 2019-09-13T21:51:27

You are getting an access token for MS Graph. Your Web API is not Graph, so it is expected that it will reject the token.

What you want to do instead is to create a scope for your web api (in Azure Portal > Your API > Expose an API). Then configure it on your client app on the API Permissions menu tab. Then add it on your scopes collection:

export const authParams = {
scopes: [
    'https://graph.microsoft.com/User.ReadBasic.All',
    'https://graph.microsoft.com/profile',
    'https://graph.microsoft.com/User.Read',
    'https://myWebApiUri/MyScope',
]
};

React/.Net Core Authentication with Azure AD MSAL

1 Answers