Cómo integrar Firebase Authentication en aplicaciones JavaScript
- ¿Qué es Firebase Authentication?
- Requisitos previos
- Paso 1: Crear un proyecto en Firebase
- Paso 2: Configurar Firebase en tu aplicación JavaScript
- Paso 3: Manejo de la sesión del usuario
- Paso 4: Cerrar sesión
- Conclusión
¿Qué es Firebase Authentication?
Firebase Authentication es un servicio que permite autenticar a los usuarios en aplicaciones mediante varios métodos, como el correo electrónico y contraseña, proveedores de identidad como Google y Facebook, y autenticación anónima. Ofrece un SDK fácil de implementar que gestiona tareas comunes como el registro, el inicio de sesión y la gestión de sesiones.
Entre sus características principales se incluyen:
- Soporte para múltiples proveedores: Google, Facebook, Twitter, GitHub y otros.
- Autenticación con correo electrónico y contraseña.
- Autenticación sin contraseña a través de enlaces mágicos enviados por correo electrónico.
- Autenticación anónima para que los usuarios puedan interactuar con la aplicación antes de registrarse formalmente.
- Gestión sencilla de sesiones y tokens de autenticación.
Requisitos previos
Antes de comenzar, debes cumplir con los siguientes requisitos:
1. Tener una cuenta de Firebase. Puedes crear una gratuitamente desde aquí.
2. Configurar un proyecto en la consola de Firebase.
3. Conocer los fundamentos de JavaScript y HTML.
4. Tener Node.js instalado si planeas ejecutar la aplicación en un servidor local.
Paso 1: Crear un proyecto en Firebase
Primero, dirígete a la Consola de Firebase y crea un nuevo proyecto. Aquí están los pasos básicos:
1. Crear un proyecto: Una vez que inicies sesión, haz clic en "Agregar proyecto", ingresa el nombre y sigue los pasos de configuración inicial.
2. Activar Firebase Authentication: En la pestaña "Authentication" de tu proyecto, habilita los métodos de autenticación que planeas usar (por ejemplo, correo y contraseña o autenticación con Google).
3. Agregar Firebase SDK: Selecciona "Agregar aplicación web" en la consola y sigue las instrucciones para obtener las credenciales y el código de inicialización del SDK.
Paso 2: Configurar Firebase en tu aplicación JavaScript
Después de haber creado el proyecto en Firebase, es momento de integrar Firebase Authentication en tu aplicación. Aquí te mostramos cómo hacerlo.
1. Incluir el SDK de Firebase en tu proyecto
Puedes incluir Firebase en tu proyecto de dos formas: usando un paquete de npm o directamente desde un CDN. A continuación te mostramos ambos métodos:
Opción 1: Usando npm
npm install firebaseEn tu archivo JavaScript, importa Firebase:
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';Opción 2: Usando CDN
Si prefieres usar Firebase a través de un CDN, agrega el siguiente script en el archivo HTML:
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js"></script>2. Inicializar Firebase
Una vez incluido el SDK, necesitas inicializar Firebase usando la configuración de tu proyecto. Esta información la puedes obtener desde la consola de Firebase en la sección "Configuración de tu aplicación".
// Configuración de Firebase obtenida desde la consola
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID"
};
// Inicializar Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);3. Implementar métodos de autenticación
Ahora que Firebase está configurado, puedes implementar los diferentes métodos de autenticación.
Autenticación con correo electrónico y contraseña
Para implementar un sistema básico de autenticación con correo y contraseña, necesitas dos funciones: una para registrar a un usuario y otra para iniciar sesión.
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
// Función para registrar usuarios
function registerUser(email, password) {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Usuario registrado
const user = userCredential.user;
console.log("Usuario registrado:", user);
})
.catch((error) => {
console.error("Error al registrar:", error.message);
});
}
// Función para iniciar sesión
function loginUser(email, password) {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Sesión iniciada
const user = userCredential.user;
console.log("Usuario inició sesión:", user);
})
.catch((error) => {
console.error("Error al iniciar sesión:", error.message);
});
}Autenticación con Google
Para permitir a los usuarios iniciar sesión con Google, primero debes habilitar el proveedor de Google en la consola de Firebase y luego utilizar el siguiente código:
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
// Función para iniciar sesión con Google
function loginWithGoogle() {
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((result) => {
const user = result.user;
console.log("Usuario inició sesión con Google:", user);
})
.catch((error) => {
console.error("Error al iniciar sesión con Google:", error.message);
});
}Paso 3: Manejo de la sesión del usuario
Firebase Authentication proporciona varias formas de gestionar las sesiones de los usuarios. Puedes detectar si un usuario ha iniciado sesión y mantener la sesión activa a través de onAuthStateChanged.
import { onAuthStateChanged } from "firebase/auth";
onAuthStateChanged(auth, (user) => {
if (user) {
console.log("Usuario está autenticado:", user);
} else {
console.log("No hay usuario autenticado");
}
});Paso 4: Cerrar sesión
Para cerrar la sesión de un usuario, simplemente usa la función signOut.
import { signOut } from "firebase/auth";
function logoutUser() {
signOut(auth)
.then(() => {
console.log("Usuario cerró sesión");
})
.catch((error) => {
console.error("Error al cerrar sesión:", error.message);
});
}Conclusión
Integrar Firebase Authentication en aplicaciones JavaScript es una tarea relativamente sencilla gracias a la documentación clara y las bibliotecas bien estructuradas que Firebase ofrece. En este tutorial, cubrimos los pasos fundamentales para configurar un proyecto de Firebase, integrar el SDK de Firebase Authentication, y manejar la autenticación de usuarios mediante distintos métodos, como correo electrónico, contraseña y Google.
Jorge García
Fullstack developer