I'm having a problem getting my header to update after I log in with Firebase... When I refresh my browser it goes back to as if I am not logged in until I am redirected. I want to re-render my header when the user is detected as logged in after refresh.
This is my current method of changing the header.
<li>
{!auth.currentUser && (<Link to="/signup/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Sign Up</Link>)}
{auth.currentUser && (<Link to="/accounts/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>{auth.currentUser.displayName}</Link>)}
</li>
I ended up finding the answer and thought it would be helpful to post it here.
First I definite a State for being Logged in.
const [isLoggedIn, setIsLoggedIn] = useState(false);
Then I set the State using:
useEffect(() => {
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
setIsLoggedIn(!!user);
});
}, []);
And then I measured the value of isLoggedIn using
{!isLoggedIn && (<Link to="/signup/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Sign Up</Link>)}
{isLoggedIn && (<Link to="/accounts/" className="button button-primary button-wide-mobile button-sm" onClick={closeMenu}>Account</Link>)}