Check is user is logged in on NextJs site?

I read this post but I’m still not clear on how to make this work on my site.

I want to be able to toggle on and off links in the navbar based on whether or not a user is authenticated. So I can do something like this

{user && (
   <a href="#/dashboard" className="snipcart-edit-profile">
      Profile
   </a>
)}
{!user && (
   <a href="#/signin" className="snipcart-user-profile">
      <span class="snipcart-user-email">Login</span>
   </a>
 )}

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