Problems with user state change

Question

I'm using SvelteKit and trying to show and hide a link for the profile page.

When I log in the link appears, but when I log out the link doesn't hide.

I don't know if I have to use the onAuthStateChanged or do something more reactive in Svelte.

I put my code inside my component navBar.svelte:

<script>
    import { getAuth } from 'firebase/auth'
    $: auth = getAuth()
</script>  

 {#if auth.currentUser}
 <a sveltekit:prefetch href="/profile">
 <li class="navbarListItem">
 <img src="/assets/svg/RiUser3Line.svg" alt="perfil" width="36px" height="36px"/>
 <p>Profile</p>
 </li>
 </a>
{:else}
 <a sveltekit:prefetch href="/profile" style="display: none;">
 <li class="navbarListItem">
 <img src="/assets/svg/RiUser3Line.svg" alt="perfil" width="36px" height="36px" />
<p>Profile</p>
</li>
</a>
{/if}