I get the right scripts in my index.html

<script type="text/javascript"> function triggerGoogleLoaded() { console.log("google event loaded"); //window.dispatchEvent(new Event('google-loaded')); } </script>

and I have LoginButton component which does most of the work and it looks like

/* global gapi */ import React from 'react'; class LoginButton extends React.Component { constructor(props) { super(props); this.onSignIn = this.onSignIn.bind(this); } onSignIn(googleUser) { console.log("user signed in"); // plus any other logic here } componentDidMount() { gapi.load('auth2', () => { // Retrieve the singleton for the GoogleAuth library and set up the client. this.auth2 = gapi.auth2.init({ client_id: '793065510867-j06sr2rufh7ns1kepcdolt9l22ph5pso.apps.googleusercontent.com' }); }); } render() { return ( <div className="g-signin2" data-onsuccess={this.onSignIn}></div> ); } } export default LoginButton;

When I start my application as yarn start , I am able to do the following

A google sign in button appears

On click, Google asks me to login with my existing account

Expected - onSignIn should be executed and I should be able to see user signed in

Actual

No console message is logged, this makes me believe that onSignIn is not called.

I am not sure how to further debug this. Any help is greatly appreciated.

The entire codebase is available at https://github.com/hhimanshu/google-login-with-react

UPDATE

The app is running on http://localhost:3000 and the same is provided in Authorized JavaScript origins in Google Developer Console.