Autenticación de usuarios con Firebase

¿Estás en ese momento que deseas crear una aplicación web? Firebase te facilitará esa tarea porque es una plataforma que abarca muchas áreas, desde el hosting o alojamiento web, registro de bases de datos, autenticación de usuarios, envío de mensajes personalizados y almacenamiento de archivos hasta analizar el comportamiento del usuario mediante la característica Analytics, entre otros.

Además, tiene como ventaja que puedes gozar de estos servicios de forma gratuita y, como requisito, debes tener una cuenta Gmail y muchas ganas de aprender, pero tiene sus limitantes. Por ejemplo, en su sitio oficial de precios, nos muestra una tabla sobre el almacenamiento de tu sitio web hasta 10 GB. Si se excede, por cada GB adicional debes pagar $0.026. Así que te recomiendo que tomar un tiempo para analizar esta sección y evaluar si estos precios se ajustan a tu presupuesto.

Si continúas explorando esta página podrás observar una calculadora, la cual te permite visualizar con exactitud el costo por utilizar estos servicios. Esto te ayudará a controlar el uso de los recursos.

¿Cómo usar Firebase?

Para comenzar, es necesario seguir algunos pasos simples. Primero, ingresamos en Firebase Console, en el cual debes registrarte con un correo de tu preferencia. En esta imagen, te muestro la pantalla inicial. Ahora vamos a crear un proyecto para autenticar usuarios de Google con React.

Una vez que presionemos el botón Agregar Proyecto, debemos completar dos pasos.

Configurado el proyecto, te explicaré el funcionamiento de tres características de Firebase.

Authentication

Nos permitirá saber si un usuario está registrado en el proyecto, desde una función de React. Además, Firebase hará posible que se conecten desde sus cuentas de Google. Para ello, vamos a solicitar este servicio de la siguiente manera:

En esta ocasión, seleccionamos el proveedor Google que se encargará de registrar y conectar tu cuenta en el proyecto. Luego, nos llevará a otra pantalla que debemos habilitar en la parte superior derecha para elegir y guardar el correo de soporte (el mismo que usamos para registrarnos).

Enseguida, necesitamos integrarlo con nuestra aplicación creada con React. Para ello, buscamos en el panel izquierdo la Descripción General, luego Configuración del Proyecto y el ícono señalado en la siguiente imagen.

A continuación, vamos al editor de código Visual Studio Code, abrimos una nueva terminal y pegamos el primer comando que nos indica la imagen con el fin de instalar todas las funcionalidades que ofrece Firebase en el desarrollo de la aplicación.

npm install firebase

Como buena práctica, es recomendable crear un archivo .env en la raíz del proyecto para guardar estas variables de entorno y generar mayor seguridad a nuestras credenciales. Esto permite mantener información sensible, como claves de API o URLs de servidor, fuera del código fuente y facilita la configuración y despliegue de la aplicación en diferentes entornos (desarrollo, prueba, producción, etc.).

El siguiente paso es crear un archivo llamado firebase.js, donde pegamos el código de la imagen anterior que contiene initializeApp, utilizado para inicializar una aplicación dentro de Firebase. Este método se invoca una vez en la aplicación para establecer la conexión con el proyecto.

En esta aplicación crearemos una función como una nueva instancia de GoogleAuthProvider, que permite utilizar la autenticación de Google como método de inicio de sesión, obteniendo un token de acceso que se puede utilizar para autenticar posteriormente al usuario en el servidor.

Como se muestra en la imagen, la función nos retorna signinwithpopup, un proceso que permite al usuario iniciar sesión en una aplicación o servicio mediante una ventana emergente o popup en lugar de redirigirse a una página de inicio de sesión separada. Esto puede ofrecer una experiencia de usuario más fluida, ya que evita la necesidad de cambiar entre diferentes páginas.

Esta ventana emergente muestra las diferentes cuentas de Google disponibles en nuestro historial. Como he seleccionado la primera opción, me dirijo a la consola de Firebase para verificar la autenticación del correo. En efecto, quedó registrado y listo para ser autenticado.

Firestore Database

Con este servicio podemos almacenar y sincronizar datos en tiempo real entre diferentes clientes y dispositivos, además de utilizar un modelo de datos basado en documentos que organiza los datos en colecciones y permite consultas flexibles y escalables.

En esta fase, elegiremos la primera opción: Modo de Producción. Esto nos indica que podemos leer y escribir datos.

Como segundo paso para configurar nuestra base de datos, debemos seleccionar la ubicación. Por encontrarme en Latinoamérica, dejaré esta opción. Si te encuentras en otro continente, puedes elegir la más cercana a tu localidad.

Así es como se ve la pantalla luego de habilitar este servicio, por lo que esta base de datos es no relacional al utilizar modelos de datos diferentes.

Estas bases de datos no relacionales son adecuadas para manejar grandes volúmenes de datos no estructurados o semiestructurados y se utilizan en aplicaciones web, móviles y de Internet de las Cosas (IoT), donde la escalabilidad y el rendimiento son fundamentales.

Esto significa que, a medida que realizamos solicitudes para registrar datos, automáticamente Firebase se encarga de hacer las colecciones y documentos.

Una vez que el usuario se ha registrado o iniciado sesión, se pueden guardar sus datos en Firestore Database. Para ello, es necesario crear una colección llamada users y añadir un documento por cada usuario con su identificador único como clave. En cada documento se puede guardar la información que se desee del usuario, como su nombre, su foto o preferencias.

Continuamos con la sección Reglas y nos situamos en el código en la sexta línea. Cambiamos la condición false a true y guardamos los cambios en el botón Publicar. Esto permite la lectura y escritura de datos.

Storage

Nos proporciona seguridad y control de acceso para los archivos blogfiles almacenados, lo que ayuda a  definir quién puede ver y descargar cada archivo. Son archivos relacionados con un blog, como por ejemplo imágenes, videos, documentos o cualquier otro tipo de archivo multimedia utilizado para enriquecer el contenido del blog.

Estos archivos se utilizan para mejorar la experiencia de los lectores y proporcionar información adicional o visualmente atractiva. Es importante mencionar que en su web oficial, Firebase ofrece una guía para subir los archivos que el usuario necesite.

Si quieres permitir al usuario subir archivos multimedia a la aplicación, debes tener un input file en un formulario en el archivo App.jsx, el cual genera una interfaz para seleccionar el archivo que se desea almacenar. Luego, agregamos el evento onChange, que se ejecutará cada vez que el valor del input cambia, actualizando el estado con el nuevo valor. De esta manera, se puede acceder al valor actualizado en cualquier momento.

En la siguiente imagen, crearemos la variable file con useState que almacenará el archivo que seleccione el usuario. Después,  asignamos otra variable handleSubmit como una función asíncrona. También añadimos el evento preventDefault para evitar que se refresque la página al presionar el botón Subir Archivo.

Como último paso, agregamos el bloque try-catch, que consiste en una estructura para manejar los errores que puedan presentar los archivos subidos por el usuario. Entonces definimos la variable result, que nos permitirá invocar la función uploadFile.

Para enviar los archivos binarios, imágenes, videos o documentos a un destino específico, creamos esta función asíncrona llamada uploadFile y tenemos como parámetro file, compuesto por un archivo.

A continuación, definimos la variable storageRef para obtener una referencia. Por lo tanto, agregamos la variable storage, que ya establecimos como un método getStorage para enviar los archivos binarios, imágenes, videos o documentos a nuestra base de datos Storage de Firebase.

Ahora bien, cada archivo debe ser único. Para ello, utilizaremos el formato v4, que se genera utilizando una combinación de información aleatoria y la dirección MAC del dispositivo en el que se crea.

Este identificador consta de 32 dígitos, generalmente representados en grupos separados por guiones. Los primeros 8 dígitos representan la información de tiempo, los siguientes 4 dígitos representan la versión del UUID y los últimos 12 dígitos son generados aleatoriamente.

Por otro lado, Firebase también genera una URL luego de subir el archivo, para luego tomarlo para nuestra base de datos, el cual se encuentra debajo de la imagen. Y si hacemos un clic sobre esta URL, nos abre una pestaña nueva mostrándonos el archivo.

Para obtener la URL para descargar o mostrar el archivo, usamos desde nuestra aplicación el método getDownloadURL. También puedes guardar esta URL en el documento del usuario en Firestore Database para acceder al archivo más tarde.

Con este paso a paso, he demostrado que Firebase nos proporciona herramientas para comprender a usar la consola, donde puedes administrar y monitorear tus aplicaciones, ver estadísticas y realizar ajustes según sea necesario.

Puedo decir que estos son los pasos básicos para autenticar usuarios con Firebase aplicando las características Firestore Database y Storage. Aquí existe un mar de muchas posibilidades que se pueden explorar con estos servicios, como usar reglas de seguridad para proteger los datos y los archivos, usar funciones en la nube para ejecutar código sin servidor o usar notificaciones push para enviar mensajes a los usuarios.

También puedes acceder a recursos adicionales, como la documentación, para ampliar tus conocimientos y aprovechar al máximo Firebase.

Si buscas simplificar el desarrollo de tus aplicaciones, mejorar la escalabilidad y rendimiento y aprovechar las ventajas de un ecosistema completo, Firebase es la plataforma que necesitas. Explora sus características, experimenta con sus servicios y descubre cómo Firebase puede transformar tus proyectos de desarrollo. No esperes más y comienza a utilizar Firebase hoy mismo. ¡El cielo es el límite!