In this blog post, we build a Sign-In modal component ( SignInModalComponent ) using the stable Angular Signal Forms API ( @angular/forms/signals ) to handle email and password authentication.

Caption: Sign-In Dialog with email and password fields.

Architecture & Mental Model

The sign-in flow works as follows:

Signal Form Validation : We build a Signal Form with required email and password fields. When validation fails on submit, onInvalid automatically focuses the first invalid control.

Firebase Authentication : When a user submits valid form fields, SignInModalComponent calls AuthService.signIn() to verify that the submitted email and password match an existing account in Firebase Authentication.

Route Redirection or Error Handling :

Valid credentials : When authentication succeeds ( AuthService.isAuthenticated() is true ), the modal closes and redirects the user to the /dashboard route, where they can perform AI tasks.

Invalid credentials / error thrown : When authentication fails,…