Google Login Button Does Not Render in React

Question

Building a simple react project, and wanted to add in a login page. Currently, the google login button does not appear. The div itself appears, but no button is rendered in it.

index.html

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com">

src/components/Login.js

import React, { Component } from 'react';
class Login extends Component {
    onSignIn(googleUser) {
      console.log("Signing In!")
      var profile = googleUser.getBasicProfile();
      document.getElementById('status').innerHTML = 'Thanks for logging in using Google, ' + profile.getName() + '!';
    }

    render() {
      return (
        <div className="socialwrapper" style={{textAlign: "center", paddingTop: 200}}>
          <script src="https://apis.google.com/js/api:client.js"></script>
          <div className="g-signin2" data-onsuccess="onSignIn"></div>
          <div id="status">"Here is the status"</div>
        </div>
      );
    }
}


export default Login;

Not sure what is wrong. It is that index.html isn't loaded? I've tried restarting the server, and I have double checked the CLIENT_ID is correct. The console.log in onSignIn does not trigger. Other than that, I'm not sure what to do.

Try adding the <script src="https://apis.google.com/js/api:client.js"></script> tag in your index.html first so it's loaded before — Henkan
From the google website : "You must include the Google Platform Library on your web pages that integrate Google Sign-In. <script src="https://apis.google.com/js/platform.js" async defer></script>", do you have it ? — Henkan

Michael Eliot Michael Eliot · Accepted Answer · 2018-07-16T15:13:23

This question was solved after digging deeper into including external scripts into react components, an exploration triggered from Jun Bin's comment. Eventually I found this bit of code from this tutorial that solved the issue. While the button still does not work fully, it at least appears. The amended code is below, and I will edit it if I get the button fully working.

// src/components/Login.js
import React, { Component } from 'react';
class Login extends Component {
    componentDidMount() {
      (function() {
          var e = document.createElement("script");
          e.type = "text/javascript";
          e.async = true;
          e.src = "https://apis.google.com/js/client:platform.js?onload=gPOnLoad";
          var t = document.getElementsByTagName("script")[0];
          t.parentNode.insertBefore(e, t)
      })();
    }
    onSignIn(googleUser) {
      console.log("Signing In!")
      var profile = googleUser.getBasicProfile();
      document.getElementById('status').innerHTML = 'Thanks for logging in using Google, ' + profile.getName() + '!';
    }

    render() {
      return (
        <div className="socialwrapper" style={{textAlign: "center", paddingTop: 200}}>
          <div className="g-signin2" data-onsuccess="onSignIn"></div>
          <div id="status">Here is the status</div>
        </div>
      );
    }
}

Google Login Button Does Not Render in React

2 Answers