MSAL - use two different clientid from different directory - azure

Question

I have an application that will be used by two different entities and each entity have their own Azure Active Directory.
Initially, the code I am using is:
var msalConfig = {
auth: {
clientId: '<client-id-1>'
authority: "https://login.microsoftonline.com/<tenant-id>"
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
};
Now what I want to happen is, can I put two different client ID, and tenant ID?
I could use multiple tenant in the first AAD, but I want to limit it to only two tenants. What should be my approach here?

Answer 1

You could try using the Factory pattern and create a method that will instantiate the clientApplication for the proper client. For example:
const msalConfigFoo = {
auth: {
clientId: '<client-id-1>'
authority: "https://login.microsoftonline.com/<tenant-id>"
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
};
var msalConfigBar = {
auth: {
clientId: '<client-id-2>'
authority: "https://login.microsoftonline.com/<tenant-id>"
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
};
function getClientApplication(clientType) {
if (clientType == "foo") {
return new Msal.UserAgentApplication(msalConfigFoo);
} else {
return new Msal.UserAgentApplication(msalConfigBar);
}
}

Answer 2

Question: I could use multiple tenant in the first AAD, but I want to limit it to only two tenants. What should be my approach here?
Answer: if you develop a multiple-tenant AD application, you can validate "id_token" with its issuer after your users log in. For example :
var msalConfig = {
auth: {
clientId: 'b0114608-677e-4eca-ae22-60c32e1782d9', //This is your client ID
authority: "https://login.microsoftonline.com/common" //This is your tenant info
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
};
var graphConfig = {
graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};
// create a request object for login or token request calls
// In scenarios with incremental consent, the request object can be further customized
var requestObj = {
scopes: ["user.read"]
};
var myMSALObj = new Msal.UserAgentApplication(msalConfig);
// Register Callbacks for redirect flow
// myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack);
myMSALObj.handleRedirectCallback(authRedirectCallBack);
// difine issuers
var issuers = new Array();
issuers[0]="https://login.microsoftonline.com/{TenantId}/v2.0";
issuers[1]="https://login.microsoftonline.com/{TenantId}/v2.0";
function signIn() {
myMSALObj.loginPopup(requestObj).then(idToken => {
var issuer =String(idToken.idToken["issuer"])
console.log(issuer)
if(issuers.indexOf(issuer) != -1){
//login successfully then your users can do otherthing
}else{
// your users use a wrong account
}
}).catch(function (error) {
//Please check the console for errors
console.log(error);
});
}
For more details, please refer to the document