DEV Community

Cover image for Implementando social login con angular 9 utilizando firebase/angularfire 6.0
Michel Novellino
Michel Novellino

Posted on • Edited on

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())
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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'; 
Enter fullscreen mode Exit fullscreen mode
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());
  }

}
Enter fullscreen mode Exit fullscreen mode
  // 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> 
Enter fullscreen mode Exit fullscreen mode

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

Facebook login test
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

Top comments (0)