Here's the answer I ended up with.
When I followed several different tutorials to get a working model, I ended up configuring my application in alignment with MSAL v1 specifications which wont work with some of the APIs. In this case, the secure score API doesn't work with implicit authentication so moving to MSAL v2 and using the PKCE flow is all you need to do.
I was using react + MSAL.JS and the change was pretty simple.
If you are using "UserAgentApplication", switch to "PublicClientApplication" and make sure the application has disabled the implicit authentication flows. You may also need to update your token acquisition calls.
Sample from my working solution:
import {PublicClientApplication} from '@azure/msal-browser';
const msalConfig = {
auth: {
clientId: "xxxxx-xxxx-x-x-x-xx-xxx"
authority: "https://login.microsoftonline.com/common",
redirectUri: "http://localhost:3000",
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
}
};
const msalLoginRequest = {
scopes: ["User.Read"]
};
const graphTokenRequest = {
// GraphApi
scopes: ["Policy.Read.All", "Directory.Read.All", "SecurityEvents.Read.All", "SecurityEvents.ReadWrite.All", "SharePointTenantSettings.Read.All"]
}
const myMsalObj = new PublicClientApplication(msalConfig);
clientEvents.push("Logging in to Microsoft...")
myMsalObj.acquireTokenPopup(msalLoginRequest)
.then((loginResponse) => {
console.log(loginResponse)
idToken.push(loginResponse)
clientEvents.push("Login successful, retrieving access token...")
myMsalObj.acquireTokenPopup(graphTokenRequest )
.then((response) => {
clientEvents.push("Retrieved access tokens...")
setAccessToken(response.accessToken)
})
.catch((error) => {
clientEvents.push("Error getting access token...")
console.log(error)
})
})
.catch(function (error) { console.log(error) })