CODEWITHSUNDEEP
javascriptreactjsgoogle-apigoogle-signin
Adrien Blanquer
Adrien Blanquer

Reputation: 2061

Implement Google log-in into react js

I'm trying to implement a Google log-in button on my react.js app, but can't managed to get nice results so far.

I added the script and the meta, following the doc like this:

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

I also added this div in my component:

<div className="g-signin2" data-onsuccess={this.onSignIn}></div>

I should have the login button, but nothing appears. I can see the div in the source code, but not the button on my app.

<div class="g-signin2" data-onsuccess="function onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        sessionStorage.setItem('authToken', profile.getId());
        sessionStorage.setItem('name', profile.getName());
        sessionStorage.setItem('imageUrl', profile.getImageUrl());
        sessionStorage.setItem('email', profile.getEmail());

        var account = this.props.cursor.refine('account');
        account.refine('authToken').set(sessionStorage.getItem('authToken'));
        account.refine('name').set(sessionStorage.getItem('name'));
        account.refine('imageUrl').set(sessionStorage.getItem('imageUrl'));
        account.refine('email').set(sessionStorage.getItem('email'));
    }"></div>

I think the problem is that the script is executed before the page is rendered, so it does not replace the div by the button

Upvotes: 2

Views: 2190

Answers (1)

MaddEye
MaddEye

Reputation: 741

This anwser was posted from Brad Bumbalough here

Try adding the onSuccess callback when you initialize the component in componentDidMount().

componentDidMount: function() {
  gapi.signin2.render('g-signin2', {
    'scope': 'https://www.googleapis.com/auth/plus.login',
    'width': 200,
    'height': 50,
    'longtitle': true,
    'theme': 'dark',
    'onsuccess': this. onSignIn
  });  
},
...

Sources: https://developers.google.com/identity/sign-in/web/build-button, https://github.com/meta-meta/webapp-template/blob/6d3e9c86f5c274656ef799263c84a228bfbe1725/app/Application/signIn.jsx.

Upvotes: 3

Related Questions