Firebaseui-web: Chrome extension signInSuccess never called

[arthabus]

I'm developing a chrome extension and trying to signup/login with email/password inside browser_action popup. The UI shows correctly, and flow seems to work as expected. During signup, user is created in the associated firebase application, however signInSuccess is never called. Neither it's called if I try to login that user after the sign up. No error in console, nothing on UI - the login progress bar shows and hides in a second.

As per onAuthStateChanged, user is alwasy null:

firebase.auth().onAuthStateChanged(function (user) {
   console.log(user)
   alert(user)
});

What am I missing here?

From the code below, alert("uiShow") is shown, but alert("Signed in as ..") never

the auth code:

uiConfig = {
    signInSuccessUrl: 'http://google.com',
    signInOptions: [
        {
            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
            requireDisplayName: false
        }
    ],
    signInFlow: 'popup',
    callbacks: {
        signInSuccess: function (currentUser, credential, redirectUrl) {
            alert("Signed in as " + currentUser + " with credential " + credential);
            return false;
        }.bind(this),
        uiShown: function () {
            alert("uiShow");
        }
    },
    tosUrl: 'http://google.com'

};

var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

[bojeil-google]

Just tested it and I can't replicate it. BTW, I disabled the alert on uiShown since it will close the chrome extension. I was able to start FirebaseUI in a chrome extension browser action popup with email sign in enabled and credential helper disabled and it worked as expected. The signInSuccess callback triggered successfully and I am getting back a currentUser.

This is my config which is similar to yours:

      var uiConfig = {
        signInSuccessUrl: 'http://google.com',
        credentialHelper: firebaseui.auth.CredentialHelper.NONE,
        callbacks: {
          signInSuccess: function(currentUser, credential, redirectUrl) {
            console.log('sign in success');
            console.log(currentUser);
            return false;
          },
          uiShown: function () {
            console.log("uiShow");
          }
        },
        signInFlow: 'popup',
        signInOptions: [{
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }]
      };

      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // The start method will wait until the DOM is loaded.
      ui.start('#firebaseui-auth-container', uiConfig);

If you are using a CSP, you can use something similar to mine:

"content_security_policy": "script-src 'self' https://www.gstatic.com https://apis.google.com https://www.googleapis.com https://securetoken.googleapis.com https://www.google.com; object-src 'self'",
"permissions": [
     "https://*/*",
     "activeTab",
     "background"
  ],

[arthabus]

Thanks for your response. I wish it works on my side as well but the callback is still not executed on my side.
If you could send the test project you are using on your side to artem.bogush.[email protected] that would be much appreciated.

Here is the CSP I was using which is slightly different from yours:
"content_security_policy":"script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://cdn.firebase.com https://www.googleapis.com ; object-src 'self'",
the credentials.html headers are (browser_action popup):

  <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js"></script>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
  <script src="credentials.js"></script>

credentials.js - is the js with initialization of firebse and FirebaseUI flow as i posted above.

I'm also using oauth in manifest in case it makes any difference:
"oauth2": {
"client_id": "key-from-the-firebase-project: numbers-bunchofletters.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
},

Is there any way to enable debug/error logs n firebase/firebaseUI side or any way to diagnose the possible problem?

[bojeil-google]

Can you check first that the underlying core SDK works? try calling signInWithEmailAndPassword directly and check if that signs in a user and triggers the onAuthStateChanged listener.

[arthabus]

Yep, already switched to that temporarly - I confirm that it works and firebase.auth().onAuthStateChanged returns current user. Still nothing with firebaseUI on my end, unfortunately.

[arthabus]

If you still could send the test project, I would much appreciate that.

[bojeil-google]

Hey @ArtemBogush I think I am able to replicate your issue now. Not sure why this is not happening in my application. I will investigate to figure out the reason.

[bojeil-google]

Ok, this is quite strange. This seems to be related to some compilation issue for some reason.
This happens with the cdn open source build: https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js
It works with the gstatic build:
https://www.gstatic.com/firebasejs/ui/2.5.1/firebase-ui-auth.js

I was testing with the latter and that is why I couldn't replicate it. For now, use the latter. I will keep investigating.

[arthabus]

You are the saver!! Thanks a ton! Now it works!

Initially, I've found the CDN link on the readme page when I was following the tutorial under the "Option 1: CDN":
https://github.com/firebase/FirebaseUI-Web#installation

Probably makes sense to update the link there so others don't waste 2 days with that like I did :)

Thanks again!

[arthabus]

Probably I'm asking too much, but is it possible to handle logged in user with the firebaseUI? Like to show basic info with logout button if they are logged in and the login/signup flow otherwise?

[bojeil-google]

Let's keep this thread focused on the current issue. For signOut, you need to build your own component. You can call the core SDK with that API. We have plans to add account management UI: https://github.com/firebase/firebaseui-web/issues/31

[bojeil-google]

The underlying issue here seems to be related to the use of eval in some closure dependency:

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https://www.gstatic.com https://apis.google.com https://www.googleapis.com https://securetoken.googleapis.com https://*.firebaseio.com https://cdn.firebase.com https://www.google.com".

[bojeil-google]

I think we may be using an older version of closure that is causing this issue and this is why it only manifested in the open source version.

[arthabus]

Thanks, appreciate your help!

[bojeil-google]

You're welcome. Thanks for reporting this issue! The fix is in the repo. We'll probably do a release next week with some other stuff. In the meantime, you can continue using the gstatic version.

[bojeil-google]

This should be now fixed in firebase hosted CDNs:
https://github.com/firebase/firebaseui-web/releases/tag/v2.6.0