MSAL javascript library, getting "client_id_aud_mismatch" error when trying to get access token

I'm using msal in an angular app inside an Outlook Add-in. Using IPublicClientApplication which gets initialized in the Office.onReady event like this:

import { createNestablePublicClientApplication, IPublicClientApplication } from "@azure/msal-browser";

declare var entraAppId: string;
declare var entraTenantId: string;
declare var pca: IPublicClientApplication;

Office.onReady(async info => {
pca = await createNestablePublicClientApplication({
auth: {
clientId: entraAppId,
authority: entraTenantId
}
})
});


Now, this works fine in all browsers on Windows. When I tried it on my own Mac/Safari, it worked fine. But I have one customer on a mac where these are the results, in Safari or Chrome, in private/incognito or not:

declare var pca;

var tokenRequest = {
scopes: ["Mail.read", "User.read", "openid", "profile"]
};
const try1 = await pca.acquireTokenSilent(tokenRequest); // results in: ServerError: client_id_aud_mismatch
const try2 = await pca.acquireTokenPopup(tokenRequest); // results in: ServerError: client_id_aud_mismatch


As far as I'm aware, the customer's Microsoft Entra configuration for the outlook add-in is correct. App permissions are granted, the redirect uri is correctly configured, the client id and tenant id are correctly copied to the add-in application. I cannot find any documentation on, nor anyone else asking about, client_id_aud_mismatch

What is the issue here?

Continue reading...