Registration

createAccount(): void {
  const email = this.regForm.get('formEmail')?.value;
  const password = this.regForm.get('formPassword')?.value;
  this.auth
    .createUserWithEmailAndPassword(email, password)
    .then(() => this.router.navigate(['/']))
    .catch((error) => {
      this.error = error.message;
    });
}

Component

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss'],
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
})
export class RegistrationComponent {
  email: string = '';
  password: string = '';
  confirmPassword: string = '';
  error: string = '';

  constructor(
    private readonly auth: AngularFireAuth,
    private readonly router: Router
  ) {}

  erroreMessageMap: any = {
    'auth/wrong-password': 'The password is not correct',
    'auth/email-already-in-use': 'An account with that email already exists',
    'auth/invalid-email': 'Please enter a valid email address',
    'auth/user-not-found': 'There is no account with that email',
    'auth/internal-error':
      'Something went wrong. Please check your inputs and try again.',
  };

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

  createAccount(): void {
    const email = this.regForm.get('formEmail')?.value;
    const password = this.regForm.get('formPassword')?.value;
    console.log(email, password);
    this.auth
      .createUserWithEmailAndPassword(email, password)
      .then(() => this.router.navigate(['/']))
      .catch((error) => {
        this.error = error.message;
      });
  }
}

Template

<div class="container">
  <h1 class="mb-4">Registration</h1>
  <p *ngIf="error">{{ error }}</p>
  <form [formGroup]="regForm" (ngSubmit)="createAccount()" class="card">
    <div class="mb-3">
      <label for="email" class="form-label">Email address</label>
      <input
        formControlName="formEmail"
        type="email"
        class="form-control"
        id="email"
      />
      <div
        *ngIf="regForm.controls['formEmail'].errors?.['required'] && regForm.controls['formEmail'].touched"
        class="text-danger"
      >
        Email field is required.
      </div>
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input
        formControlName="formPassword"
        type="password"
        class="form-control"
        id="password"
      />
      <div
        *ngIf="regForm.controls['formPassword'].errors?.['required'] && regForm.controls['formPassword'].touched"
        class="text-danger"
      >
        Password field is required.
      </div>
    </div>

    <div class="mb-3">
      <label for="password" class="form-label">Confirm Password</label>
      <input
        formControlName="formPassword"
        type="password"
        class="form-control"
        id="password"
      />
      <div
        *ngIf="regForm.controls['formPassword'].errors?.['required'] && regForm.controls['formPassword'].touched"
        class="text-danger"
      >
        Password field is required.
      </div>
    </div>

    <button type="submit" class="btn btn-dark">Submit</button>
  </form>
</div>