Google Oauth Via Gapi.signin2.render Button Not Hitting Callbacks In React App

I have the Google Signin Button properly rendering inside my react component using the gapi.signin2.render method on the latest Google platform web-client api (https://apis.google.

Solution 1:

The docs tell you to add this:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

But that won't work with React. I found that removing data-onsuccess and class (className) from the div did the trick. So if you have something like this:

useEffect(() => {
    window.gapi.signin2.render('gs2', {
      'scope': 'https://www.googleapis.com/auth/plus.login',
      'width': 200,
      'height': 50,
      'longtitle': true,
      'theme': 'dark',
      'onsuccess': onGoogleSignIn
    });
  }, []);

  constonGoogleSignIn = user => {
    console.log('user', user);
  }

then your jsx for the google button can simply be this:

<div id="gs2"></div>

note that I removed the class and added id because gapi.signin2.render is looking for an id.

The caveat is that now you lose the styling. Unfortunately, addingclassName="g-signin2" back to the div actually breaks the callbacks.

Solution 2:

When you created your client ID you set your url to , let us say 'localhost'. Now you running you code on, let us say 'localhost:8080'. your 'myCallback' is not running because there is no data coming back from google api, the data is sent to the trusted url that you specified which is 'localhost'. The idea is simple, the request can come from anywhere, but google api is sending the data to your trusted url as a security step, if the request is coming from there you get it, if it is not someone is trying to hack using your client ID.