ShekMak

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { HomeComponent } from './home/home.component';

import { AngularFireModule } from '@angular/fire/compat';

ShekMak

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyBB55bixCn5dR99CJQTlZJlYQ_ArhgWDnI",
    authDomain: "fir-management-b88b8.firebaseapp.com",
    projectId: "fir-management-b88b8",

ShekMak

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from '@firebase/app-compat';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

ShekMak

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})

ShekMak

<section>
    <h2>Sign Up</h2>
    <form class="auth-form" [formGroup]="signupForm" (ngSubmit)="signUpWithEmailAndPassword()">
        <div class="auth-form-item">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" formControlName='email'>
            <p *ngIf="signupForm.get('email')?.invalid && (signupForm.get('email')?.dirty || signupForm.get('email')?.touched)">
                <span *ngIf="signupForm.get('email')?.errors?.required">Email is required.</span>
                <span *ngIf="signupForm.get('email')?.errors?.email">Email is invalid.</span>
            </p>

ShekMak

<section>
    <h2>Login</h2>
    <form class="auth-form" [formGroup]="loginForm" (ngSubmit)="loginWithEmailAndPassword()">
        <div class="auth-form-item">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" formControlName='email'>
            <p *ngIf="loginForm.get('email')?.invalid && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched)">
                <span *ngIf="loginForm.get('email')?.errors?.required">Email is required !</span>
                <span *ngIf="loginForm.get('email')?.errors?.email">Email is invalid !</span>
            </p>

ShekMak

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

ShekMak

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-size: 17px;
}

body {