Hydration Error in Next13 with pocketbase auth

Question

I am trying to create a navbar using pocketbase auth, I experience a hydration error when trying to use conditional rendering with pb.authStore.isValid My guess is that this session is only stored locally and not on the server, which makes it not render properly on the server. How do I fix this issue so I can conditionally render something if a user is logged in?

I tried to use pb.authStore.isValid to conditionally render an avatar on my page, I expected it to show up the avatar when logged in, which it did, the issue is now that it also shows up after I do pb.authStore.clear() and gives an hydration error: Hydration errors.

"use client";

export default function Nav() {
  return (
    <nav className="fullwidth pt-2 flex content-center text-text pb-4">
        <div className="flex gap-4 ml-4 mr-5">
          {pb.authStore.isValid ? (
            <Link href="/profile">
             {pb.authStore.model?.avatar 
              ? 
              // eslint-disable-next-line @next/next/no-img-element
              <img src={pb.authStore.model?.avatar} alt={pb.authStore.model?.username + " profile"} /> 
              :   
              <div className="bg-primary text-black w-[35px] flex aspect-square justify-center transition-ease-in duration-100 items-center rounded-full border-4 hover:border-5  border-gray-800">
                {pb.authStore.model?.username[0].toUpperCase()}
              </div>
              }
            </Link>
          ) : (   
            <>
              <Link className="navbutton" href="/register">
                <Button
                  title="Sign Up"
                  onClick={() => {}}
                  variant="secondary"
                />
              </Link>
              <Link className="navbutton" href="/login">
                <Button title="Log In" onClick={() => {}} variant="primary" />
              </Link>
            </>
          )}
        </div>
    </nav>
  );
}