gapi is not defined when loading React Component

Question

I am trying to integrate Google Sign In (link) using React.
I found a question that has solved this in past Using google sign in button with react 2

I replicated the same steps as mentioned. In my index.html I do

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>
    <script type="text/javascript">
        function triggerGoogleLoaded() {
            console.log("google event loaded");
            window.dispatchEvent(new Event('google-loaded'));
        }
    </script>

Then my Component looks like

var LoginButton = React.createClass({

    onSignIn: function(googleUser) {
        console.log("user signed in"); // plus any other logic here
    },

    renderGoogleLoginButton: function() {
        console.log('rendering google signin button');
        gapi.signin2.render('my-signin2', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'light',
            'onsuccess': this.onSignIn
        })
    },

    componentDidMount: function() {
        window.addEventListener('google-loaded',this.renderGoogleLoginButton);
    },

    render: function() {
        let displayText = "Sign in with Google";
        return (
            <div class="g-signin2" data-onsuccess="onSignIn"></div>
        );
    }

});

export default LoginButton;

When I run the program using yarn start, I get

/Users/Harit.Himanshu/bl/sources/webs/google-login/src/LoginButton.js
  11:9   error    'gapi' is not defined                             no-undef
  26:13  warning  'displayText' is assigned a value but never used  no-unused-vars

✖ 2 problems (1 error, 1 warning)

The complete source code is available at https://github.com/hhimanshu/google-login-with-react

Could someone please help me understand my mistake?

Thanks

Answer 1

It looks to me like you're loading the google apis as a script tag, which we'd expect to set window.gapi to the google api. However, you're then running eslint or some other checker, and that has no idea that window.gapi is supposed to exist. It's failing because it sees you using an undeclared variable.

A cheap fix is to tell Eslint that you know what you are doing;

/* global gapi */

Put this at the top of your file and eslint will treat gapi as a known global variable.

Answer 2

This worked for me. Put it in componentDidMount or constructor:

componentDidMount() {
    window.gapi.load('auth2', () => {
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        this.auth2 = window.gapi.auth2.init({
            client_id: '436676563344-.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin',
        });

        this.auth2.attachClickHandler(this.refs.googleButton, {},
            (googleUser) => {
                this.googleLogin(googleUser.getBasicProfile());
            }, (error) => {

            });
    });
}