Implementando social login con angular 9 utilizando firebase/angularfire 6.0

No puedo empezar el post sin presentarme primero, Es mi primer articulo en esta plataforma, tengo otros en medium sin embargo me recomendaron dev.to y he decidido probarlo. Link salvaje para el curioso Me dedico a desarrollar aplicaciones móviles y web, realmente me gusta mucho javascript, manejo frameworks como angular y vue, sin embargo he estado coqueteando mucho con golang, pero esto no es realmente lo importante,Ya escribire articulos al respecto.

lo que nos compete es el hecho de que hoy estaba iniciando un proyecto nuevo y decidí por la poca complejidad que probaría angular 9 el cual estaría usando firebase únicamente para hacer autenticación social, para esta tarea inicie descargando firebase y angularfire

npm install firebase @angular/fire --save

es menester comentar que para angular 9 el equipo de angularfire lanzo un nuevo release, el 6.0 el cual introduce Breaking changes.

entre los cuales podemos encontrar que desechan algunas características Pagina oficial de cambios y entre ellas una que nos afecta directamente en esta ocasión como esta

AngularFireAuth has dropped the auth property and instead Promise Proxies the underlying Firebase

lo cual significa basicamente que ya no necesitamos hacer esto

import { auth } from 'firebase/app'; 
// Ya no tenemos que usar la propiedad auth luego de afAuth
login() {
    return this.afAuth.auth.signInWithPopup(new auth.FacebookAuthProvider())
}

Entonces ¿Cómo lo hacemos?

La respuesta es muy sencilla

// importamos e inicializamos el modulo de angularfire en app.module
@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
  ]
})
// Siempre recuerda configurar primero el proveedor en el panel de firebase.

Entonces creamos nuestro servicio.

ng generate service /services/auth

y Configuramos el servicio

// podemos importar todo de firebase
import * as firebase from 'firebase'; 

// o usar solo lo que nos compete y evitar el peso innecesario.
import {auth} from 'firebase'; 

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
// yo acostumbro a utilizar solo lo necesario
import {auth} from 'firebase'; 
@Injectable({
  providedIn: 'root'
})

export class AuthService {

  constructor(public auth: AngularFireAuth) {
  }
  login() {
    this.auth.signInWithPopup(new auth.FacebookAuthProvider());
  }

}

  // creamos el boton en el html del componente
    <a href="javascript:void(0)" (click)="login()"  class="btn btn-neutral btn-icon">
         <span class="btn-inner--icon">
             <img src="./assets/img/icons/common/facebook.svg">
           </span>
            <span class="btn-inner--text">Login</span>
      </a> 

Hacemos click en el botón con esperanza de que funcione

Y woalah!

Las librerías que utilizamos en nuestras aplicaciones normalmente son de terceros y pueden perfectamente pertenecer a particulares que querían aportar algo en la comunidad, por lo cual no es demasiado raro que a pesar de los esfuerzos se generen incompatibilidades, Pero con un poco de entusiasmo siempre podemos resolver los problemas, Hasta un próxima ocasión