Firebase Auth con Javascript en Sitios Web (Tutorial)
La autenticación de usuarios en tiempo real es una parte crucial de cualquier sitio web moderno. Con Firebase Auth y Javascript, podemos implementar fácilmente un sistema de autenticación seguro y confiable en nuestro sitio web. En este tutorial, te mostraremos cómo hacerlo paso a paso.
Paso 1: Configurar Firebase en tu sitio web
Lo primero que debemos hacer es configurar nuestro sitio web para que pueda utilizar Firebase Auth. Para ello, necesitamos incluir el script de Firebase en nuestro HTML:
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-analytics.js"></script>
<script>
// Initialize Firebase
var firebaseConfig = {
apiKey: "TU_API_KEY",
authDomain: "TU_AUTH_DOMAIN",
projectId: "TU_PROJECT_ID",
storageBucket: "TU_STORAGE_BUCKET",
messagingSenderId: "TU_MESSAGING_SENDER_ID",
appId: "TU_APP_ID",
measurementId: "TU_MEASUREMENT_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
Paso 2: Configurar la interfaz de usuario
Una vez que hemos configurado Firebase en nuestro sitio web, necesitamos crear una interfaz de usuario para que los usuarios puedan iniciar sesión, registrarse y cerrar sesión. Utilizando HTML y CSS, podemos crear un formulario de autenticación simple para nuestros usuarios:
<form id="login-form">
<input type="email" id="email" placeholder="Correo electrónico" required>
<input type="password" id="password" placeholder="Contraseña" required>
<button type="submit">Iniciar sesión</button>
</form>
<button id="logout-button">Cerrar sesión</button>
Paso 3: Configurar la lógica de autenticación con Javascript
Una vez que tenemos nuestra interfaz de usuario configurada, necesitamos implementar la lógica de autenticación con Javascript. Para ello, debemos utilizar el SDK de Firebase para JavaScript y definir las acciones que queremos realizar cuando un usuario intenta iniciar sesión, registrarse o cerrar sesión:
var loginForm = document.getElementById('login-form');
var emailInput = document.getElementById('email');
var passwordInput = document.getElementById('password');
var logoutButton = document.getElementById('logout-button');
loginForm.addEventListener('submit', function(event) {
event.preventDefault();
var email = emailInput.value;
var password = passwordInput.value;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(user) {
// Usuario autenticado, redirigir a la página de inicio
window.location.href = '/home';
})
.catch(function(error) {
// Mostrar mensaje de error al usuario
alert('Error al iniciar sesión: ' + error.message);
});
});
logoutButton.addEventListener('click', function() {
firebase.auth().signOut()
.then(function() {
// Usuario cerró sesión exitosamente
})
.catch(function(error) {
// Mostrar mensaje de error al usuario
alert('Error al cerrar sesión: ' + error.message);
});
});
Conclusión
Con Firebase Auth y Javascript, podemos implementar fácilmente un sistema de autenticación en tiempo real en nuestro sitio web. Este tutorial te ha mostrado cómo configurar Firebase, crear una interfaz de usuario y gestionar la lógica de autenticación con Javascript. ¡Esperamos que te haya sido de utilidad!
me funciono super bien con mis formularios de inicio de sesión y registro, muchisimas gracias amigo me salvaste la vida 🙂
podrias hacer un tutorial para cuando tenemos mas de un login y que las cuentas no sean universales, es decir usuario x solo tiene acceso a el login 1
Hola, hubo algun problema con el GitHUb? es que me da un 404
Puedes mostrar como ponerle la verificación de correo, que le llegue un código o un enlace para verificar el correo
no hay forma de que en la url no se vea el nombre del archivo y la ruta?, porque si conoces la url de destino te saltas el login y eso te deja sin seguridad, alguna idea? gracias
esta buenisimo y facil lo unico que falto es el boton cerrar sesion
gracias me salio
muy bueno el tutorial, yo cambiar los alert por simples divs que se muestren o impriman en el DOM
buenisimos los tutoriales de firebase re bien explicado!!, estaria genial si puedieras hacer un mini tutorial de como hiciste tu pagina y tambien como se puede implementar una base de datos!👌👌
Gracias!, si funciona 🤑
Me sirvió , muchas gracias