title: State not updating in application
body: <p>I am trying to get my application to update the state on my header once I sign in. It was initially doing so but stopped after creating a few sample users. I am not sure whether that is a problem with my Firestore settings or some code in the app is causing this, but it is quite frustrating. This error also prevents me from signing out any users, thus the statement below in my App.js file keeps outputting the last user that signed in, even after refreshing the page.</p>
  <pre><code>console.log('THE USER IS &gt;&gt;&gt; ', authUser)
  </code></pre>
  <p><em>fbConfig.jsx file</em></p>
  <pre><code>import { initializeApp } from 'firebase/app'
  import { getFirestore } from 'firebase/firestore/lite'
  import { getAuth } from 'firebase/auth'
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
      apiKey: 'xxxx',
      authDomain: 'xxxx',
      projectId: 'xxxx',
      storageBucket: 'xxxx',
      messagingSenderId: 'xxxx',
      appId: 'xxxx',
      measurementId: 'xxxx'
  }
  
  //Init firebase app
  const firebaseApp = initializeApp(firebaseConfig)
  
  //init services
  const db = getFirestore(firebaseApp)
  const auth = getAuth(firebaseApp)
  
  export { auth, db }
  </code></pre>
  <p><em>Login.jsx</em></p>
  <pre><code>import React, { useState } from 'react'
  import { Link, useNavigate } from 'react-router-dom'
  import { auth } from '../../fbConfig'
  import {
      createUserWithEmailAndPassword,
      signInWithEmailAndPassword
  } from 'firebase/auth'
  import { icon } from '../../constants'
  
  import './Login.css'
  
  const Login = () =&gt; {
      const navigate = useNavigate()
      const { email, setEmail } = useState('')
      const { password, setPassword } = useState('')
  
      const signIn = (e) =&gt; {
          e.preventDefault()
          signInWithEmailAndPassword(auth, email, password)
              .then((auth) =&gt; {
                  // Signed in
                  const user = auth.user
                  console.log('success' + user + 'registered')
                  navigate('/', { replace: true })
                  // ...
              })
              .catch((error) =&gt; {
                  alert(error.message)
              })
      }
  
      const register = (e) =&gt; {
          e.preventDefault()
          createUserWithEmailAndPassword(auth, email, password)
              .then((auth) =&gt; {
                  // Signed in
                  const user = auth.user
                  console.log('success' + user + 'registered')
                  // ...
              })
              .catch((error) =&gt; {
                  alert(error.message)
                  // const errorCode = error.code
                  // const errorMessage = error.message
              })
      }
  
      return (
          &lt;div className='login'&gt;
              &lt;div className='login__mainContainer'&gt;
                  &lt;Link to='/'&gt;
                      &lt;img className='login__logo' src={icon} alt='Webiste logo' /&gt;
                  &lt;/Link&gt;
  
                  &lt;div className='login__container'&gt;
                      &lt;h1&gt;Sign-in&lt;/h1&gt;
  
                      &lt;form&gt;
                          &lt;div className='login__input'&gt;
                              &lt;h5&gt;E-mail&lt;/h5&gt;
                              &lt;input
                                  className='login__inputEmail'
                                  type='text'
                                  value={email}
                                  onChange={(e) =&gt; setEmail(e.target.value)}
                              /&gt;
                              &lt;span className='login__inputSpan'&gt;* Required&lt;/span&gt;
                          &lt;/div&gt;
  
                          &lt;div className='login__input'&gt;
                              &lt;h5&gt;Password&lt;/h5&gt;
                              &lt;input
                                  className='login__inputPassword'
                                  type='password'
                                  value={password}
                                  onChange={(e) =&gt; setPassword(e.target.value)}
                              /&gt;
                              &lt;span className='login__inputSpan'&gt;* Required&lt;/span&gt;
                          &lt;/div&gt;
  
                          &lt;button
                              type='submit'
                              className='login__signInButton'
                              onClick={signIn}
                          &gt;
                              Sign In
                          &lt;/button&gt;
                      &lt;/form&gt;     
  
                      &lt;button className='login__registerButton' onClick={register}&gt;
                          Create your account
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default Login
  </code></pre>
  <p><em>Reducer.jsx file</em></p>
  <pre><code>export const initialState = {
      basket: [],
      user: null
  }
  
  // Selector
  export const getBasketTotal = (basket) =&gt;
      basket?.reduce((amount, item) =&gt; item.price + amount, 0)
  
  const reducer = (state, action) =&gt; {
      console.log(action)
      switch (action.type) {
          case 'ADD_TO_BASKET':
              return {
                  ...state,
                  basket: [...state.basket, action.item]
              }
          case 'SET_USER':
              return {
                  ...state,
                  user: action.user
              }
          default:
              return state
      }
  }
  
  export default reducer
  </code></pre>
  <p><em>App.js</em></p>
  <pre><code>import { useEffect } from 'react'
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
  import { Header, Home, Login } from './components'
  import { auth } from './fbConfig'
  import { useStateValue } from './contextAPI/StateProvider'
  
  import './App.css'
  
  function App() {
      const [dispatch] = useStateValue()
  
      useEffect(() =&gt; {
          auth.onAuthStateChanged((authUser) =&gt; {
              console.log('THE USER IS &gt;&gt;&gt; ', authUser)
  
              if (authUser) {
                  // the user just logged in / the user was logged in
                  dispatch({
                      type: 'SET_USER',
                      user: authUser
                  })
              } else {
                  // the user is logged out
                  dispatch({
                      type: 'SET_USER',
                      user: null
                  })
              }
          })
      })
  
      return (
          &lt;Router&gt;
              &lt;div className='app'&gt;
                  &lt;Header /&gt;
                  &lt;Routes&gt;
                      &lt;Route path='/login' element={&lt;Login /&gt;} /&gt;
                      &lt;Route path='/' element={&lt;Home /&gt;} /&gt;
                  &lt;/Routes&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      )
  }
  </code></pre>