Re-render Header on Firebase Login

Question

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>

Answer 1

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>)}