MSAL: Graph API Dialog blocked in Windows/Mac Clients

Trello
1

The native Windows and Mac Trello application are blocking Office Login Prompts. If you follow the Microsoft documentation and use their MSAL JavaScript libraries, they require the ability to open a dialog for authorization flow. This works great in the browser context, but for the native Trello applications this dialog just does not appear. Is there some way to permit that app to allow a popup? Or, has anyone else found a way to use MSAL in the native Trello clients?

2

I have scratched my head on this for two different Power-Ups. It appears there is NO WAY to interact with Microsoft Office/Microsoft Graph API from Trello Desktop.

For now, this is what I have had to implement:

/**
 * Verifies the app/browser is supported and notifies the user if show flag is set
 * @param {TrelloObject} t 
 * @param {Boolean} [show]
 * @returns {Boolean}
 */
const isSupported = (t, show = false) => {
    if(window.navigator.userAgent.indexOf("TrelloDesktop") > 0) {
        if(show === true) {
            try {
                t.popup({
                    type: 'confirm',
                    confirmText: "Ok",
                    onConfirm: (tt)=>tt.closePopup(),
                    title: 'Unsupported',
                    message: `The browser/application (TrelloDesktop) is not supported.`
                });
            } catch {}
        }
        return false;
    }
    // succeeded all tests...
    return true;
}
3

Having to come back to this…

@AtlassianSupport @AtlassianDeveloper

When I go into the Electron apps (Mac and Windows), if I add the OneDrive Power-Up, you have somehow caused a popup MSAL Authentication window to appear so that the user can log in. My users are SCREAMING at me because they want to use my Power-Ups that integrate with Office via the Electron app and I am sending them back to the browser.

@AtlassianSupport @AtlassianDeveloper -
How do I get the MSAL window/dialog to open the way you di it?

It appears somehow your OneDrive Power-Up is opening a new window and using the msal.loginRedirect() or aquireTokenRedirect(). I need to be able to do this too. How?

PLEASE HELP!

4

Well, after a whole weekend of hacking at it, I was able to get it to work with window.open().

I had been using the older msalObj.loginPopup() function and that works well in the browser, but failed in the electron apps.

When I tried window.open() and the msalAuthv2 redirect flow before, it was failing on me (blank page). Turns out because Trello was trying to init() on my windows. Stupid me - this was because in my webpack.config.js I was using a single index.html as a template for ALL my pages including the auth.html dialog, and it had the < script > tag for the Trello Power-Up library and bombed before it ever got started. But also… until just a few months ago there was not a developer tools option in the Help menu for the electron apps. So, debugging that booger was damn near impossible… it was because of the Developer Tools being added to the apps that I was finally able to catch Trello trying to initialize in my auth dialog. :open_mouth:

So some rules:

  1. Create an auth.html dialog that is wholly independent of your project, do not try to use a template.
  2. Make sure that html file is NOT loading the Trello libraries.
  3. Use window.open() and the redirect flow.

RESULT: Success!

Now, I am off to the races on making my users (and Trello users in general) happier! :slight_smile: