Firebase with React login and sign up

firebase-react-auth.js

import React, { Component, Fragment } from 'react'
import firebase from 'firebase/app'
import 'firebase/auth'
import './style.css'

// TODO: whitelist the domain in the API manager:
// https://plus.google.com/u/0/+MichaelPrentice/posts/7T65U83ncfT?sfc=true
// "This is found in https://console.cloud.google.com under API Manager -> Credentials -> Browser Key -> Key
// Restrictions. Of course you have to select an active project before performing this navigation."

// use different keys for development and production: swap keys during the build process

// use production modules, of course only the modules you need:
// For the CDN builds, these are available in the following manner
// (replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

// https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

class App extends Component {
  render() {
    if (this.state.loading) {
      return <p>loading...</p>
    }

    return (
      <div className="main">
        {this.state.loggedIn ? (
          <p>User: {this.state.email}</p>
        ) : (
          <Fragment>
            <label htmlFor="email">
              Email
              <input id="email" type="text" onChange={this._handleChange} />
            </label>

            <label htmlFor="password">
              Password
              <input
                id="password"
                type="password"
                onChange={this._handleChange}
              />
            </label>
          </Fragment>
        )}

        {this.state.loggedIn ? (
          <button onClick={this._logout}>logout</button>
        ) : (
          <Fragment>
            <button onClick={this._login}>log in</button>
            <button onClick={this._signup}>sign up</button>
          </Fragment>
        )}
      </div>
    )
  }

  _login = async () => {
    try {
      const { email, password } = this.state

      await firebase.auth().signInWithEmailAndPassword(email, password)
    } catch (error) {
      console.error(error)
    }
  }

  _signup = async () => {
    try {
      const { email, password } = this.state

      await firebase.auth().createUserWithEmailAndPassword(email, password)
    } catch (error) {
      console.error(error)
    }
  }

  _logout = async () => {
    firebase.auth().signOut()
  }

  _handleChange = ({ target }) => this.setState({ [target.id]: target.value })

  componentDidMount() {
    firebase.initializeApp({
      apiKey: '',
      authDomain: '',
      databaseURL: '',
      storageBucket: ''
    })

    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        console.log(user)

        this.setState({ loggedIn: true, email: user.email })
      } else {
        console.log('not logged in')

        this.setState({ loggedIn: false })
      }

      this.setState({ loading: false })
    })
  }

  state = { email: '', password: '', loggedIn: false, loading: true }
}

export default App