Search code examples
javascriptreactjsgoogle-api-js-client

Using Google Sign in button with React, can't get button to load


As the title mentions, I can't seem to get the button to load.

I am not getting any errors. The Hi text is rendering, but no button.

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="google-signin-client_id" content="....apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>


  </body>
</html>

index.js

const App = () => (
    <MuiThemeProvider>
        <SignIn />
    </MuiThemeProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));

Login.js

/* global gapi */

import React from 'react';


class SignIn extends React.Component{

    constructor(props){
        super(props);
        this.onSignIn = this.onSignIn.bind(this)
    }

    componentDidMount() {
        console.log('this mounted')
        gapi.signin2.render('g-signin2', {
            'scope': 'profile email',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': this.onSignIn,
        });
    }


    onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
    }

    render() {
        return(
            <div>
                <div>Hi</div>
                <div id="my-signin2" data-onsuccess={this.onSignIn}></div>
            </div>
        )
    }


}

export default SignIn

What am I doing wrong?


Solution

  • The first argument in gapi.signin2.render(..) is the button's id.

    Your are passing g-signin2 whereas it should be my-signin2.