Is it possible access and authenticate multiple API's with msal and Azure AD in a single angular client app

Question

We have around 2 ASP.NET WEB API's + 1 python API, which was being consumed by a single angular 6 client app.This had been working fine. However, once we decided to implement authentication(OAuth 2.0 + Azure AD) in the API's, we are not sure if the angular msal library will support such a scenario or not ?

1. We registered API's as individual app's in Azure AD, however with this approach, we found that the msal library did not allow for multiple API (app id's)

2. We tried to register both API's as a single app in the Azure AD, however with this approach the client was getting a CORS issue, while calling the Microsoft login endpoint

All of the API's work as expected while testing from Postman

Answer 1

To answer your first question 'Is it possible access and authenticate multiple API's with msal and Azure AD in a single angular client app', yes.

To call two different APIs using MSAL (Microsoft Authentication Library), you would need to create two instances of the PublicClientApplication class, each with its own configuration.

You would then use the acquireTokenSilent or acquireTokenPopup method on each instance to acquire an access token for the corresponding API. Once you have the access tokens, you can use them to make authenticated API calls.

const { PublicClientApplication } = require("@azure/msal-node");

// Configuration for API1
const api1Config = {
    clientID: "YOUR_API1_CLIENT_ID",
    authority: "https://login.microsoftonline.com/YOUR_TENANT_ID",
    scopes: ["https://management.azure.com/.default"]
};
const api1App = new PublicClientApplication(api1Config);

// Configuration for API2
const api2Config = {
    clientID: "YOUR_API2_CLIENT_ID",
    authority: "https://login.microsoftonline.com/YOUR_TENANT_ID",
    scopes: ["https://management.azure.com/.default"]
};
const api2App = new PublicClientApplication(api2Config);

// Acquire token for API1
api1App.acquireTokenSilent({ scopes: api1Config.scopes }).then(api1Token => {
    // Use the token to call API1
    const headers = {
        "Authorization": `Bearer ${api1Token.accessToken}`
    };
    fetch(API1_URL, { headers: headers }).then(response => {
        // Handle API1 response
    });
});

// Acquire token for API2
api2App.acquireTokenSilent({ scopes: api2Config.scopes }).then(api2Token => {
    // Use the token to call API2
    const headers = {
        "Authorization": `Bearer ${api2Token.accessToken}`
    };
    fetch(API2_URL, { headers: headers }).then(response => {
        // Handle API2 response
    });
});