react_firebase_example.js

import { useEffect, useState } from "react";
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const config = {/*firebase project config*/};

try {
  firebase.initializeApp(config);
} catch (error) {
  !/already exists/.test(error.message) && console.error(error); 
}

function App() {
  const [show, setShow] = useState(false);
  const [messages, setMessages] = useState([]);
  useAuth(setShow);
  useFirestore(setMessages);
  return (
    <div>
      <h2>
        {
          show 
          ? "You're signed in yay!"
          : "You're not signed in. Please sign in."
        }
      </h2>
      {
        show
        ? <>
          <Messages addMessage={addMessage} messages={messages} />
          <br />
          <button onClick={logout}>Log Out</button>
        </>
        : <button onClick={login}>Log In</button>
      }
    </div>
  );
}

function Messages({ messages, addMessage }) {
  const [value, setValue] = useState("");
  return (
    <div>
      <p>
        {
          messages.map((message, index) => <span key={index}>{message}<br /></span>)
        }
      </p> 
      <br />
      <form onSubmit={(e) => {
        e.preventDefault();
        addMessage(value);
        setValue("");
      }}>
        <input value={value} onChange={(e) => setValue(e.target.value)} />
        <br />
        <button>Send</button>
      </form>
    </div>
  );
}

function useFirestore(setMessages) {
  const db = firebase.firestore();
  const auth = firebase.auth();
  return useEffect(() => {
    const unsubscribe = auth.currentUser && db.collection("userMessages").doc(auth.currentUser?.uid).onSnapshot((doc) => {
      doc.exists && setMessages([...doc.data().messages]);
    });
    return () => typeof(unsubscribe) === "function" && unsubscribe();
    //eslint-disable-next-line
  }, [auth.currentUser]);
}

async function login() {
    const provider = new firebase.auth.GoogleAuthProvider();
    const auth = firebase.auth();
    await auth.signInWithPopup(provider);
}

async function logout() {
  const auth = firebase.auth();
  await auth.signOut();
}

function useAuth(setShow) {
  const auth = firebase.auth();
  return useEffect(() => {
    auth.onAuthStateChanged((user) => {
      user?.uid ? setShow(true) : setShow(false);
    });
    //eslint-disable-next-line
  }, []);
}

async function addMessage(message) {
  const auth = firebase.auth();
  const db = firebase.firestore();
  await db.collection("userMessages").doc(auth.currentUser.uid).set({
    messages: firebase.firestore.FieldValue.arrayUnion(message)
  },{ 
    merge: true 
  });
};
          
export default App;

Example implementation of firebase in a react app.