Acquire access token from API using AzureB2C

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.20.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.0.6

Public or Confidential Client?

Public

Description

I am trying to implement a signup-signin process to allow external users into our application using AzureB2C. My angular application and API are currently protected using Azure AD authentication with the PKCE flow. I have added a service principal for the API registration from the Azure AD tenant in the Azure B2C tenant. I have added the necessary scopes in the AzureB2C client app registration. However, when I try to login using loginRedirect() I only get back an Id Token and Refresh Token and am unable to access the API. I am not super familiar with creating a multi-tenant application, so I am unsure if my approach is correct. Any help would be greatly appreciated!

MSAL Configuration

[
    {
        "AzureAd" : {
            "config" : {
                "auth" : {
                    "authority" : "https://login.microsoftonline.com/{tenantId}",
                    "redirectUri" : "http://localhost:4200"
                },
                "cache" : {
                    "cahceLocation" : "localStorage",
                    "storeAuthStateInCookie" : false
                }
            },
            "guard" : {
                "interactionType" : "popup",
                "authRequest" : {
                    "scopes" : ["https://{azureADTenantdomain}.onmicrosoft.com/{apiClientId}/access_as_user"]
                }
            },
            "interceptor" : {
                "protectedResourceMap" : [
                    ["https://localhost:5445/api/*", ["https://{azureADTenantdomain}.onmicrosoft.com/{apiClientId}/access_as_user"]],
                    ["https://graph.microsoft.com/v1.0/", ["User.Read", "User.ReadBasic.All"]]
                ]
            }
        } 
    }, 
    {
        "AzureB2C": {
            "config" : {
                "auth" : {
                    "authority" : "https://{b2cTenantDomain}.b2clogin.com/{b2cTenantDomain}.onmicrosoft.com/B2C_1_{susi_flow}",
                    "knownAuthorities" : ["{b2cTenantDomain}.b2clogin.com", "{azureADTenantdomain}.onmicrosoft.com"],
                    "redirectUri" : "http://localhost:4200"
                },
                "cache" : {
                    "cahceLocation" : "localStorage",
                    "storeAuthStateInCookie" : false
                }
            },
            "guard" : {
                "interactionType" : "popup",
                "authRequest" : {
                    "scopes" : ["https://{azureADTenantdomain}.onmicrosoft.com/{apiClientId}/access_as_user"]
                }
            },
            "interceptor" : {
                "protectedResourceMap" : [
                    ["https://localhost:5445/api/*", ["https://{azureADTenantdomain}.onmicrosoft.com/{apiClientId}/access_as_user"]]
                ]
            }
        }
    }
]

Relevant Code Snippets

No response

Identity Provider

Azure B2C Basic Policy

Source

External (Customer)

[AniTang99]

@derisen I was able to add another authentication scheme in addition to the Azure AD scheme and now the API correctly checks for either token! Thank you for your help.

[AniTang99]

@derisen After cleaning the slate and rewriting the login process step by step, I am now successfully able to get an access token! However, now my API is rejecting the access token due to an invalid signature. The API successfully accepts tokens when logging in as a user from the Azure AD tenant so do I need to somehow match the signature of the tokens, or should my API be configured somehow to handle both the Azure AD and B2C tokens? Thank you for your guidance!!

API is an ASP.NET Core web api