Firebase es un excelente complemento para desarrolladores que deseen realizar aplicaciones y no quieran realizar por ellos mismos la parte que llamamos "backend". Uno de los servicios fundamentales que nos ofrece es la autenticación de usuarios, que vamos a introducir en este artículo.

Para el desarrollo de aplicaciones con Firebase contamos con un completo sistema, capaz implementar todas las fases del proceso de autenticación de usuarios en una web o aplicación para dispositivos. Nos referimos no solamente al hecho de indicar un usuario y una clave para poder hacer el login, sino a todo el flujo de registro de usuarios, recuperación de contraseñas perdidas, login y logout del sistema, etc.

Firebase tiene diversos mecanismos de autenticación, por medio del típico par usuario / clave y por medio de diversas redes sociales. Además tiene otro sistema "custom" que nos permite derivar el proceso de autenticación a lógicas de negocio más complejas que puedas tener en el backend tu aplicación actual. En este artículo abordaremos el proceso de registro y autenticación por medio de email y contraseña.

Habilitar la autenticación de usuarios por medio de email y password

Antes de comenzar a realizar ninguna otra acción debemos configurar nuestra aplicación Firebase para que permita autenticación por medio de email y password. Esto se realiza desde el panel de administración de tu aplicación, en el sitio web de Firebase.

Entrando en la aplicación que estemos usando, tienes que ir a la sección "Login & Auth" y luego a la pestaña "Email & Password". Ahí encontrarás un checkbox etiquetado como "Enable Email & Password Authentication" que deberá estar marcado para permitir este modelo de autenticación de usuarios.

Registro de usuarios en Firebase

Para abordar el sistema de autenticación de Firebase comenzaremos explicando cómo se registra un usuario dentro del servicio de Backend. Trataremos de realizar ejemplos sencillos para comenzar, usando las alternativas más elementales. Pero recuerda que siempre tienes la documentación en el propio sitio de Firebase, donde podrás encontrar más información.

Para registrar usuario necesitamos invocar el método createUser() sobre una referencia. La ruta de nuestra referencia será simplemente la raíz de nuestra base de datos, es decir, la URL principal de nuestra aplicación Firebase, algo así como https://example.firebaseio.com/

var ref = new Firebase("https://example.firebaseio.com/");

Una vez tenemos nuestra referencia debemos construir un objeto usuario, en el cual colocaremos dos propiedades: email y password.

var user = {
      email: "malvarez@desarrolloweb.com",
      password: "1234"
};

Éstas son las credenciales que usaremos tanto para registrar usuarios como para hacer el correspondiente login, una vez que estén registrados. En el código anterior has visto cómo crear este objeto usuario por medio de un literal de objeto JavaScript, pero lo más normal sería que ese objeto lo construyas por medio de los datos recabados mediante un formulario.

Al método createUser() le enviamos dos parámetros. En el primero indicamos el objeto usuario que acabamos de construir y en el segundo indicamos una función callback, que nos permite ejecutar código cuando el intento de crear el usuario haya sido finalizado. Esta función callback recibe a su vez como parámetro un posible objeto error. Decimos posible porque si no se produjo un error simplemente nos llegará el valor "null". Si se produjo un error a partir de ese objeto podremos encontrar una descripción del problema que Firebase ha detectado.

Se verá mejor con el código que encuentras a continuación:

ref.createUser(user, function(error){
  if(error){
    console.log(error.code);
  }else{
    console.log("Tu usuario se ha registrado");
  }
});

Autenticando usuarios mediante Firebase

Una vez que hemos registrado nuestro primer usuario podemos proceder a realizar un intento de autenticación con el mismo.

Para realizar el intento de autenticacion del usuario utilizamos el método authWithPassword() sobre una referencia a nuestra base de datos Firebase, igual que antes..

El método authWithPassword() recibe como parámetro el objeto usuario con las credenciales de acceso.

var user = {
  email: "malvarez@desarrolloweb.com",
  password: "1234"
};

ref.authWithPassword(user);

El método de autenticación authWithPassword() también podría recibir como parámetro una función callback para realizar acciones cuando se tiene resultado del intento de acceso del usuario, pero nosotros ahora vamos a conocer otra vía para ser notificados cuando se haya producido un cambio en el estado del usuario (pasar de loguedado a no logueado o viceversa).

Definición de un evento de cambio en el estado de autenticación

Existen diversos mecanismos para saber si un usuario está logueado o no en una aplicación Firebase. Vamos a implementar en esta ocasión uno que permite estar notificados de cualquier cambio en el estado de autenticación del usuario, de manera asíncrona.

Se trata de usar el método onAuth(), que también pertenece a la referencia Firebase. Este método recibe como parámetro una función que nos permite ejecutar acciones cuando se ha producido un cambio del estado de autenticación del usuario. Veamos primero el código de la invocación de onAuth(), porque así será más fácil entender cómo funciona.

ref.onAuth(function(data){
  if(data){
    console.log("El user está autenticado con identificador: ", data.uid);
  }else{
    console.log("no tengo usuario autenticado");
  }
});

Como puedes ver, la función enviada como parámetro al método onAuth() recibe a su vez un parámetro que hemos nombrado en el código como "data". Ese parámetro contiene los hipotéticos datos de autenticación del usuario. Realmente pueden ocurrir dos cosas:

Si el usuario no está autenticado, simplemente recibiremos un null como valor de ese parámetro. En el caso de que el usuario sí estuviera autenticado en ese parámetro recibiremos los datos de autenticación del usuario que está correctamente logueado.

De entre todos los datos que se pueden consultar por medio del objeto de autenticación hay uno muy importante qué es el identificador del usuario. En Firebase cada usuario registrado tiene un identificador único y nosotros lo podemos consultar por medio de la propiedad "uid".

Realizar logout de un usuario

Para realizar el logout de un usuario que se encuentra autenticado usamos siempre el método unauth(), qué depende también de la referencia a nuestra aplicación Firebase.

ref.unauth();

Como resultado de la ejecución de este método, si hubiese un usuario autenticado en la aplicación, simplemente se realizará el cierre de su sesión. Con ello veremos que se ejecuta otra vez la función definida para el evento onAuth().

Vídeo del proceso de autenticación

Todo el proceso que has visto explicado En este artículo se encuentra descrito en un vídeo tutorial que hemos publicado en YouTube. Si tienes 18 minutos te recomendamos ver el vídeo detenidamente porque encontrarás mucha más información de la que hemos podido resumir en el anterior texto.

En el vídeo encontrarás paso a paso la realización de un registro de usuario, cómo se puede más tarde autenticarse con las credenciales de usuario y cómo utilizar el método onAuth() para ser notificados ante cualquier cambio de estado del usuario que está visitando la página. Si el uso de onAuth() no ha quedado del todo claro, es importante que veas el vídeo porque se realiza el proceso de login y logout en varias situaciones, de modo que podremos ir viendo como onAuth() va notificando todos los cambios en la autenticación.