.gitignore

firebase-debug.log*
firestore-debug.log*
ui-debug.log*

App.1.js

// src/App.js
import React from "react";
import { db } from "./firebase";

function App() {
  db.doc("hello/world").set({ hello: "world" });
  return <div />;
}

export default App;

App.2.js

// src/App.js

import React from 'react';
import { db } from './firebase';

function App() {
  const [data, setData] = React.useState();
  React.useEffect(() => {
    db.doc('people/me')
      .get()
      .then((data) => setData(data.data()));
  }, []);

  return <p>{data?.hungry ? "I'm hungry" : "I'm full"}!</p>;
}

export default App;

authenticate.js

try {
  await auth().signInWithPopup(provider);
  const user = await auth().currentUser;
  setUser(user);
} catch(e) {}

firebase.js

// src/firebase.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

// TODO: Use a configuration object
firebaseApp.initializeApp({
  projectId: '',
  appId: '',
  databaseURL: '',
  storageBucket: '',
  locationId: '',
  apiKey: '',
  authDomain: '',
  messagingSenderId: '',
});

const db = firebase.firestore();
const auth = firebase.auth;

// eslint-disable-next-line no-restricted-globals
if (location.hostname === 'localhost') {
  db.useEmulator('localhost', 8080);
  auth().useEmulator('http://localhost:9099/', { disableWarnings: true });
}

export default firebase;
export { db, auth };

Login.js

import React from 'react';
import { auth } from './firebase';

function Login() {
  const login = async () => {
    const provider = new auth.GoogleAuthProvider();
    try {
      await auth().signInWithPopup(provider);
    } catch (e) {}
  };
  return <button onClick={login}>login</button>;
}

export default Login;

package.json

{
  "emulators": "firebase emulators:start --import=data --export-on-exit",
}

useEffect.js

React.useEffect(() => {
  return auth().onAuthStateChanged((user) => {
    if (user) {
      setUser(user);
    } else {
      setUser(null);
    }
  });
}, []);

yarn.sh

yarn add firebase