Create Sign In vs. Sign Out Navbar Item

In the previous lesson, we created a Svelte store for the current users. Now, we can import the user store on any page or component to find out whether the user is currently signed in or not. Let’s put that into action!

Sign In vs Sign Out navbar item

Open the services/web/src/components/auth-nav-item.svelte component. Add a <script> tag to import the user store:

<script>
  import { currentUser } from "../stores/user";
</script>

In the HTML below, we can now display a “Sign Out” button when the user is signed in, and a “Sign In” button otherwise:

{#if $currentUser}
  <a on:click={signOut} href>Sign Out</a>
{:else}
  <a href="/auth/login">Sign In</a>
{/if}

Let’s add the signOut function to the <script> tag:

const signOut = () => {
  firebase.auth().signOut();
};

Fantastic, let’s test that. Run the dev serverrunApp and open the web application using the app link, then sign in and sign out.