Create the Login & Admin Page

Explore how to create a login page with Firebase Authentication in a Svelte app. Learn to configure FirebaseUI, manage sign-in flows, update navigation, handle user redirects, and build a basic admin dashboard accessible only to authenticated users.

We'll cover the following...

Creating a login page

Adding a Sign In Button
Adding a menu item for Sign In page
Authenticating navbar item
Creating a FirebaseUI configuration object
Hiding the Sign In button

Create the admin page

Sapper’s export

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 ...

1.Introduction

2.Create a GitHub Project Using Monorepo Template

3.Set Up Backend Using Sapper Template

4.Host Your Web App on Firebase

5.Set Up The Continuous Deployment Pipeline

6.Local Development

7.Feature Toggles

8.Production Monitoring & Rollbacks

9.Testing

10.Tailwind CSS

11.User Authentication

12.Database - Cloud Firestore

13.Firebase Local Emulator Suite

14.Trigger Services Based on Events

15.Final Tasks

16.What's Next?

Create the Login & Admin Page

Creating a login page

Adding a Sign In Button