Tutorial de Electron: Introducción a Firebase Auth

Bienvenidos a otro artículo del tutorial de Electron. Tal y como hicimos en una ocasión anterior vamos a proceder a repasar otro concepto que trabajaremos en el siguiente artículo de la serie. Esta vez también vamos a ver un servicio de Firebase, con la diferencia de que veremos Firebase Auth, el servicio de autenticación de Firebase. Es importante que hagamos un repaso al mismo pues no es lo mismo trabajar con él en Electron que en cualquier otro ambiente. Aun así veremos los métodos más destacados y de las peculiaridades que nos van a surgir hablaremos en el apartado final de el artículo.

Como creo que es obvio, usaremos este servicio para autenticar a los usuarios que usen OpenChat, así mismo obtendremos de ellos datos que se enviarán a la base de datos de Firebase junto a los mensajes que publiquen, pudiendo identificar de esta manera la autoría de los diferentes mensajes que pasan por nuestra aplicación.

¿Qué es Firebase Storage?

Tal como he definido anteriormente, Firebase Auth es el sistema de autenticación de Firebase. Nos provee de una cantidad muy completa de proveedores de este servicio de autenticación, permitiéndonos seleccionar más de uno a la vez y centralizando todos ellos en un solo lugar, el cual es el panel de administración de este servicio. Entre los proveedores que podemos usar encontramos redes sociales como Facebook o Twitter, métodos de inicio de sesión convencionales(Usuario/Contraseña, anónimo) y cómo no podía ser de otra manera podremos iniciar sesión usando el proveedor de Google, el cual reducirá el proceso de configuración de este de manera drástica al usar Firebase.

Entre los propósitos de Firebase al usar este servicio está la seguridad y la implementación rápida en nuestras aplicaciones.

Métodos comunes de la API(en Web)

service.signInWithEmailAndPassword()

Este método nos permite iniciar sesión con el método de Usuario/Contraseña pasándole estos elementos por parámetros. Es una promesa por lo que podremos trabajar con errores de la misma usando .catch()

// Código extraido de la documentación oficial de Firebase
firebase.auth().signInWithEmailAndPassword(email, password)
  .catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

service.signOut()

Con este método, Firebase se encargará de cerrar la sesión del usuario en nuestra aplicación. Podremos aplicarlo teniendo un botón para tal función o configurar la desconexión cuando el usuario se lleve inactivo X tiempo, esta última decisión dependerá en gran medida de el tipo de aplicación que estemos creando.

// Código extraido de la documentación oficial de Firebase
firebase.auth().signOut().then(function() {
  // Redireccionar a la vista de login, borrar el usuario...
}).catch(function(error) {
  // Informar al sistema y al usuario del error.
});

service.signInWithPopup()

Usando este método, en el caso de que queramos que nuestros usuarios inicien sesión con un proveedor diferente a los comunes, es decir, un inicio de sesión social, conseguiremos que realicen este proceso mediante una ventana emergente.

serive.signInWithRedirect()

A diferencia del método anterior, con este conseguiremos que nuestra aplicación redireccione al proveedor del inicio de sesión y tras el proceso de autenticación, que retorne el resultado sin haber tenido que usar una ventana emergente.

Como la página cambia a la del proveedor de inicio de sesión, Firebase nos requiere llamar a dos métodos en vez de a uno solo, como en el caso anterior. Una vez instanciemos .signInWithRedirect() deberemos de llamar a firebase.auth().getRedirectResult(), promesa con la cual podremos obtener los datos del usuario o notificar de un error.

La decisión entre los dos métodos queda por parte del desarrollador, aunque sin duda como todo depende de tus necesidades pues quizás aunque quieras trabajar con PopUps para tu aplicación sea mejor usar las redirecciones por que estas fallen en dispositivos móviles. Afortunadamente los métodos como has visto son fáciles de configurar y serán fáciles de transicionar a otros en el caso de que lo necesites, sin apenas cambiar la lógica de tu aplicación.

Si quieres conocer más sobre los métodos de Firebase Auth, los tienes todos aquí.

Trabajando con Firebase Auth en Electron

Tal como nos pasó con el tema de Firebase Storage, deberemos de trabajar de una manera particular por el ambiente en el que estamos.

Para comenzar tengo que destacar que Firebase Auth está construido para trabajar todo el proceso de autenticación y gestión de usuarios desde el Front, tal como acabamos de ver con los métodos anteriores y que solo deja para el ambiente que ellos definen como Admin(NodeJS, el Back) el tema de gestión de tokens, en resumidas cuentas, de seguridad. Por tanto, en la implementación de Firebase Auth en OpenChat, esta se realizará sobre el ambiente Web, es decir sobre ReactJS.

Como curiosidad, puedes trabajar perfectamente Firebase Auth en una aplicación nativa Android o iOS pero la implementación varía. Te recomiendo revisar la documentación para estos supuestos.

Otro aspecto a tener en cuenta es el hecho de que métodos como el popUp o el direct no van a funcionar tal cual pues habría que generar una ventana y esto sería un proceso más complejo para nuestra aplicación, por tanto, lo que haremos será trabajar con el método de Usuario/Contraseña y desde React, una vez tengamos estos los enviaremos a Firebase usando uno de los métodos que ya hemos visto, en concreto el método service.signInWithEmailAndPassword().

Tendremos que crear igualmente una vista para la autenticación, y al usar el método de usuario y contraseña crearemos un formulario para ello. En nuestro caso no vamos a implementar método para cerrar sesión o para editar el perfil pero como ves sería muy sencillo aplicando la dinámica de coger los datos de la vista y mandarlos a Firebase usando los diferentes métodos.

Conclusión

Con este artículo hemos obtenido una visión global sobre el servicio de Firebase Auth, como trabajar con él en ElectronJS y, por tanto, la implementación que nosotros vamos a proceder en el siguiente punto de la serie así como la adaptación de lo que ya tenemos construido de manera que piezas como, los mensajes ahora aparezcan con el usuario que inicie sesión en vez de unos datos estáticos que colocamos al principio del desarrollo.