stuck in the Bearer error="invalid_token", error_description="The signature key was not found"

Question

I am trying to do Azure adb2c authentication in my dotnet + angular application and for the same I am using custom policy. Using custom policies for multi-tenancy and upon configuration, I firstly tested it with jwt.ms reply URL, and everything was working fine and as expected. However, when I attempted to integrate it with my application, that's where I faced some issues. The tokens (ID tokens and access tokens) are returned; however, when I call my API and include the token, I am met with an error that the signature key was not found.

I have created below applications on azure,

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

Inside the dotnet web api I have configured as below,

  "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 below,

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 finding solutions to resolve this token error as well as proper way to configure azure adb2c custom policy in my angular + dotnet multi-tenant application, Please note I am having IDP as Microsoft only.

Please note I am having IDP as Microsoft only. and below are the articles that I have refferred. 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