Después de haber abordado en artículos anteriores los componentes de acceso a datos de Firebase para aplicaciones Polymer, ahora nos vamos a detener en el componente de autenticación de usuarios, que es un poco más complejo que los anteriores.

El componente de autenticación nos permite de una manera declarativa configurar el sistema de autenticación de usuarios de Firebase, pudiendo autenticar por diversos medios, como usuario/clave, de forma anónima y por medio de usuarios de diversas redes sociales. Y lo hace a muy alto nivel, sin que nos tengamos que ocupar de la mayoría de las situaciones relativas a la seguridad.

Podríamos usar el componente firebase-auth con una única línea de código, permitiendo autenticación solamente con escribir unas pocas propiedades en atributos de una etiqueta HTML y una invocación a un método Javascript, lo que es realmente asombroso. Aunque para ciertos usos, como autenticar con password, sí que necesitaremos usar algo más de código.

Métodos de autenticación

En Firebase existen diversos métodos de autenticación posibles:

• Anónima
• Por usuario y clave
• Por usuarios de redes sociales: Google, Facebook, Twitter, Github

Suponemos que estás familiarizado con esto, ya que ha sido objeto de estudio en el Manual de Firebase. Lo que no podemos dejar de remarcar es que hay que activar en la consola de Firebase cada uno de los mecanismos que queramos permitir en nuestra app.

Al iniciarse una aplicación Firebase no está activo ningún mecanismo de autenticación, por lo que tendrás que comenzar por ahí. Simplemente se trata de entrar en la consola de Firebase y habilitar el / los que desees.

Además, en el caso del login por redes sociales, oAuth, tendrás que configurar algunas informaciones en la consola. Sobre esto ya hemos visto alguna cosa en el artículo de Autenticación de usuarios con redes sociales en Firebase.

Autenticación Firebase declarativa

Como ya sabes, en Polymer está encapsulada la complejidad de los componentes dentro de su registro, por lo que programaremos en muchos casos de manera declarativa, configurando los componentes por medio del HTML. En el caso de la autenticación con Firebase llegamos a niveles extraordinarios de complejidad, todo un sistema de login de usuarios, expresada tan solo con unas sencillas configuraciones.

La etiqueta de un componente firebase-auth tendrá un aspecto como el siguiente:

<firebase-auth
  id="fauth"
  app-name="testpf"
></firebase-auth>

En esas líneas estamos definiendo los siguientes atributos:

id: simplemente para referirnos a ese componente, si es que lo necesitamos más adelante. app-name: colocamos el nombre de una aplicación configurada que queramos usar. Esa aplicación se declaró en el componente firebase-app que ya conoces.

Simplemente con esos atributos ya puedes hacer una autenticación, aunque ahora veremos otros útiles. Pero nuestro componente firebase-auth podría tener más atributos configurados:

<firebase-auth
    id="fauth"
    app-name="testpf"
    provider="facebook"
    signed-in="{{signedIn}}"
    user="{{user}}"
></firebase-auth>

En este caso estamos indicando nuevas informaciones:

provider: este es el proveedor de autenticación. Solo se usa el provider en caso que quieras loguear por medio de redes sociales, porque la autenticación anónima o por password no lo necesita. De manera predeterminada es "google".

signed-in: este atributo es bastante útil. Te expone un valor boleano que que indica si el usuario está o no está correctamente autenticado. Es habitual hacer lo que ves en el anterior código, que se bindea a una propiedad del componente, que luego podrás usar para saber si hay o no un usuario correcto activo.

user: este es el objeto con todos los datos de usuario a los que accedes cuando hay uno logueado en tu aplicación. A través de ese objeto podrás acceder al identificador de usuario así como datos que te exponga la red social con la que estás conectando. Como con signed-in, lo normal es que lo bindees a una propiedad.

Lanzar el proceso de autenticación

El proceso de login lo debes de lanzar imperativamente con Javascript. Para ello el componente tiene una serie de métodos que nos permiten lanzar distintos procesos de autenticación.

Para el caso de la autenticación anónima, dentro del código de cualquier método del componente, realizarías el login mediante la siguiente sentencia:

this.$.fauth.signInAnonymously();

Observa que primeramente accedemos al componente firebase-auth a través de su identificador: this.$.fauth y luego invocamos el método para el login anónimo. Este método te devolverá una promesa de la que hablaremos en un punto más adelante.

Para el caso de autenticación por medio de usuario y contraseña existe un método que se encarga de lanzar el proceso, al que enviarás las cadenas del email y la clave del usuario. El método también devuelve una promesa.

signInWithEmailAndPassword(email, clave)

Para el caso de autenticación con oAuth, usando los usuarios de redes sociales, tendrás dos posibilidades. Login con un popup y login por redirect. Estos dos mecanismos producen el mismo resultado, pero uno usa redirecciones para autenticar en la red social mientras que el otro usa una ventana emergente. Ya se explicaron las diferencias en el artículo de autenticación con conectores sociales.

Recuerda, no obstante, que la definición de la red social a usar la realizas con la propiedad "provider" del componente, como hemos visto antes. Aunque también lo puedes expresar mediante un parámetro opcional indicado en la función que lanza el proceso de autenticación.

signInWithPopup(provider)
signInWithRedirect(provider)

Ambos métodos también producen como respuesta una promesa.

Promesas para comprobar el resultado del proceso de autenticación

Todos los métodos que acabamos de ver producen como devolución una promesa que nos permite saber qué ocurrió al intentar autenticar. Esas promesas las debes de conocer ya, pues ya son un estándar en Javascript.

En el caso negativo recibes un objeto de error, desde el que podrás obtener información que presentar al usuario. En el caso positivo recibes un objeto desde el que podrás obtener información del usuario que se acaba de autenticar.

this.$.fauth.signInWithPopup()
          .then(function(respuesta) {
            console.log('entré', respuesta.user);
          })
          .catch(function(error) {
            console.log('error' + error);
          });

Con esto ya tienes todo lo que necesitas saber para comenzar a autenticar usuarios en aplicaciones Firebase + Polymer usando los componentes Polymerfire. Ahora solo queda disfrutar de tu tiempo, porque realmente todo el trabajo pesado ya lo tienes hecho.