Angular MSAL - doubts about Bearer token and AUD property

I'm trying to set up MSAL library to login in to the Azure AD. Using the redirect flow in the APP_INIT, I'm able to login and obtain the token. This is the config I use:

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '4015ef49-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      authority: 'https://login.microsoftonline.com/2716828a-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      protocolMode: ProtocolMode.OIDC,
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: false
    },
    system: {
      // ... just logging
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('/', ['api://15c38238-xxxx-xxxx-xxxx-xxxxxxxxxxxx/api.test']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

Everything works fine, when user navigates to the page, they are immediately redirected to Azure Login screen, authenticated, navigated back and BEARER token can be seen attached to user/getInfo endpoint.

RAQABAAIAAAD--DLA3WO7QrddgJg7WeWrjQWKU1S2_FUBT2YAGgf8warZb_WeNfmM_d77BrbdQ8YxZ1rRq6xlREbnz1C5GRF1MikYUBKMs4wCUFbKju3AniERix1K1ZISi3RNgQjyS4rILQ8JhYfYL5adMWzfr1UjKheKZkdG8aZRHfRxi7DZua3WLYW5sAdBRWYttjQXWIJeFmRZbLDHUhhdYSRSxHGRli4tXQkcJtRtJOcWRY3EmQOAARRqcLJr8R3-EgRsmM3HNdGwbfBqRsjnNE6uass_t3YIzMib_CsfZAHGWnReutIl-x83a_wjWAWff8o3NlA65LXwaCI08n-Yeo8ji8-1fnS0iw1zEUh-nLsfdDCRWs0aF-zkuyoZSq52r28u2ujRz4HddWScQsZJJ6sUJCWScWGgLwXKGagEcyCHcIjZ-0-c5yIzyqRlcWRry5ZaqCTndU3GDhRmqDki5F1qQkY1HExqHKWxJDRH87YZ4brXrIdqLt1d8R2ufrqbWRQHMQHNqMCU8hNbS80mfEsnClf4OLNIQqW0A3LKyKIecuUnK5YCxtIhb8R8hUW4-M17hnG-5GmfRZOGODhbTqsYos1cIAA

But, as you can see, it's an opaque string and I can't tell what it contains. When I check the ID token I see that the AUD property has the value of a clientId provided in the config:

aud: '4015ef49-xxxx-xxxx-xxxx-xxxxxxxxxxxx'

Then when I check the Local Storage, I can find a key which contains provided WEB API resource:

target: "api://15c38238-xxxx-xxxx-xxxx-xxxxxxxxxxxx/api.test"

BE guy tells me, that the BEARER is incorrect and it should be standard JWT which we can parse. I have no idea if it is correct or not.
Then we both have doubts about AUD, shouldn't it be equal to the WEB API clientId? Like this?

aud: '15c38238-xxxx-xxxx-xxxx-xxxxxxxxxxxx'

At the moment, our Rest API throws 401 and I can't tell if it's because of some misconfiguration on the FE side, or if it's a BE problem? Is my config correct?

So we figured it out, finding issues on both FE and BE side. As for the Angular code, there are two things I changed.

1. Removed OIDC protocol. I thought it's a must when using OAuth approach, but it isn't as it turns out.

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '4015ef49-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      authority: 'https://login.microsoftonline.com/2716828a-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      //protocolMode: ProtocolMode.OIDC, // After removing, Acces token arrives in standard JWT format
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    // ...
  });
}

2. Added scopes directly to the login redirect call.

const request: RedirectRequest = {
  scopes: [api://15c38238-xxxx-xxxx-xxxx-xxxxxxxxxxxx/api.test]
  // Add required 3rd party Web API scope to the redirect call
  // Works with popup login too.
};

return msal.loginRedirect(request).pipe(map(() => true));

That solved it.