I'm a relatively new JS user, and I'm trying to integrate Google OAuth into my web app, but for some reason it is not responsive. It appears on the app, but I cannot click it, even when I inspect the element. This is the code pertaining to OAuth in my app file
class App extends React.Component {
responseGoogle=(response)=>{
console.log(response);
console.log(response.profileObj);
}
render(){
return(
<div className="App">
<GoogleLogin
clientId="MY CLIENT ID IS HERE AND CORRECT"
buttonText="Login"
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
cookiePolicy={'single-host-origin'}
/>
The button is greyed out on the app and also is labeled as "disabled" in the console when I inspect it. If anyone could help that would be greatly appreciated
I was experiencing the same problem here.
It was resolved when I re-created google credentials.
Go to https://console.developers.google.com/apis, and in the Google Plus API, access credentials, and create a new credential for "Oauth Client Id".
In the "Application Type" select "Web Application".
Be sure to put the full address of where the API is being called in the "Authorized redirect URIs".
Finally, use the new "Client ID" that will be generated.
Alternatively,
I fixed this issue by whitelisting
and adding cookiePolicy
<GoogleLogin
clientId={WEB_CLIENT_ID}
buttonText="Login with LF account"
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
cookiePolicy={'single_host_origin'}
/>
https://developers.google.com/identity/sign-in/web/reference#googleauththenoninit-onerror
Let me know if this helps you or require some more info.