React Google Login

Question

I am using react-google-login (https://www.npmjs.com/package/react-google-login) tool to login to provide Google login functionality for my application. Following the manual on page I ended up using following code.

<GoogleLogin
   clientId="xxx.apps.googleusercontent.com"
   onSuccess={this.responseGoogle.bind(this)}
   onFailure={this.responseGoogle.bind(this)}
   tag={'span'}
   className={"google-button-wrapper"}
   >
   <Button id={'google-button'} basic
      color='google plus'>
      <Icon name='google plus'/>
      Google Plus
   </Button>
</GoogleLogin>

The problem is that the login action is triggered even without clicking the button. This happens after refresh page.

I found following suspicious scenarios:

Refresh page -> open Login page = Triggered

Refresh page -> open Login page -> Open different site -> Login again = Triggered first time, second time no trigger.

Refresh page -> open Login page -> open Registration Page = Trigger on Login page, not trigger on Register page even if there is same snipped of code.

I am using React v ^16.3.2, Any ideas?

score 5 · Accepted Answer · answered Aug 23 '18 at 10:48

5

try to use arrow functions inside onSuccess and onFailure and don't bind them here. It is better practice to bind functions on constructor

answered Aug 23 '18 at 10:48

Lazar Nikolic

4,261
1
22
46

Can i get an explanation why was my answer downvoted? – Lazar Nikolic Aug 23 '18 at 11:13
1

I channged code to the following: onSuccess={() => this.responseGoogle} .. etc. It helped. I wonder why it is causing problems only here and not on the other function bindings. Thank you. I must check the docs – peter.cambal Aug 23 '18 at 11:15

score 0 · Answer 2 · answered Dec 02 '20 at 16:11

I hope this will solve your problem


import { GoogleLogin, GoogleLogout } from 'react-google-login';


const CLIENT_ID = '<client_id>';


class GoogleBtn extends Component {
   constructor(props) {
    super(props);

    this.state = {
      isLogined: false,
      accessToken: ''
    };

    this.login = this.login.bind(this);
    this.handleLoginFailure = this.handleLoginFailure.bind(this);
    this.logout = this.logout.bind(this);
    this.handleLogoutFailure = this.handleLogoutFailure.bind(this);
  }

  login (response) {
    if(response.accessToken){
      this.setState(state => ({
        isLogined: true,
        accessToken: response.accessToken
      }));
    }
  }

  logout (response) {
    this.setState(state => ({
      isLogined: false,
      accessToken: ''
    }));
  }

  handleLoginFailure (response) {
    alert('Failed to log in')
  }

  handleLogoutFailure (response) {
    alert('Failed to log out')
  }

  render() {
    return (
    <div>
      { this.state.isLogined ?
        <GoogleLogout
          clientId={ CLIENT_ID }
          buttonText='Logout'
          onLogoutSuccess={ this.logout }
          onFailure={ this.handleLogoutFailure }
          render={renderProps => (
            <Button onClick={renderProps.onClick} size="small">Logout</Button>)}
        />
           : <GoogleLogin
          clientId={ CLIENT_ID }
          buttonText='Login'
          onSuccess={ this.login }
          onFailure={ this.handleLoginFailure }
          cookiePolicy={ 'single_host_origin' }
          responseType='code,token'
          render={renderProps => (
            <Button onClick={renderProps.onClick}size="small">Login</Button>)}
        />
      }
      

    </div>
    )
  }
}

export default GoogleBtn;

score 0 · Answer 3 · answered Jan 18 '22 at 11:22

I was facing the same issue. Turns out, if you login once and then refresh the page without logging out, the login action is triggered without even clicking the button because the login state is preserved.

Try logging out and then refreshing the page.

React Google Login

3 Answers3

Linked