Importar y exportar usuarios de Firebase

Clase 13 de 32 • Curso de Firebase 5 para Web

Resumen

La autenticación en Firebase no te ata. La data es tuya y puedes exportar e importar usuarios con Firebase Tools sin perder control. Con comandos simples defines algoritmos de hash, usas salt y eliges JSON o CSV, todo sin exponer contraseñas. Además, se propone un reto práctico de recordar contraseña para llevarlo a producción con confianza.

¿Cómo exportar e importar usuarios en Firebase con Firebase Tools?

Instala Firebase Tools como paquete de Node con npm. Suele hacerse cuando se despliega al hosting. Una vez instalado, obtienes comandos para mover tus usuarios entre Firebase y otras bases de datos.

Descarga el archivo de la cuenta con las credenciales desde la consola de administración.
Para importar, usa el comando de autenticación y señala el archivo de credenciales.
Declara el algoritmo de hash, la llave del hash y el separador del salt durante la importación.
Para exportar, ejecuta el comando equivalente de autenticación y define si quieres un archivo CSV o un JSON.
Aprovecha opciones de importación según necesidades de rapidez o volumen.

firebase auth:import
firebase auth:export

¿Qué formatos y datos se manejan al exportar o importar?

Puedes trabajar con JSON y también con CSV. En JSON se describe cada usuario y se incluyen campos clave. Al exportar obtienes esa estructura. Al importar, proporcionas la misma forma de datos.

Email del usuario.
Indicador de si el email fue verificado.
Hash del password.
Salt utilizado.

La contraseña nunca está en texto plano. El password se representa por la unión del hash y el salt, lo que mantiene la confidencialidad incluso fuera de Firebase.

¿Cómo protege Firebase los passwords durante la migración?

Firebase sigue buenas prácticas de almacenamiento de contraseñas. No guarda texto plano. Guarda un hash más un salt que convierte cada password en una cadena única. Al importar, defines cómo interpretar esas credenciales para que el proceso sea seguro y compatible.

Hash del password combinado con un salt único.
Algoritmo de hash especificado al importar.
Llave del hash y separador del salt para una lectura correcta.

Este enfoque evita exponer contraseñas y te permite mover usuarios entre sistemas manteniendo la integridad.

¿Qué reto práctico debes implementar de recordar contraseña?

Se propone añadir la funcionalidad de recordar contraseña en la aplicación web. Es una tarea directa que potencia la experiencia del usuario y aprovecha el servicio de autenticación.

Crea un formulario que pida el email.
Agrega un botón de recordar que envíe un correo con el enlace para cambiar la contraseña.
Personaliza la plantilla de recordación de contraseña en la consola de Firebase.
Así podrás usar un servicio escalable y robusto sin perder control de tus datos.

Próximamente se hablará de Firestorm, la base de datos no SQL de Firebase. ¿Qué dudas tienes o qué parte te gustaría profundizar? Comparte en los comentarios.

Jose David Ocaña Ballester

student•

Envía un correo electrónico de restablecimiento de la contraseña

resetPasswordByEmail(email) {
    if (email) {
      const auth = firebase.auth();

      const configuracion = {
        url: "http://localhost:3000/"
      };

      auth
        .sendPasswordResetEmail(email, configuracion)
        .then(result => {
          console.log(result);
          Materialize.toast(
            `Se ha enviado un correo para reestablecer la contraseña`,
            4000
          );

          $(".modal").modal("close");
        })
        .catch(error => {
          console.log(error);
          Materialize.toast(error.message, 4000);
        });
    } else {
      Materialize.toast(`Por favor ingrese su correo`, 4000);
    }
  }

Documentación de Firebase

Juan Castro

teacher•

Notas de la clase:

Podemos importar y exportar la data de nuestros usuarios en archivos JSON y CVS (información separada por comas) 👍 🕹
Necesitamos instalar las firebase-tools para realizar estos procedimientos 🆗 📦
Firebase sigue las mejores prácticas y reglas de seguridad para almacenar las contraseñas 👌 🎉
El comando para importar datos desde Firebase es: firebase auth:import 👈
El comando para export los datos de Firebase es: firebase export 👈

Alexander Orellana Manayalle

student•

Existe luego un ejemplo real de exportación de usuarios bajo linea de comandos?

Juan Castro

teacher•

@alexanderorellanam Sí. Cuando queremos migrar los datos de los usuarios a otra base de datos.

Albert Jiménez

student•

Eso si deja en claro que firebase es un monstruo ya que no te amarra con cosas como retener tus usuarios.

Erick Daniel Pérez Mata

student•

Mi solucion: Index.html

<div class="div-btnInicioSesion">
                            <a id="btnRecordarPassword" class="btn waves-effect waves-light">Recordar Password<i class="material-icons right">send</i></a>
                        </div>

Autenticacion.js (codigo tomado del compañero @Josedavid92):

resetPasswordByEmail(email) {
    if (email) {
      const auth = firebase.auth();

      const configuracion = {
        url: "http://localhost:3000/"
      };

      auth
        .sendPasswordResetEmail(email, configuracion)
        .then(result => {
          console.log(result);
          Materialize.toast(
            `Se ha enviado un correo para reestablecer la contraseña`,
            4000
          );

          $(".modal").modal("close");
        })
        .catch(error => {
          console.log(error);
          Materialize.toast(error.message, 4000);
        });
    } else {
      Materialize.toast(`Por favor ingrese su correo`, 4000);
    }
  }

authController.js

$("#btnRecordarPassword").click(() => {
        const email = $('#emailSesion').val();
        const auth = new Autenticacion();
        auth.resetPasswordByEmail(email);
    });

Edwin Rebolledo

student•

El trafico que se genera durante el desarrollo hacia firebase (desde localhost) se cuenta en la cuota del servicio que es gratuito? es decir ese trafico se rebaja de la cuota mensual gratis?

Henry Yerry Bravo Sánchez

student•

buena pregunta :o

Diana Paola castañeda talero

student•

Creería que si, ya que firebase no mira si es en localhost o no, simplemente ya estás haciendo uso de las herramientas y van sumando.

Alejandro González Reyes

student•

El código funciona correctamente, pero envia tres correos (cuando debería emitir solo uno) a pesar que solo se presiona 1 vez el boton

recuperarPasswordEmail (email) {
    // Verificar si se ha indicado un email para proceder a restablecer la contraseña
    if(email) {
      console.log(email);
      // Le indicamos la URL a la que debe redireccionar si el proceso es correcto    
      const configuracion = {
        url: 'http://localhost:3000/'
      }
      // El metodo sendPasswordResetEmail se encarga de reestableer la contraseña para el email indicado
      firebase.auth().sendPasswordResetEmail(email, configuracion)
        .then(() => {
          // Si la promesa se resuelve, significa que se haenviado el email para restablecer el password
          //console.log(result)
          Materialize.toast(`Se ha enviado un correo para reestablecer la contraseña`, 4000)
          // En esta sección debemos cerrar el modal del formularo de restablecer conraseña
          $('.modal').modal('close')
        })
        .catch(error => {
          // Si la promesa es rechazada, algo paso
          console.log(error)
          Materialize.toast(`Un error a sucedo al enviar el correo de reestablecimiento de contraseña ${error}`, 4000)
          $('.modal').modal('close')
        })
    } else {
      // Esto sucede a consecuencia de no indicar email para reestablecer la contraseña
      Materialize.toast(`Favor de ingresar un correo electrónico`)
      $('.modal').modal('close')
    }
  }

Daniel Esteves

student•

¡Hola! ¿Podrías verificar si tu código es el mismo con el del profesor?

Leticia Vargas

student•

Tengo el mismo error, ¿cómo lo solucionaste?

Boris Vargas Paucara

student•

autenticacion.js

recoveryPassword (email) {
    firebase.auth().sendPasswordResetEmail(email)
    .then(result => {
      Materialize.toast(`Correo de recuperación de contraseña enviado`, 5000);
    }).catch(error => { 
      console.log('Error', error);
      Materialize.toast(`Error no existe el correo: ${error} `, 4000);
    });
  }

authController.js

$("#btnSendEmailRecovery").click(() =>{
        const email = $('#emailRecovery').val()
        const auth = new Autenticacion()
        auth.recoveryPassword(email)
    })

index.html

<div>
        <h5>Recuperar contraseña</h5>
        <div class="input-field">                            
            <input id="emailRecovery" type="email" required/>
            <label for="emailRecovery">E-mail:</label>
        </div>
        <a id="btnSendEmailRecovery" class="btn waves-effect waves-light">Recuperar contraseña</a>                        
    </div>

Leonardo Daniel Benitez Cuenca

student•

changePasswordEmail(email) {
    if (email) {
      const configuracion = {
        url: 'http://localhost/blogeek-platzi/public/'
      }
      firebase.auth().sendPasswordResetEmail(email, configuracion).then((result) =&gt; {
        $('.modal').modal('close')
        Materialize.toast(`Se ha enviado un correo para restablecer tu contraseña`, 4000)
      }).catch(error =&gt; {
        console.log(error)
        Materialize.toast(`No se pudo enviar el correo de restablecer contraseña`, 4000)
      })
    } else {
      Materialize.toast(`Digite su correo electrónico`, 4000)
    }
  }

Sebastián Buitrago

student•

index.html

	<div class="lbl-ingresar-redes">
            <span id="btnRecordarContraseña">Olvidaste tu 			 
             contraseña</span>
        </div>

authControler.js

	$("#btnRecordarContraseña").click(() => {
		const email = $("#emailSesion").val()
		const auth = new Autenticacion()
		auth.resetPassword(email)
	})

autenticacion.js

	resetPassword(email) {
		if (email) {
			const config = {
				url: "http ://localhost:3000/",
			}
			firebase
				.auth()
				.sendPasswordResetEmail(email, config)
				.then(() => {
					$(".modal").modal("close")
					Materialize.toast(
						`Tu correo de recuperacion de contraseña ha sido enviado`,
						4000
					)
				})
		} else {
			Materialize.toast(
				`Por favor ingrese un correo válido`,
				4000
			)
		}
	}

Maided Guadalupe Hernández Ponce

student•

Esta es la función que yo implementé:

  authForgottenPassword(email) {
    const actionCodeSettings = {
      url: ''
    }
    firebase.auth().sendPasswordResetEmail(email, actionCodeSettings)
      .then(function() {
        Materialize.toast(`Hemos enviado un correo electrónico para restablecer la contraseña`, 4000);
      })
      .catch(function(error) {
        Materialize.toast(`${error}: Error al reestablecer contraseña`, 4000);
      });
  }

Jorge Bou-saad

student•

He aqui mi commit del reto en mi practica de nextjs con este curso

https://github.com/jlbousing/nextjs-firebase-practica/commit/7c7af15e357d521bd3dac7aa0a1bd6b57997b36d

Sebastián Buitrago

student•

Pueden usar este link para conocer los metodos que pueden usar con la funcion auth()

Wilson Marino Pablo Mendez

student•

Buenisimo reto ✔

Angel David Castiblanco Sepulveda

student•

El reto de la clase se reduce en estos codigos: NOTA: Deben crear su HTML correspondiente al codigo que llaman en javascript

// autenticacion.js
RecoveryPassword (email) {
    firebase.auth().sendPasswordResetEmail(email)
  }

// authController.js
    $("#btnSendEmailRecovery").click(() =>{
        const email = $('#emailRecovery').val()
        const auth = new Autenticacion()
        auth.RecoveryPassword(email)
    })

Angel Bulnes

student•

Reto finalizado:

index.html

 <div class="col s12 m6 registro-formulario">
       <div class="input-field">
              <input id="emailRecuperacion" type="text"  maxlength="50" data-length="50" required />
                    <label for="emailRecuperación">Email</label>
       </div>
       <div class="div-btnInicioSesion">
               <a id="btnRecuperarContrasenia" class="btn waves-effect waves-light">Enviar correo<i class="material-icons left">account_box</i></a>
        </div>                        
 </div>

general.js

$("#btnRecuperar").click(()=>{
    $("#modalRecuperar").modal("open");
  })

authController.js

 $("#btnRecuperarContrasenia").click(() => {
    const email = $("#emailRecuperacion").val();
    objAuth.recoverPass(email);
  });

autenticacion.js

recoverPass(email) {
    if (email) {
      firebase
        .auth()
        .sendPasswordResetEmail(email)
        .then((result) => {
          Materialize.toast(
            `Se envió un correo para restablacer tu contraseña, verificalo `,
            4000
          );
          $(".modal").modal("close");
        })
        .catch((error) => {
          Materialize.toast(
            `Error al enviar el correo de recuperación  ${error} `,
            4000
          );
        });
    }
  }

Francisco Javier Saavedra Alcala

student•

Alguien sabe si Firebase puede hacer uso de los datos si uno elige no continuar con sus servicios gratuitos?🤨

Francisco Imanol Suarez

student•

Hola Javier, como estas?

Puntualmente eso no te puedo responder, pero lo mas seguro es que sea que no, lo que si te puedo decir por si te sirve, es que pasado cierto tiempo si no usas la base de datos esta misma se desactiva por no tener trafico/uso.

Saludos espero que te sirva lo poco aportado ! 👋

Francisco Javier Saavedra Alcala

student•

Oh gran dato Fsuarez !, muchas gracias por compartirlo lo tomaré bien en cuenta 👍🏼

Carlos Eduardo Gomez García

teacher•

Usualmente cuando trabajas de datos lo más común es importarlos como archivos .sql o .csv, aunque igual si son bases de datos no relacionales suele ser mas común usar JSON, así que depende muchod el tipo de base de datos que uses

resetPasswordByEmail(email) {
    if (email) {
      const auth = firebase.auth();

      const configuracion = {
        url: "http://localhost:3000/"
      };

      auth
        .sendPasswordResetEmail(email, configuracion)
        .then(result => {
          console.log(result);
          Materialize.toast(
            `Se ha enviado un correo para reestablecer la contraseña`,
            4000
          );

          $(".modal").modal("close");
        })
        .catch(error => {
          console.log(error);
          Materialize.toast(error.message, 4000);
        });
    } else {
      Materialize.toast(`Por favor ingrese su correo`, 4000);
    }
  }

<div class="div-btnInicioSesion">
                            <a id="btnRecordarPassword" class="btn waves-effect waves-light">Recordar Password<i class="material-icons right">send</i></a>
                        </div>

resetPasswordByEmail(email) {
    if (email) {
      const auth = firebase.auth();

      const configuracion = {
        url: "http://localhost:3000/"
      };

      auth
        .sendPasswordResetEmail(email, configuracion)
        .then(result => {
          console.log(result);
          Materialize.toast(
            `Se ha enviado un correo para reestablecer la contraseña`,
            4000
          );

          $(".modal").modal("close");
        })
        .catch(error => {
          console.log(error);
          Materialize.toast(error.message, 4000);
        });
    } else {
      Materialize.toast(`Por favor ingrese su correo`, 4000);
    }
  }

recuperarPasswordEmail (email) {
    // Verificar si se ha indicado un email para proceder a restablecer la contraseña
    if(email) {
      console.log(email);
      // Le indicamos la URL a la que debe redireccionar si el proceso es correcto    
      const configuracion = {
        url: 'http://localhost:3000/'
      }
      // El metodo sendPasswordResetEmail se encarga de reestableer la contraseña para el email indicado
      firebase.auth().sendPasswordResetEmail(email, configuracion)
        .then(() => {
          // Si la promesa se resuelve, significa que se haenviado el email para restablecer el password
          //console.log(result)
          Materialize.toast(`Se ha enviado un correo para reestablecer la contraseña`, 4000)
          // En esta sección debemos cerrar el modal del formularo de restablecer conraseña
          $('.modal').modal('close')
        })
        .catch(error => {
          // Si la promesa es rechazada, algo paso
          console.log(error)
          Materialize.toast(`Un error a sucedo al enviar el correo de reestablecimiento de contraseña ${error}`, 4000)
          $('.modal').modal('close')
        })
    } else {
      // Esto sucede a consecuencia de no indicar email para reestablecer la contraseña
      Materialize.toast(`Favor de ingresar un correo electrónico`)
      $('.modal').modal('close')
    }
  }

recoveryPassword (email) {
    firebase.auth().sendPasswordResetEmail(email)
    .then(result => {
      Materialize.toast(`Correo de recuperación de contraseña enviado`, 5000);
    }).catch(error => { 
      console.log('Error', error);
      Materialize.toast(`Error no existe el correo: ${error} `, 4000);
    });
  }

<div>
        <h5>Recuperar contraseña</h5>
        <div class="input-field">                            
            <input id="emailRecovery" type="email" required/>
            <label for="emailRecovery">E-mail:</label>
        </div>
        <a id="btnSendEmailRecovery" class="btn waves-effect waves-light">Recuperar contraseña</a>                        
    </div>

changePasswordEmail(email) {
    if (email) {
      const configuracion = {
        url: 'http://localhost/blogeek-platzi/public/'
      }
      firebase.auth().sendPasswordResetEmail(email, configuracion).then((result) =&gt; {
        $('.modal').modal('close')
        Materialize.toast(`Se ha enviado un correo para restablecer tu contraseña`, 4000)
      }).catch(error =&gt; {
        console.log(error)
        Materialize.toast(`No se pudo enviar el correo de restablecer contraseña`, 4000)
      })
    } else {
      Materialize.toast(`Digite su correo electrónico`, 4000)
    }
  }

	resetPassword(email) {
		if (email) {
			const config = {
				url: "http ://localhost:3000/",
			}
			firebase
				.auth()
				.sendPasswordResetEmail(email, config)
				.then(() => {
					$(".modal").modal("close")
					Materialize.toast(
						`Tu correo de recuperacion de contraseña ha sido enviado`,
						4000
					)
				})
		} else {
			Materialize.toast(
				`Por favor ingrese un correo válido`,
				4000
			)
		}
	}

  authForgottenPassword(email) {
    const actionCodeSettings = {
      url: ''
    }
    firebase.auth().sendPasswordResetEmail(email, actionCodeSettings)
      .then(function() {
        Materialize.toast(`Hemos enviado un correo electrónico para restablecer la contraseña`, 4000);
      })
      .catch(function(error) {
        Materialize.toast(`${error}: Error al reestablecer contraseña`, 4000);
      });
  }

// autenticacion.js
RecoveryPassword (email) {
    firebase.auth().sendPasswordResetEmail(email)
  }

// authController.js
    $("#btnSendEmailRecovery").click(() =>{
        const email = $('#emailRecovery').val()
        const auth = new Autenticacion()
        auth.RecoveryPassword(email)
    })

 <div class="col s12 m6 registro-formulario">
       <div class="input-field">
              <input id="emailRecuperacion" type="text"  maxlength="50" data-length="50" required />
                    <label for="emailRecuperación">Email</label>
       </div>
       <div class="div-btnInicioSesion">
               <a id="btnRecuperarContrasenia" class="btn waves-effect waves-light">Enviar correo<i class="material-icons left">account_box</i></a>
        </div>                        
 </div>

recoverPass(email) {
    if (email) {
      firebase
        .auth()
        .sendPasswordResetEmail(email)
        .then((result) => {
          Materialize.toast(
            `Se envió un correo para restablacer tu contraseña, verificalo `,
            4000
          );
          $(".modal").modal("close");
        })
        .catch((error) => {
          Materialize.toast(
            `Error al enviar el correo de recuperación  ${error} `,
            4000
          );
        });
    }
  }

Importar y exportar usuarios de Firebase

Bienvenida e Introducción

Firebase web: blog completo paso a paso

Qué es Firebase y para qué sirve

Creación y gestión de un videoblog con Firebase

Consola Web de Administración

Configuración de Firebase en Proyectos Web y Móviles

Configuración de Firebase en Proyecto Web con JavaScript

Autenticación de Usuarios

Servicios de autenticación de Firebase

Crear usuarios con Firebase Authentication

Autenticación de Usuarios con Firebase: Registro y Verificación de Email

Autenticación con Google usando Firebase en aplicaciones web

Login con Facebook en Firebase

Gestión de Autenticación de Usuarios con Firebase

Gestión de usuarios en consola Firebase