MSALjs with Single Page App makes debugging impossible - single-page-application

Question

I'm not sure how to explain this succinctly, first part, Implicit flow. I don't exactly understand what implicit flow is. I haven't distilled it down in to a single sentence. Is it a design pattern or a way of handling tokens, both, I dunno.
Working with a pretty basic JavaScript Single Page Application and implementing Msal version 1.2.1. Each time an msalClient gets a token for a scope it leaves behind an iFrame to handle token refreshing.
window.msalConfig = {
auth: {
clientId: '<clientId>'
, authority: "https://login.microsoftonline.com/common"
, validateAuthority: true
}
, cache: {
cacheLocation: "localStorage"
}
, graphScope: {
scopes: ["https://graph.microsoft.com/User.Read", "https://graph.microsoft.com/Mail.Send" ]
}
, appScope: {
scopes: ["<clientId>"]
}
, appToken:{
token: null
}
, graphToken:{
token: null
}
};
clientApplication = new Msal.UserAgentApplication(window.msalConfig);
function onSignin(idToken) {
clientApplication.acquireTokenSilent(window.msalConfig.appScope)
.then(function (token) {
window.msalConfig.appToken.token = token;
}, function (error) {
clientApplication.acquireTokenPopup(window.msalConfig.appScope).then(function (token) {
window.msalConfig.appToken.token = token;
}, function (error) {
console.log(error);
});
});
getGraphToken();
};
function getGraphToken() {
clientApplication.acquireTokenSilent(window.msalConfig.graphScope)
.then(function (token) {
window.msalConfig.graphToken.token = token;
}), function (error) {
console.log(error);
};
};
These iFrames just sit here and refresh periodically, presumably getting a new token, or keeping it alive on the other end. (When in the chrome debugger each refresh throws me to the Sources tab, this is makes debugging nearly impossible.)
Also, wondering why cross site cookie errors are being thrown when working with the Graph Scope but not the App Scope.
Curious why this is closed, This still seems to be present.
https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/697

Answer 1

The Implicit Flow is one of the flows for acquiring tokens in OAuth, and is especially well-suited for single-page applications, as it does not require a server component. As you observed, it uses iframes to acquire tokens. You can read more about the Implicit Flow here: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow
The SameSite cookie warnings are expected, as there are some cookies on login.microsoftonline.com have been intentionally left without the SameSite attribute. All of the cookies for login.microsoftonline.com that are needed for authentication have been updated. You can read more here: https://learn.microsoft.com/en-us/azure/active-directory/develop/howto-handle-samesite-cookie-changes-chrome-browser?tabs=dotnet
For issue 697, the main issue of your application being reloaded in a hidden iframe has been addressed in v1.2.0, which now allows you to specify a page without MSAL or any other content (e.g. a blank html page) as your redirect URI, which mitigates the performance overhead of reloading your application in the iframe/popup. You can also set your redirect URI per request, in case you need a different URI that the one set in the configuration.
And if you find iframes difficult to debug, know that we are working a new version of the library which will use the Auth Code Flow w/ PKCE (instead of the Implicit Flow) to acquire tokens, which will use CORS http requests to obtain tokens, instead of iframes. We are planning to have that available this month.