Google+ signin button with ReactJS -

Google+ signin button with ReactJS -

i trying google+ login button work in react code. react code next (the actual code has proper value client_id).

react.dom.div({classname: "signin-with-google"}, react.dom.span({id: "signinbutton"}, react.dom.span({ classname: "g-signin", 'data-callback': this.signincallback, 'data-clientid': "client_id", 'data-cookiepolicy': "single_host_origin", 'data-scope': "https://www.googleapis.com/auth/userinfo.email"} ) ) )

the button shows on page, clicking on brings oauth dialog , hitting take makes disappear , no errors/warnings generated either in dialog or on javascript console. best of knowledge working expected.

however, callback method this.signincallback specifying doesn't invoked. any, ideas on doing wrong here?

thanks

as stated in google+ sign-in button docs, data-callback expected "a function in global namespace". because google's code calls callback name since html attributes strings. (warning, not real code):

window[element.dataset["callbackname"]]();

you passing reference callback, not globally accessible. can expose when component mounted , delete global namespace when unmounted:

componentwillmount: function() { // somehow generate unique id every g+ button. uses underscore's // `uniqueid` function[1]. // // [1] http://underscorejs.org/#uniqueid this.callbackname = _.uniqueid("gpluscallback-"); window[this.callbackname] = this.signincallback; }, componentwillunmount: function() { delete window[this.callbackname]; }, render: function() { ... 'data-callback': this.callbackname ... }

reactjs google-login