Autenticación con Angular y Firebase
Autenticación con Angular y Firebase


En este tutorial vamos a ver cómo crear un sistema de Autenticación con Angular y Firebase haciendo uso de AngularFire2 utilizando la autenticación con password.

Lo primero que debemos hacer es abrir el archivo app.module y añadir lo siguiente para informarle a nuestra aplicación que queremos utilizar autenticación con Firebase.

Esa es la única configuración que necesitamos hacer para poder construir un sistema de Autenticación con AngularFire2.

Servicio para manejar la autenticación con Angular y Firebase

Vamos a crear un servicio para manejar la autenticación de la aplicación, tendremos un observador para saber si el usuario está logueado el cual en caso afirmativo establecerá el usuario para que podamos acceder más adelante, también tendremos 2 métodos, uno para iniciar sesión y otro para cerrar sesión.

Cómo puedes ver, en el constructor nos suscribimos con this.af.auth.subscribe, de esta forma sabremos en todo momento si un usuario ha sido identificado correctamente o no, así de fácil.

Componente para iniciar sesión con AngularFire2

Ahora vamos a crear un nuevo componente para poder utilizar nuestro servicio y así poder iniciar sesión.

Hemos devuelto una promesa desde el servicio simplemente para poder mostrar un error en el formulario en caso de que la autenticación falle, aunque es cierto que no es necesario y se puede hacer de varias formas.

Ahora crea un nuevo archivo .html para pintar un formulario e iniciar sesión.

En este momento ya podrás iniciar sesión con email y password en Firebase, recuerda crear un usuario desde la pestaña authentication, si inicias sesión correctamente el formulario desaparecerá ya que está pendiente del observable del servicio FirebaseAppService.

Acceder al usuario autenticado con AngularFire2

Ahora que hemos iniciado sesión y nuestro servicio es capaz de establecer el usuario identificado, vamos a acceder a su información, para ello simplemente debemos añadir el siguiente código html, por ejemplo encima del formulario de login.

De esta forma tan sencilla, aparte de mostrar la información del usuario identificado podemos cerrar la sesión.

Eso es todo lo que necesitamos para crear un sistema de Autenticación con Angular y Firebase, espero que te haya sido útil.

Si te ha parecido interesante, no lo dejes aquí

visítanos en cursosdesarrolloweb.es

Tenemos cursos sobre desarrollo web y móvil actualizados donde utilizamos las últimas tecnologías.