Login Form

"firebase": "^10.4.0",
"@angular/fire": "^7.5.0",

Component

...
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Component({
  ...
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
})
export class LoginComponent {
  constructor(private readonly auth: AngularFireAuth) {}

  form = new FormGroup({
    formEmail: new FormControl(),
    formPassword: new FormControl(),
  });

  onSubmit(): void {
    if (this.form) {
      const email = this.form.get('formEmail')?.value;
      const password = this.form.get('formPassword')?.value;
      console.log(email, password);
      this.auth
        .signInWithEmailAndPassword(email as string, password as string)
        .then(() => console.log('You are logged in'));
    }
  }
}

app.module

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
@NgModule({
  declarations: [AppComponent],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
  ],
})
Was this page helpful?