App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import firebase from "./firebase"
import Header from './components/Header';
import MainBody from './components/MainBody';
import Footer from './components/Footer';
import RegForm from './components/RegForm';
import LoginBox from './components/LoginBox';

class App extends React.Component {

  constructor(props) {
    super(props)

    // the initial application state
    this.state = {
      user: null
    }
  }

  // App "actions" (functions that modify state)
  signIn(username, password) {

    this.setState({
      user: {
        username,
        password
      }
    })
  }

  signOut() {
    this.setState({user: null})
  }

  googleSignIn() {

    console.log("HERE");
      // Call Firebase
      let provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithPopup(provider).then(function(result) {
        var token = result.credential.accessToken;
        var username = result.user.email;
        console.log("Success! Username: " + username);

        this.setState({
        user: {
            username
          }
        })
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email
        var credential = error.credential;
          console.log(errorMessage);
      });
  }

  render() {
    return (
      <div className="App">
        <Header />
        {
          (this.state.user) ?
            <Welcome
              user={this.props.user.username}
              onSignOut={this.props.signOut.bind(this)}
            />
          :
            <LoginBox
              onGoogleSignIn={this.googleSignIn.bind(this)}
              onSignIn={this.signIn.bind(this)}

            />
        }
        <MainBody user={this.state.user}/>
        <Footer />
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById("root"))