This is essentially the same question as Using google sign in button with react but the accepted answer does not solve it in my case.
I have a react component:
var LoginButton = React.createClass({
onSignIn: function(googleUser) {
console.error(" user signed in");
},
componentDidMount: function() {
console.log('component has mounted');
gapi.signin2.render('g-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 200,
'height': 200,
'longtitle': true,
'theme': 'dark',
'onsuccess': this.onSignIn
})
},
render: function() {
return (
<div className="g-signin2"/>
);
}
}
But while the sign-in works successfully, the onSignIn function is never called. In fact none of the options I specify for rendering the custom signin button are present (i.e. the square shape and dark theme), so I guess it's rendering a default button because of the <div>
's class.
I'm currently loading the library synchronously because otherwise gapi
is not in scope when componentDidMount
is triggered.
The other option I see would be google's recommendation of using <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
and wrapping my render in a function. But then either this script has to be loaded inside the component, or else I have to find a way that this function is in scope to be passed as a callback in index.html
, neither of which seem like a good solution.
How can I get the custom login button to be rendered instead of the default one?
We are discontinuing the Google Sign-In JavaScript Platform Library for web. The library will be unavailable for download after the March 31, 2023 deprecation date.
I've used JQuery, to load the script via the componentDidMount method...
componentDidMount: function() {
$.getScript('https://apis.google.com/js/platform.js')
.done(() => {
// execute any gapi calls here...
gapi.signin2.render('g-signin2', {
// ... options here ...
});
});
},
As f13ts said, the rendered <div>
should have "my-signin2" as an id, as opposed to a class.
This hack does the trick for now...
In my index.html
I trigger a custom event when the library loads:
<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>
<script type="text/javascript">
function triggerGoogleLoaded() {
window.dispatchEvent(new Event('google-loaded'));
}
</script>
and my react component now looks like this :
var LoginButton = React.createClass({
onSignIn: function(googleUser) {
console.log("user signed in"); // plus any other logic here
},
renderGoogleLoginButton: function() {
console.log('rendering google signin button')
gapi.signin2.render('my-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 200,
'height': 50,
'longtitle': true,
'theme': 'light',
'onsuccess': this.onSignIn
})
},
componentDidMount: function() {
window.addEventListener('google-loaded',this.renderGoogleLoginButton);
},
render: function() {
let displayText = "Sign in with Google";
return (
<div id="my-signin2"></div>
);
}
});
note that the rendered <div>
has "my-signin2" as an id
not a class
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With