Easy React.JS Boilerplate with Auth from Google Cloud Platform

App.js

import React, { Component } from 'react';
import withFirebaseAuth from 'react-with-firebase-auth'
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
import ProtectedApp from './components/ProtectedApp'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

export default firebaseConfig;
const firebaseApp = firebase.initializeApp(firebaseConfig);
const firebaseAppAuth = firebaseApp.auth();
const firebaseAppDB = firebase.database();
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
  twitterProvider: new firebase.auth.TwitterAuthProvider()
};


class App extends Component {
  render() {

    const { user, signOut, signInWithGoogle, error, loading } = this.props;

    return (
      <div>
      { error  === true ? <p>error: {error}</p> : <div></div>}
      { loading ? <p>Loading</p> : <div></div> }
      { 
        user === null || user === undefined ? 
          (<div><button onClick={signInWithGoogle}>Signin with google</button></div>) 
        : 
          (<ProtectedApp user={user} db={firebaseAppDB} signOut={signOut}/>) 
      } 
      </div>
    );
  }
}


export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);