Añadir un método de autenticación con Angular

Para autenticarnos en una app de angular, debes importar dos librerías

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

import { auth } from 'firebase/app';

Lo mejor es crear un servicio que se encargue de la gestión del Login y Logout para lo cual debemos ejecutar el siguiente comando

ng generate service auto-usr --spec false 

En el servicio importamos las dos librerías anteriores y creamos uns propiedad user que contendrá la información que devuelva el google provider.

public user;

Ahora debemos instanciar el objeto auth

 constructor(public afAuth: AngularFireAuth) { }

A continuación se crean los dos métodos para loguearse y desloguearse

login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
    this.user=this.afAuth;
    console.log(this.user);
}
logout() {
    this.afAuth.auth.signOut();
}
  

El código completo del servicio queda así

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

@Injectable({
  providedIn: 'root'
})
export class AutoUsrService {
  public user;
  
  constructor(public afAuth: AngularFireAuth) { }

  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
    this.user=this.afAuth;
    console.log(this.user);
  }
  logout() {
    this.afAuth.auth.signOut();
  }
  
}

Plantilla de inicio

Ahora debemos importar el servicio al componente principal de la app, en este componente establecemos una condición que impida mostrar la información

import { AutoUsrService } from './auto-usr.service';

Y en el constructor creamos una instancia del servicio

 public  slAuthService:AutoUsrService

y luego los dos métodos que invoquen el login y el logout del servicio

login() {
    this.slAuthService.login();
  }
  logout() {
    this.slAuthService.logout();
  }

El código completo del componente principal queda así

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AutoUsrService } from './auto-usr.service';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  items: Observable<any[]>;
  constructor(db: AngularFirestore, public  slAuthService:AutoUsrService) {
    this.items = db.collection('items').valueChanges();
  }

  login() {
    this.slAuthService.login();
  }
  logout() {
    this.slAuthService.logout();
  }
}

Creando la plantilla html del componente

Para definir una plantilla en base al estado del usuario se usará la directiva *ngIf de este modo si el usuario no esta logueado mostrará el botón para hacerlo.

Caso contrario si el usuario ya está logueado mostrará un botón de logout

<div *ngIf="slAuthService.afAuth.user | async as user; else showLogin"> 
  <div class="container">     
      <p>Bienvenido {{ user.displayName }}</p>
      <button (click)="logout()" class="btn btn-danger">Logout</button> 

      <ul>
        <li class="text" *ngFor="let item of items | async">
          {{item.name}}
        </li>
      </ul>
      <!-- <app-login></app-login>
       -->
      <router-outlet></router-outlet>     
  </div>
</div>

<ng-template #showLogin>
<div class="container">  
  <div class="row">
      <div class="col-md-12 col-md-offset-2">
          <br>
          <p>Debes Logearte para acceder al sistema.</p>
          <button (click)="login()" class="btn btn-danger">Logearte con una cuenta Google</button>
          <p>
              <small>debes contar con una cuenta de google para poder usar el sistema</small>
          </p>
      </div>
  </div>
</div>
</ng-template>

Una vez esté logueado aparece el botón de logout

Error en el logueo

Si al momento de loguear aparece la pantalla momentáneamente y luego desaparece debes revisar la consola

code: "auth/operation-not-allowed"
message: "The identity provider configuration is disabled."

El error anterior pasa cuando no has habilitado el método de autenticación, para hacerlo debes ir a tu consola de firebase y habilitarlo

Debes habilitarlo para poderte logear

Añadir un dominio autorizado

---