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

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

I followed the steps, running the api in two diferent ways: from visual studio using IIS express and from the console as described in the steps.

Any log messages given by the failure

I’m able to open the page, gets a bearer token, but when accessing the todolist page I get the following errors, two different errors, according to how I run the api:

1. If running from Visual Studio: 401 - Bearer error=“invalid_token”, error_description=“The signature key was not found”

2. If running from a console with “dotnet run”: Err_Cert_Authority_Invalid

Expected/desired behavior

Expected to get access to the todolist page.

Browser and version

Chrome, Edge, Firefox, Safari? Chrome, newest (92)

[jeevasusej]

Thank you @derisen

[derisen]

@jeevasusej no you can’t. You’ll need an access token for your web API (the aud claim in the token will be the clientId of your web API, and scp claim will be its scope that you’ve exposed during app registration).

The sample is already configured to do this (see the doc). In auth-config.ts, we have the protectedResources object:

export const protectedResources = {
  todoListApi: {
    endpoint: "https://localhost:44351/api/todolist",
    scopes: ["Enter_the_Web_Api_Scope_here"], // e.g. "api://<service-app-client-id>/access_as_user"
  },
}

Then in app.module.ts, we set protectedResourceMap object:

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();

  protectedResourceMap.set(protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };