FirebaseUI with Firestore using React and a firebase.js file

Hello and thanks in advance for any help someone may be able to provide. I followed a few tutorials and successfully created a firestore database that connects to my web app and allows me to interact with my database. I am trying to add a sign-in screen to the application and have been trying to use FirebaseUI to simply incorporate a google sign-in. I followed bezKoder's tutorial that had me create my web app using a firebase.js file that looks like this:

import firebase from 'firebase/compat/app'
import "firebase/compat/firestore";

let config = {
   apiKey: "XXXX",
   authDomain: "XXXX",
   databaseURL: "XXXX",
   projectId: "XXXX",
   storageBucket: "XXXX",
   messagingSenderId: "XXXX",
   appId: "XXXX",


export default firebase.firestore();

The trouble I keep running into is that most of the additional resources I find simply put all of this code in the App.js file and I must be missing something when I go to add an additional component to my app. I followed an example that had me add this to my app.js

  state = { isSignedIn: false }
    uiConfig = {
    signInFlow: "popup",
    signInOptions: [
    callbacks: {
      signInSuccess: () => false

  componentDidMount = () => {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({ isSignedIn: !!user })
      console.log("user", user)

Hopefully someone can help explain where I am going wrong or point me in the direction of a tutorial using React, Firestore and FirebaseUI. Thanks for your help!

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum