Create the Login & Admin Page
Let's create a login and an admin page for your web application.
We'll cover the following...
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