How to fix Invalid token error in azure adb2c, error description : Signature key not found

Question

I am attempting to implement Azure AD B2C authentication in my .NET + Angular application. For this purpose, I am utilizing a custom policy to enable multi-tenancy. During the configuration process, I initially tested it with the jwt.ms reply URL, and everything functioned as expected. However, when I integrated it into my application, I encountered issues. Although the tokens (ID tokens and access tokens) are returned, when I call my API and include the token, I encounter an error stating that the signature key was not found.

I have created the following applications on Azure:

• Identity Experience Framework with client id = dab...
• Proxy Identity Experience Framework with client id = a857...
• app_logicly with client id = 6ecb... (To configure the identity provider, Microsoft Entra ID)
• xyz.Io with client id = bd16... (for frontend app)
• xyz API with client id = 55f... (for backend app)

Inside the .NET Web API, I have configured as follows:

"AzureAd": {
  "Instance": "https://tenant-name.b2clogin.com/",
  "Domain": "tenant-name.onmicrosoft.com",
  "TenantId": "common",
  "ClientId": "55f.... backend app client id",
  "ClientSecret": "backend app client secret",
  "SignUpSignInPolicyId": "B2C_1A_SIGNUP_SIGNIN",
  "Authority": "https://tenant-name.b2clogin.com"
},
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAd"));

Inside Angular, I have configured as follows:

export const environment = {
  production: false,
  apiBaseUrl: "https://localhost:44348/api/",
  authentication: {
    "credentials": {
      "clientId": "bd162.... front end application client id",
      "authority": "https://tenant-name.b2clogin.com/tenant-name.onmicrosoft.com/B2C_1A_SIGNUP_SIGNIN",
      "knownAuthorities": ["tenant-name.b2clogin.com"]
    },
    "configuration": {
      "redirectUri": "http://localhost:4200",
      "postLogoutRedirectUri": "http://localhost:4200"
    },
    apiScope:"https://tenant-name.onmicrosoft.com/api/api-scope"
  }
};

I am seeking solutions to resolve the token error and how to configure Azure AD B2C custom policy in my Angular + .NET multi-tenant application. Please note that I have Microsoft as the only identity provider. The following articles were referred to:

1. Tutorial: Create user flows and custom policies in Azure Active Directory B2C
2. Set up sign-in for multitenant Microsoft Entra ID using custom policies in Azure Active Directory B2C
3. Configure authentication in a sample Angular single-page application by using Azure Active Directory B2C
4. Enable authentication in your own web API by using Azure AD B2C

Answer 1

Hi @Chirag Chavda ,

Thanks for reaching out.

1.For B2C application, application should be registered as Accounts in any identity provider or organizational directory (for authenticating users with user flows) under supported account types to allow users from everywhere.

The link you are referring for multi-tenant application is to configure Micrsoft Entra (multi tenant as IDP) and not for B2C multi-tenant application. B2C allow all kinds of users.

2. Also, the configuration you are passing as

"TenantId": "common" 

in B2C configuration is not correct.

Please refer the sample of Angular single-page application that authenticates users with Azure AD B2C and calls a protected.NET Core web API.

https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/3-Authorization-II/2-call-api-b2c

Hope this will help.

Thanks,

Shweta

Please remember to "Accept Answer" if answer helped you.