Con Firebase Authentication podemos almacenar y administrar el acceso y los permisos de nuestros usuarios sin pagar un solo centavo. En este tutorial vamos a construir una aplicación de ejemplo para implementar los métodos de registro, login y logout con email y password.
No te preocupes si tu negocio o página web son un poco más complicados que este ejemplo. Los pasos a seguir son casi los mismos. Sin embargo, si quieres profundizar muchísimo más y aprender a utilizar todos los servicios de Firebase, puedes tomar el Curso de Firebase para Web 👌🎉.
Comenzamos creando un nuevo proyecto en la Consola de Firebase:
Con el proyecto creado podemos entrar a la sección de autenticación y ubicar la configuración de inicio de sesión:
Esta sección nos permite habilitar o deshabilitar diferentes alternativas para que nuestros usuarios se registren a la aplicación. Podemos usar correo y contraseña, redes sociales como Twitter y Facebook, con mensajes de texto al teléfono, links de autenticación por correo electrónico, entre otras.
Incluso podemos configurar nuestra aplicación para soportar múltiples métodos de registro y darle más comodidades a nuestros usuarios. Por ahora (para no alargar el tutorial), solo vamos a habilitar el registro de usuarios con correo y contraseña.
Después de esto solo nos queda copiar la configuración web de firebase para pegarla más adelante en nuestro archivo HTML:
La base de nuestra aplicación es un archivo HTML con diferentes secciones: un formulario de registro, secciones para guardar la información “privada” de nuestros usuarios (por ahora solo dice “Cargando…”) y algunas etiquetas de <script>
para importar las herramientas de Firebase:
<htmllang="en"><head><metahttp-equiv="Content-Type"content="charset=UTF-8" /><title>Autenticación con Firebase en 5 minutos</<span class="hljs-name">title>
</<span class="hljs-name">head>
<body><h2>Información Privada</<span class="hljs-name">h2>
<divid="loginFormUI"><p>Por favor inicia sesión para acceder a tu información</<span class="hljs-name">p>
<formname="loginForm"><inputtype="email"name="email"placeholder="Correo Electronico"required
/><inputtype="password"name="password"placeholder="Contraseña"required
/><inputtype="radio"name="isLoginOrSignup"id="radioIsLogin"value="isLogin"checked
/><labelfor="radioIsLogin">Entrar a mi cuenta</<span class="hljs-name">label>
<inputtype="radio"name="isLoginOrSignup"id="radioIsSignup"value="isSignup"
/><labelfor="radioIsSignup">Crear cuenta</<span class="hljs-name">label>
<buttonid="btnLogin">Acceder</<span class="hljs-name">button>
</<span class="hljs-name">form>
</<span class="hljs-name">div>
<divid="privateInfo"><pclass="loading">Cargando...</<span class="hljs-name">p>
</<span class="hljs-name">div>
<scriptsrc="https://www.gstatic.com/firebasejs/5.6.0/firebase.js">
<script>
<script/>
// Initialize Firebasevar config = {
apiKey: "API_KEY_FROM_FIREBASE",
authDomain: "AUTH_DOMAIN.firebaseapp.com",
databaseURL: "https://DATABASE_URL.firebaseio.com",
projectId: "PROJET_ID",
storageBucket: "STORAGE_BUCKET.appspot.com",
messagingSenderId: "MESSAGING_SENDER_ID"
};
firebase.initializeApp(config);
<script>
</body>
</html>
Lo más importante por ahora es el formulario. Solo tiene 3 campos: email, contraseña y un input de tipo radio
para elegir entre “Crear una cuenta” o “Entrar a mi cuenta”.
Nuestra tarea es mostrar este formulario cuando los usuarios no han realizado su autenticación y ocultarlo cuando han ingresado o se han registrado con éxito. También debemos añadir un botón para cerrar la sesión y cambiar el texto “Cargando…” por la información real de nuestros usuarios.
Vamos a “escuchar” las acciones de submit de nuestro formulario. Es decir, vamos a programar una función que debe ejecutarse cuando los usuarios hacen click en el botón de “Acceder” para saber cuándo registrar o iniciar la sesión de los usuarios.:
const form = document.forms['loginForm'];
form.addEventListener('submit', functionhandleFormSubmit(event) {
event.preventDefault();
const email = form['email'].value;
const password = form['password'].value;
const isLoginOrSignup = form['isLoginOrSignup'].value;
if (isLoginOrSignup === 'isLogin') {
return loginUser(email, password);
}
return createUser(email, password);
});
Ahora, vamos a programar las funciones createUser
, loginUser
y signoutUser
para guardar la información de nuestros usuarios en la base de datos de Firebase:
functioncreateUser(email, password) {
console.log('Creando el usuario con email ' + email);
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function (user) {
console.log('¡Creamos al usuario!');
})
.catch(function (error) {
console.error(error)
});
}
functionloginUser(email, password) {
console.log('Loging user ' + email);
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function (user) {
console.log('Credenciales correctas, ¡bienvenido!');
})
.catch(function (error) {
console.log(error);
});
}
functionsignoutUser() {
firebase.auth().signOut();
}
¡Listo! Ya podemos probar nuestra aplicación. Cuando creamos un usuario de prueba, la consola del navegador nos muestra la respuesta que esperamos, nos está indicando que el usuario fue creado sin problemas:
Además, podemos visualizar la lista de usuarios creados en nuestra aplicación desde la consola de Firebase:
Ya aprendimos a registrar usuarios en la base de datos de Firebase. Es hora de programar nuestra aplicación para responder de maneras diferentes cuando un usuario está o no autenticado.
Vamos a utilizar el método firebase.auth().onAuthStateChanged()
para ejecutar el código necesario cada vez que el usuario inicie o cierre sesión:
firebase.auth().onAuthStateChanged(functionhandleAuthState(user) {
if (user) {
showPrivateInfo()
returnconsole.log('Habemus user 🎉');
}
showLoginForm()
returnconsole.log('No habemus user 😭');
});
Cuando los usuarios estén autenticados, debemos ocultar el formulario de registro y mostrar la información personalizada para cada usuario, además de un botón para salir o hacer logout.
Para esto, vamos a crear las funciones showPrivateInfo
y showLoginInfo
que se van a encargar de mostrar u ocultar parte de nuestra UI dependiendo del estado de autenticación de cada usuario.
functionshowPrivateInfo(user) {
const loginForm = document.getElementById('loginFormUI');
loginForm.style.display = 'none';
const privateInfo = document.getElementById('privateInfo');
privateInfo.style.display = 'block';
privateInfo.innerHTML = `
Información confidencial
<button id="btnLogout" class="button">Logout</button>
`;
const btnLogout = document.getElementById('btnLogout');
btnLogout.addEventListener('click', signoutUser);
}
functionshowLoginForm() {
const loginForm = document.getElementById('loginFormUI');
loginForm.style.display = 'block';
const privateInfo = document.getElementById('privateInfo');
privateInfo.style.display = 'none';
privateInfo.innerHTML = `
Nada que mostrar, tienes que registrarte
`;
}
Ahora si, nuestra aplicación muestra y oculta la información de los usuarios cuando cambia su estado de autenticación. Podemos configurar los estilos CSS y añadir todas las interacciones que necesiten nuestras aplicaciones (autenticar usuarios con redes sociales, por ejemplo), solo hace falta tu imaginación y un poco de investigación para añadir el resto de código que nos ocurra.
En mi caso, este fue el resultado y puedes ver el demo a continuación: juandc.co/platzi-firebase-auth:
Firebase tiene muchos otros servicios muy interesantes y puedes aprender un poco sobre ellos en este artículo de nuestro profe @jjgomez: Firebase, una plataforma usada por millones de aplicaciones.
Te invito de nuevo a tomar el Curso de Firebase para Web para construir proyectos y aplicaciones increíbles a una velocidad de desarrollo casi inmejorable. ¡#NuncaParesDeAprender!
Muy bueno! justo estoy jugando con firebase. Lo que no vi es la parte de permisos de usuario, solo tienes autenticación y acceso ahí. Gracias Juan!
La funcion
createUserWithEmailAndPassword
Ademas de crear al usuario le hace login de inmediato, existe alguna forma de que esto no pase ¿?