title: SSO react-google-login with google on react app using a react component
body: <p>I got question about implementing google login. I was able to implement Google Login button on my react app using an open source library called [react-google-login][1]. I was able to set up the backend server using python flask, and host the api on Heroku: <a href="http://arrangement-server.herokuapp.com/login" rel="nofollow noreferrer">http://arrangement-server.herokuapp.com/login</a>. The client side should just be redirecting to google and then getting a token when it redirects back. 
  But I have trouble to getting any token from Google login information on the frontend through react component.<br>
  I think there's an issue with my header for access token and request from [app.py][2] </p>
  
  <pre><code>google = oauth.remote_app('google',
                            base_url='https://www.google.com/accounts/',
                            authorize_url='https://accounts.google.com/o/oauth2/auth',
                            request_token_url=None,
                            request_token_params={'scope': 'https://www.googleapis.com/auth/userinfo.email',
                                                  'response_type': 'code'},
                            access_token_url='https://accounts.google.com/o/oauth2/token',
                            access_token_method='POST',
                            access_token_params={'grant_type': 'authorization_code'},
                            consumer_key=GOOGLE_CLIENT_ID,
                            consumer_secret=GOOGLE_CLIENT_SECRET)
  
  
  @app.route("/")
  def home_page():
      access_token = session.get('access_token')
      if access_token is None:
          return redirect(url_for('login'))
  
      access_token = access_token[0]
      from urllib2 import Request, urlopen, URLError
  
      headers = {'Authorization': 'OAuth '+access_token}
      req = Request('https://www.googleapis.com/oauth2/v1/userinfo',
                    None, headers)
      try:
          res = urlopen(req)
      except URLError, e:
          if e.code == 401:
              # Unauthorized - bad token
              session.pop('access_token', None)
              return redirect(url_for('login'))
          return res.read()
  
      return res.read()
  </code></pre>
  
  <p>my react component at App.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import './App.css'
  import router from 'config/router'
  import { Provider } from 'react-redux'
  import store from 'store/index'
  import { GoogleLogin } from 'react-google-login'
  import config from './config.json'
  
  class App extends Component {
  
      constructor() {
          super();
          this.state = { isAuthenticated: false, user: null, token:
              ''};
      }
      logout = () =&gt; {
          this.setState({isAuthenticated: false, token: '', user: null})
      };
  
      onFailure = (error) =&gt; {
          alert(error);
      };
  
      googleResponse = (response) =&gt; {
          console.log(response);
          const tokenBlob = new Blob([JSON.stringify({access_token: response.accessToken}, null, 2)], {type : 'application/json'});
          const options = {
              method: 'POST',
              body: tokenBlob,
              mode: 'cors',
              cache: 'default'
          };
          fetch('http://arrangement-server.herokuapp.com/login', options).then(r =&gt; {
              const token = r.headers.get('x-auth-token');
              r.json().then(user =&gt; {
                  if (token) {
                      this.setState({isAuthenticated: true, user, token})
                  }
              });
          })
      };
  
      render() {
          let content = !!this.state.isAuthenticated ?
              (
                  &lt;div&gt;
                      &lt;p&gt;Authenticated&lt;/p&gt;
                      &lt;div&gt;
                          {this.state.user.email}
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button onClick={this.logout} className="button"&gt;
                              Log out
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              ) :
              (
                  &lt;div&gt;
                      &lt;GoogleLogin
                          clientId={config.GOOGLE_CLIENT_ID}
                          buttonText="Login"
                          onSuccess={this.googleResponse}
                          onFailure={this.onFailure}
                      /&gt;
                  &lt;/div&gt;
              );
  
          return (
              &lt;div className="App"&gt;
                  {content}
              &lt;/div&gt;
          );
      }
  }
  
  
  
  export default App
  </code></pre>
  
  <p>Code above can be found at my project</p>