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

Bharata · Accepted Answer · 2018-07-18 12:01:14Z

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, 2018 at 12:01

Bharata

14.2k6 gold badges44 silver badges54 bronze badges

answered Jul 18, 2018 at 10:13

MaddEye

7515 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrien Blanquer Over a year ago

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.

MaddEye Over a year ago

@BLANQUERAdrien then try window.gapi.signin2.render(... this should do the trick

Collectives™ on Stack Overflow

Implement Google log-in into react js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related