Esta demo consta de un album de fotos y de dos formularios para la autenticación de usuarios.

• El botón create permite añadir una foto a nuestra base de datos, introduciendo en el prompt un título y una url de una imagen.

• El botón Read All muestra todas las fotos guardadas en nuestra base de datos junto con su título e id

• El botón Clear permite borrar las fotos del DOM. No elimina de la base de datos.

• El botón Find One by Id muestra la foto correspondiente al Id introducido.

• El botón Delete permite borrar la foto especificada de la base de datos.

Formulario de registro guarda un usuario en Firestore y en Authentication.

Formulario de Login permite hacer sign in de un usuario. Muestra la credencial por consola.

Logout realiza el logout del usuario, eliminando la credencial.

Existe un escuchador de eventos para manejar persistencia del login, es decir que el usuario peramenecerá logado aunque se cierre la pestaña hasta que haga logout.

1. Ir a Firebase

2. Crear proyecto en firebase

   • Introducir nombre de tu app i.e. demo
   • Deshabilitar Google Analytics
   • Crear proyecto

3. En el dashboard de Firebase ir a Project Settings

   • En la pestaña General, añadir una dirección de correo en Support Email
   • Hacer scroll para abajo y hacer click en el símbolo </>.
     • Introducir nombre i.e. demo
     • No habilitar Firebase Hosting
     • click en Register app/Registrar app por el momento no necesitamos el código que aparece --> click en Continue to console/Continuar a Consola

1. Ir a la consola de Firebase

   • En la barra lateral click en menú Build
   • Click en Firestore Database
   • Click en Create database/Crear base de datos
   • Seleccionar Start in test mode/Comenzar en modo de prueba
   • Seleccionar la localización del servidor (preferiblemente la localización mas cercana)
   • Enable

2. Reglas de seguridad En la consola de Firestore, pestaña rules pegar lo siguiente

   rules_version = '2';
       service cloud.firestore {
           match /databases/{database}/documents {
               match /{document=**} {
                   allow read, write: if true;
               }
           }
       }
   

1. Ir a la consola de Firebase
   • En la Barra lateral click en el menú Build
   • Click en Authentication
   • Click en get started/Comenzar
   • Seleccionar la forma de autenticación, para nuestro proyecto elegiremos Email/Password
   • Habilitamos Email/Password, dejamos deshabilitado Email link
   • Click Save/Guardar

1. Obtener el objeto de configuración de Firebase de nuestra app

• Ir a la consola de Firebase
• En la barra lateral hacemos click en ⚙️ y seleccionamos Project settings
• En Project settings hacemos scroll hacia abajo hasta la sección Your Apps/Tus aps
• En la sección SDK setup and configuration, hacemos click en config.
• Copiamos el objeto FirebaseConfig

2. En nuestro script.js pegamos nuestro objeto FirebaseConfig en la primera linea.