Google SignIn2 won't call the onsuccess callback

Question

I put a google signin button on my page using the "gapi.signin2.render" function. To this function I pass an object with the onsuccess handler.

When the user initially clicks on the button everything works as expected. The google signin popup appears. But after finishing the signin process nothing happens on my page.

After refreshing the page, the button triggers the auth process again. And as soon as the "Signed In" appears, the onsuccess handler gets called.

I looked at the network traffic and saw a response containing all the information. That means that everything should be configured correctly in the google console. Otherwise I wouldn't get the response, right?

This is my vue component:

<template>
  ...
  <div id="google-signin-button" class="g-signin2"></div>
  ...
</template>

<script>
  ...
  window.gapi.signin2.render('google-signin-button', {
     onsuccess: this.onSignIn,
  })
  ...
  onSignIn: function(googleUser) { }
<script>

This is the index.html:

<meta name="google-signin-client_id" content="xxx.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>    

What can I do to get the onsuccess handler called on the initial signin?

Answer 1

Ok, i found it. Unfortunately i misunderstood the official documentation.

I had to load the auth2 module first:

window.gapi.load('auth2', () =>  {
  window.gapi.signin2.render('google-signin-button', {
    onsuccess: this.onSignIn,
  })
})