Firebase signInWithPopup gives auth/popup-blocked when used via built-in browser in mobile device

Question

Problem: When used via 3rd-party app built-in browser (e.g. LINE, Twitter or Facebook messenger), the signInWithPopup returns auth/popup-blocked. The explanation by Firebase docs is:

• auth/popup-blocked: Thrown if the popup was blocked by the browser, typically when this operation is triggered outside of a click handler.

Typical sequence triggering this error is: Link of my web app is sent to LINE, Twitter or Facebook messenger. When user uses mobile device and opens that link in those apps, their built-in browser is opened. Calling signInWithPopup then returns the error. The behavior is slightly different in iOS and Android but at least iOS/LINE combination results the error.

I am using Angular and building a web app. The error message is Unable to establish a connection with the popup. It may have been blocked by the browser. which comes from the firebase.js - not my own text.

When used in a normal browser, the signup works just fine.

Any ideas why the built-in browsers and signInWithPopup do not work together?

Solution 1

Firebase authentication should start with some user interaction, such as click on button. This solved the problem for me.

Solution 2

Many in-app embedded browsers block popups. I ran into the issue on instagram. Try using signInWithRedirect instead of signInWithPopup when kicking off the Oauth call.

Firebase documentation on usage of both methods can be found here - https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithPopup

Solution 3

signInWithPopup() is for the browser, however, if you're running iOS or Andriod emulator or device, you need to call signInWithCredential.

signInWithFacebook() {
    if (this.platform.is('cordova')) {
      return this.fb.login(['email', 'public_profile']).then(res => {
        const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
        return firebase.auth().signInWithCredential(facebookCredential);
      })
    }
    else {
      return this.afAuth.auth
        .signInWithPopup(new firebase.auth.FacebookAuthProvider())
        .then(res => console.log(res));
    }
  }

If you're using Ionic + Firebase, you can find more info here

Solution 4

I have the same issue, with my web app on facebook ads campaign. I change my code from popup to redirect.

googleAuth() {
      firebase
        .auth()
        .getRedirectResult()
        .then(function(result) {
          this.showLoading = true;
          if (result.credential) {
            var token = result.credential.accessToken;
            console.log(token);
          }
          var user = result.user;
          console.log(user);
        });
      this.showLoading = true;
      const provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope("profile");
      provider.addScope("email");
      firebase.auth().signInWithRedirect(provider);
    }
  }

The problem now is save my utms from campaigns, because with redirect you lose them.

View more solutions