Unable to Authenticate to DevOps API with Angual MSAL

I'm attempting to authenticate an Angular application that is already using the Angular MSAL library to Azure DevOps's API.

However, I am getting a HTTP 203 response when attempting to call the API:

this.http.get<any>(`https://dev.azure.com/${org}/${proj}/_apis/wit/workitems/${id}?api-version=7.1`).subscribe({
next: (x) => (this.debug = x),
error: (e) => (this.debug = e),
});


Returns:



I have registered the necessary permissions for my application on Azure Portal:



I have followed the configurations setup:

protectedResourceMap = new Map([
['https://graph.microsoft.com/v1.0/me', ['user.read']], // MS Graph
['499b84ac-1321-427f-aa17-267ca6975798', ['vso.work_full']], // DevOps
[`${config.auth}/authenticate/register.json`, [`api://${CLIENT_ID}/access_as_user`]], // LAPI
]);



and

authRequest = {
scopes: [
`api://${CLIENT_ID}/access_as_user`, // MS Graph
'https://app.vssps.visualstudio.com/user_impersonation', // DevOps
'499b84ac-1321-427f-aa17-267ca6975798/user_impersonation', // DevOps
'api://499b84ac-1321-427f-aa17-267ca6975798/.default', // DevOps
],
};


I've tried following this documentation:

• DevOps Auth Sample
• Authentication Library DevOps Demo
• DevOps Guide to Authentication

I feel like I am probably missing something obvious, but can't get past the HTTP 203 error

Continue reading...