Google OAuth Button Not Functioning

user_18113313 0
Viewed 274

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

reactjs oauth javascript
1 Answers

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

http://localhost

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.

user_77214970
Related