Login

En la consola de firebase:
1. Crear un usuario de pruebas para loguearte en Authentication -> Crear usuario

2. En Realtime Database -> Reglas imponer que tanto para leer como escribir en la BBDD haya que estar logueado:
".read": "auth!=null",
".write": "auth!=null",
Si se quiere leer/escribir siempre sin necesidad de loguear pues poner directamente true

3. En Configuración -> Configuración del proyecto -> General: hay que registrar la APP y ponerle un nombre (por ejemplo: com.lsg.empleados) para así obtener el ApiKey y el authDomain.

4. Instalar en VSCode el módulo de cookies: https://programando-angular.blogspot.com/2022/12/cookies.html

5. En src\app\app.component.ts en el ngOnInit:
firebase.initializeApp({
   apiKey: "AIzaxxxxx3qVcKrXkaK_doD334",
   authDomain: "com.lsg.empleados"
});


---

Crear un componente Login

Crear un loginService:
import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
import firebase from "firebase/compat/app";
import 'firebase/compat/auth';
import { CookieService } from "ngx-cookie-service";

@Injectable()
export class LoginService {
   constructor(private router:Router,private cookies:CookieService) {
}

token:string;

checkLogin(email:string,pw:string) {
   firebase.auth().signInWithEmailAndPassword(email,pw).then(
     response=>{
       firebase.auth().currentUser?.getIdToken().then(
       token => {
       this.token = token;
       this.cookies.set("token",this.token);
       this.router.navigate(['/']);
     }
   )
}
);
}

getTokenId() {
   return return this.cookies.get("token");
}

estaLogueado() {
   return this.cookies.get("token");
}

logout() {
   firebase.auth().signOut().then(
   ()=>{
   this.token = "";
   this.cookies.set("token",this.token);
   this.router.navigate(['/']);
   window.location.reload();
   }
   );
   }
}

En el constructor de src\app\data.services.ts añadir este servicio:
constructor(private httpClient:HttpClient, private loginService:LoginService) {}
En el html del componente Login: <form #formLogin="ngForm" (ngSubmit)="login(formLogin);" style="margin-top:20px;">
<input type="email" name="email" placeholder="email" ngModel>
<input type="password" name="pw" placeholder="Contraseña" ngModel>
<button type="submit">Aceptar</button>
</form>

El el ts del componente login:
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { LoginService } from './login.service';

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

constructor(private loginService:LoginService) { }

ngOnInit(): void {
}

login(form:NgForm) {
const email = form.value.email;
const pw = form.value.pw;

this.loginService.checkLogin(email,pw);
}
}

Para poner los links en de login y logout en la navbar hay que hacerlo en el componente principal app en src\app\app.component.html:
<li *ngIf="!checkIfLogged()"><a routerLink="/login">Login</a></li>
<li *ngIf="checkIfLogged()"><a (click)="logout()" style="cursor:pointer;">Logout</a></li>
Y en src\app\app.component.ts:
checkIfLogged() {
   return this.loginService.estaLogueado();
}

logout() {
   return this.loginService.logout();
}