Anyone with the public URL can use my tokens to perform image analysis and text-to-speech, which can quickly drive up my billing costs. To prevent unauthorized usage, I want to convert /dashboard into a protected route by adding Email/Password authentication with Firebase Auth.

Firebase Auth supports many authentication providers out of the box, and I chose Email/Password because it is the simplest method to configure. In Part 1, we will configure the Firebase Auth Local Emulator, build a lazy-loaded AuthService and a functional route guard, and protect the /dashboard route using CanActivateFn .

Architecture & Mental Model

Part 1 focuses on running the Firebase Auth Emulator alongside the Angular dev server and configuring authentication state management.

The architecture uses Firebase's browser session persistence ( browserSessionPersistence ) to manage the user's authentication state, which provides two key benefits:

After a user authenticates successfully, Firebase persists the authentication state…