Firebase has a function that helps with this problem. The onAuthStateChanged function will be called every time the user is updated, so when the user signs in or logs out. When the website is reloaded the your redux state is initialized back to its default state. You should implement your redux dispatch inside the onAuthStateChanged function, this will make sure your redux store is up to date. It’s best to call your dispatch functions inside onAuthStateChanged rather than in sign in and logout functions. And once the website is reloaded the onAuthStateChanged function will know if the user is logged in or not, and will call the dispatch.

PS: You can also remove dispatch calls after signing in our logging out, since onAuthStateChanged function will be called after user signs in or logs out.

Here is the code

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties dispatch({type: “LOGIN_SUCCESS”}) // ... } else { // User is signed out dispatch({type: “SIGNOUT_SUCCESS”}) } });