Getting error using Firebase popup authentication in Word add-in

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