detect error: "popup_blocked_by_browser" for google auth2 in javascript

aleXela picture aleXela · Aug 11, 2017 · Viewed 7.3k times · Source

After lot of googling didn't find solution how to catch error of window popup blocker for google auth2

getting an error in console error: "popup_blocked_by_browser". all I want is to do is tell user that pop up should be enabled for auth.

samples using window.open() are not good, since they open useless window. As I see a lot of people searching for this.

Any advice?

Answer

Oxcarga picture Oxcarga · Nov 28, 2017

Was having same problem. Seems browser(s) (or at least chrome) will block any "window.open" call which it was invoked not as part of a user interaction.

Refer to here for a deeper explanation.

__

I used to have this next code inside click event listener:

gapi.load('auth2', function() {
  var auth2 = gapi.auth2.init({
    client_id: '.apps.googleusercontent.com',
    fetch_basic_profile: true,
    scope: 'profile'
  });
  auth2.signIn()
    .then(function() {
      var profile = auth2.currentUser.get().getBasicProfile();
      ... 
    })
    .catch(function(err) { ... });
});

Note the asynchronous way of loading 'auth2', which is how google docu says.

I changed it to:

// way earlier, before click event can happen
// we call the gapi.load method.
gapi.load('auth2', function() {});

Then, inside click event handler, we can do:

var auth2 = gapi.auth2.init({
    client_id: '.apps.googleusercontent.com',
    fetch_basic_profile: true,
    scope: 'profile'
  });
  auth2.signIn()
    .then(function() { ... })
    .catch(function(err) { ... });

... so browser does not block google login popup