detect error: "popup_blocked_by_browser" for google auth2 in javascript

Question

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?

Peewit

Answer 1

Finally!! signIn() method uses JS Promise. So code can be used is:

gapi.auth2.getAuthInstance().signIn().then(function(){}, function(error){ if (error) alert('please allow popup for this app')})

Hope this will help!

Peewit

This is not the answer. For those looking for the reason and the real answer to this issue, take a look at: #15658483 – Stav

sorry, but didnt find answer here. – Peewit

Answer 2

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

Softa

I wish the google docs would just say which methods are async or sync. Totally not obvious that gapi.auth2.init is sync... Thanks for the answer! – Selway

gapi.auth2.init is async. It returns a Promise-like GoogleAuth object, as per docs: developers.google.com/api-client-library/javascript/reference/… – Parable

Alternatively, add the gapi.load() part to the script tag <script src="https://apis.google.com/js/platform.js" async defer onload="gapi.load('auth2');"></script> – Thorvald

Answer 3

In your constructor (service) or ngOnInit (for component) do the following:

 googleAuthService.getAuth().subscribe(
  (auth) => {
    this.googleAuth = auth;
  });

Then, in your login function, call:

    this.googleAuth.signIn()
  .then((user) => {
      this.signInSuccessHandler(user as GoogleUser);
    },
    (error) => console.error(error));

Stereoscopic

Answer 4

Update:

Now you need to use Firebase auth

https://firebase.google.com/docs/auth/

Answer:

For me I changed init method to have a callback function (empty one)... Here's how:

Wrong (popup blocked by browser) (no call back function):

.init({ client_id: main.clientId })

Correct working like charm:

.init({ client_id: main.clientId, () => { } })

Stotinka

@MarcoA.Braghim I updated the answer with firebase solution – Stotinka

Guess you miss something. This post is about this error with Web Browser... – Pudency