How to use inside a Chrome extension popup?

[JamesBrill]

Context

I would like to sign in a user via a Chrome extension popup menu. I know I have configured my Firebase application for Google and Facebook auth correctly as this works fine in my extension's companion web app. The email/password flow works inside the extension popup.

I am using the popup signInFlow as the redirect flow wouldn't make sense from inside an extension popup.

Issue

The issue is that the OAuth flows for Google and Facebook do not work in the extension popup. Here is the flow I would expect:

• Open Chrome extension popup menu
• Click on the Facebook button
• Popup window is opened prompting user to log in with Facebook
• Popup window is closed
• The signInSuccessWithAuthResult callback is called inside the extension popup

Instead, this happens:

• Open Chrome extension popup menu
• Click on the Facebook button
• Popup window briefly opens and then closes
• Extension popup closes

[EDIT] I suspect this may be due to behaviour of Chrome extension popups - the popup closes automatically due to the other window closing, despite it being a child window.

Questions

• Are Firebase OAuth sign-ins even possible from a Chrome extension popup? The domain triggering the OAuth flow would be chrome-extension://<id>, which I've added to the authorised redirect URLs for the Firebase app, though I wouldn't have thought this necessary given I'm using the popup flow. Maybe OAuth needs to be initiated from a domain using the HTTP or HTTPS protocol, I'm not sure.
• Is there something missing in my manifest.json (see below)?

Happy to provide further context if needed.

Issue GIF

manifest.json

{
  "manifest_version": 2,

  "name": "Soapstone",
  "description": "",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.bundle.js"],
      "css": ["content.css"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "https://ajax.googleapis.com/",
    "contextMenus",
    "storage"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com; object-src 'self'"
}

[bojeil-google]

FirebaseUI does not support OAuth sign in for chrome extensions. Chrome extensions requires different logic to work: https://firebase.google.com/docs/auth/web/google-signin#authenticate_with_firebase_in_a_chrome_extension

Quoting: "Only popup operations (signInWithPopup and linkWithPopup) are available to Chrome extensions, as Chrome extensions cannot use HTTP redirects. You should call these methods from a background script rather than a browser action popup, as the authentication popup will cancel the browser action popup."

Refer to the last sentence above. The script has to be called from the background script and not the browser action popup.

I will file this one as a feature request.

[Luiz-N]

Any suggestions on how to achieve this in the meantime? I'm hoping to do the same with a GitHub button.

[sahilprasad]

@JamesBrill @Luiz-N were you guys able to find a workaround to this? I'm also dealing with this issue.

[JamesBrill]

@sahilprasad I'm afraid not - I simply moved the sign-in flow to a separate webpage and linked to it from the popup.

[The-Don-Himself]

I hope I don't get downvoted... but I've personally solved this with a good old iframe.

[adampopkiewicz]

@The-Don-Himself with iframe I get issues with auto-fill, only email is show, did you experience/fix such problem?

[The-Don-Himself]

@adampopkiewicz No. iframe poses no issue at all if it can work on the page without the iframe, then it will work exactly the same within the iframe because even things like recaptcha will just work. What I can think of off the top of my head if you are facing issues is :- 1.) SSL This library will only work on SSL enabled websites (with the only exception of localhost) 2.) Make sure whatever framework or CMS you are using does not send headers to block itself from being embedded in an iframe, at least for the page(s) with firebase-ui

All the best!