Implement Google log-in into react js

Question

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

score 3 · Accepted Answer · edited Jul 18 '18 at 12:01

3

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.

edited Jul 18 '18 at 12:01

Bharata

13,509
6
36
50

answered Jul 18 '18 at 10:13

MaddEye

691
4
17

Already tried it, but got this error: `./src/component/Login/Login.js Line 198: 'gapi' is not defined no-undef Search for the keywords to learn more about each error.` – Adrien Blanquer Jul 18 '18 at 10:21
3

@BLANQUERAdrien then try `window.gapi.signin2.render(...` this should do the trick – MaddEye Jul 18 '18 at 10:46

Implement Google log-in into react js

1 Answers1