Create the Login & Admin Page

Creating a login page

In order for users to sign up for an account and eventually log in, we need a page. We are going to create that in a new services/web/src/routes/auth/login.svelte file given below. Click Run and navigate to services/web:

cd services/web

Adding a Sign In Button

Let’s add a simple button to sign in and a click handler to the login.svelte file given below:

<script>
  const signIn = () => {
    // Open FirebaseUI
  }
</script>

<button on:click={signIn}>Sign In</button>

Adding a menu item for Sign In page

To reach this page, we are going to add a new menu item to the navbar in the src/components/Nav.svelte file given below:

<script>
  ...
  import AuthNavItem from "./auth-nav-item.svelte";
  ...
</script>

<style>
  ...
  li:last-child {
    float: right;
  }
  ...
</style>
...
    <li><AuthNavItem/></li>
  </ul>
</nav>

Authenticating navbar item

An auth-nav-item.svelte component is created in the same directory as the Nav.svelte component we updated just now. Add the following content to it:

<style>
  a {
    /* Matches the styles in Nav.svelte */
    text-decoration: none;
    padding: 1em 0.5em;
    display: block;
  }
</style>

<a href="/auth/login">Sign In</a>

At this point, you can start the dev serverrunApp and you will see a new “Sign In” navigation menu item on the right side of the screen. A click on this link brings you to ...