Getting error using Firebase popup authentication in Word add-in - authentication

Question

I was already using Firebase for authentication for other (related) projects and would like to stick with it.
Using Firebase with a Word add-in seems challenging. On Windows you're stuck with IE11 and on Mac (crucial for me) the browser used to load a taskpane is webkit, not the default browser.
I can get authentication on Windows to work just fine if I use signInWithRedirect (Google and Facebook).
But this won't work on Mac. Using signInWithRedirect opens a new tab in the default browser, which doesn't share cookies/data with the webkit browser the add-in actually uses.
When I switch to signInWithPopup, I get:
There is no application set to open the URL about:invalid%23zClosurez.
On Windows I get a popup IE11 window, for a split second, and it contains about:invalid%23zClosurez for a URL.
I have appdomains called out in my add-in XML manifest:
<AppDomains>
<AppDomain>https://writeitwithme-a114a.firebaseapp.com</AppDomain>
<AppDomain>https://www.firebaseapp.com</AppDomain>
<AppDomain>https://www.googleapis.com</AppDomain>
<AppDomain>https://www.facebook.com</AppDomain>
</AppDomains>
Any help appreciated. Worst case I drop to using manual registration, via Firebase, for Mac, but seems unfortunate to have to give up.

Answer 1

Just documenting for anyone finding this later.
I couldn't figure out how to use Firebase social login when creating an add-in for Mac. Every authentication window opened in the default browser, not the webkit engine used by Word on Mac. Sticking with manual login worked.
IE11 is always finicky when using localhost. I test elsewhere, then push files live and then try IE11 and social + manual login (via popup) works just fine.

Answer 2

I found the following resources from Microsoft docs that made this easier for me:
https://learn.microsoft.com/en-us/office/dev/add-ins/develop/dialog-api-in-office-add-ins
Basically you need to make a call to open up a dialogue box:
Office
.context
.UI
.displayDialogAsync(
'https://myDomain/myDialog.html',
{height: 30, width: 20, displayInIframe: true}
);
Then you can make your own page that does a login flow and passes a message (likely a credential of some kind) back to your plugin via the messageParent method:
Office.context.ui.messageParent(googleProfile);
From there you can do the following to sign in with the credential provided in your add-in:
firebase.auth().signInWithCredential(credential)
Also, be very careful with how you construct the URL of the dialogue box. I lost hours not knowing that the _host_Info param from the origin URL would mess stuff up (I was constructing my new URL from the origin URL). Figured it out in this github issue: https://github.com/OfficeDev/office-js/issues/378