5

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?

aleXela
  • 1,270
  • 2
  • 21
  • 34

4 Answers4

11

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

Oxcarga
  • 260
  • 3
  • 9
  • 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! – Iest Jan 09 '18 at 16:53
  • 1
    `gapi.auth2.init` is *async*. It returns a `Promise`-like `GoogleAuth` object, as per docs: https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2initparams – MarSoft Aug 30 '18 at 22:50
  • Alternatively, add the `gapi.load()` part to the script tag `` – Florent Apr 23 '21 at 14:15
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!

aleXela
  • 1,270
  • 2
  • 21
  • 34
  • This is not the answer. For those looking for the reason and the real answer to this issue, take a look at: https://stackoverflow.com/questions/15657983/popup-blocking-the-gdrive-authorization-in-chrome – raphaklaus Aug 14 '18 at 20:01
  • sorry, but didnt find answer here. – aleXela Aug 30 '18 at 12:03
1

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));
Yuvals
  • 3,094
  • 5
  • 32
  • 60
0

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, () => { } })
solimanware
  • 2,952
  • 4
  • 20
  • 40