I think I figured it out but it still seem like it needs some work, but at least it’s working for me now. In case anyone else is curious here’s what I did to get the navbar links to toggle on/off depending on if the customer is logged in or not
const [isUserAuthenticated, setIsUserAuthenticated] = useState(false)
useEffect(() => {
document.addEventListener('snipcart.ready', () => {
Snipcart.store.subscribe(() => {
const customer = Snipcart.store.getState().customer
if (customer.status === 'SignedIn') {
setIsUserAuthenticated(true);
} else {
setIsUserAuthenticated(false);
}
// console.log('customer' , customer)
});
})
}, [])
Then within the return I can reference the isUserAuthenticated variable to toggle the links
{isUserAuthenticated && (
<a href="#/dashboard" className="snipcart-edit-profile">
Profile
</a>
)}
{!isUserAuthenticated && (
<a href="#/signin" className="snipcart-user-profile">
<span className="snipcart-user-email">Login</span>
</a>
)}