28

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?

Hannu Hytönen
  • 293
  • 1
  • 3
  • 6
  • 1
    I get `"Unable to establish a connection with the popup. It may have been blocked by the browser."` inconsistently in a browser when doing: `this.auth.login({ provider: AuthProviders.Google, method: AuthMethods.Popup }).then((data: FirebaseAuthState) => {` . Any ideas? – Richard Feb 03 '17 at 14:43

7 Answers7

10

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

Zdeněk Mlčoch
  • 722
  • 6
  • 17
  • 1
    Could you please provide more details? What do you mean by start with some user interaction? Should you put `this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())` into a click handler? – Dominik Sep 01 '19 at 15:54
  • 1
    It was something like if you create popup window in script stack not started by user interaction, browser resolved it as an pop up attack and block popup window. Put the code to onclick callback should be enough. – Zdeněk Mlčoch Sep 02 '19 at 15:18
  • I tried it by placing the `this.afAuth.auth .signInWithPopup(new firebase.auth.FacebookAuthProvider())` into the onClick callback of my Facebook Auth button but unfortuantely it is not working. – Dominik Sep 06 '19 at 06:15
9

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

Tope
  • 938
  • 2
  • 11
  • 15
3

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.

Pablo Fernandez
  • 143
  • 3
  • 9
2

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

Nadine Jerome
  • 66
  • 6
  • > This method is deprecated. Use firebase.auth.Auth#signInAndRetrieveDataWithCredential instead. https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithCredential – Otani Shuzo Mar 11 '19 at 16:13
  • 1
    @OtaniShuzo the method you claim is deprecated is exactly the one that is recommended over your recommendation – smac89 Mar 24 '22 at 21:54
1

The error "FirebaseError: Error (auth/cancelled-popup-request)" typically occurs when there is an issue with the authentication popup or the user cancels the authentication process. i had the same issue and i fixed it by making the function asynchronous:

const googleSignup = async (auth, provider) => {
  try {
    await signInWithPopup(auth, provider).then(result => console.log(result));
  } catch (error) {
    console.log(error);
  }
};
Houssem Rouabeh
  • 11
  • 1
0

You can fix this by doing the authentication in an async function, called from main():

void main() async {
  ...
  await initAuthentication();
  ...
}

Future<void> initAuthentication() async {
  GoogleAuthProvider googleAuthProvider = GoogleAuthProvider();
  FirebaseAuth.instance.authStateChanges().listen((User? user) async {
    if (user == null) {
      UserCredential userCredential = await FirebaseAuth.instance.signInWithPopup(googleAuthProvider);
    } else {
      runApp(...);
    }
  });
}
Hendrik Jan van Randen
  • 328
  • 1
  • 3
  • 14
0

signInWithRedirect/signInWithPopup, nothing will help in case of mobile browser (chrome) unless you add the domain name in the list of authorized domains in the settings section of Firebase authentication in the project console. This is what nextjs prompted me in the desktop browser. After the necessary action it works flawlessly

Speedy11
  • 197
  • 1
  • 5
  • 11