logo studio roma
EN / ES

Back to Blog

Autenticación con Firebase

Pablo Romera foto

Pablo Romera 

/

 February 19, 2024 / 6 min read

Pablo Romera foto

Autenticación Fácil con Firebase

Descubre cómo la autenticación con Firebase puede revolucionar el proceso de diseño y desarrollo web, asegurando una experiencia de inicio de sesión sin fisuras, segura y amigable para el usuario.

Tanto si eres un desarrollador experimentado como si eres nuevo en el ámbito, esta guía te conducirá a través de los fundamentos de la Autenticación Fácil con Firebase, destacando sus beneficios para el diseño y desarrollo web empresarial.


Información General

En su esencia, la Autenticación Firebase provee un sistema de autenticación altamente seguro, fácil de usar y versátil. Soporta autenticación usando contraseñas, números de teléfono, proveedores de identidad federados populares como Google, Facebook y Twitter, y más. Esta flexibilidad permite a los desarrolladores personalizar la experiencia de autenticación según las necesidades de sus usuarios, haciéndola una opción perfecta para proyectos de diseño y desarrollo web empresarial.

¿Cómo Funciona la Autenticación Firebase?

La Autenticación Firebase opera gestionando datos de usuario de manera segura en el backend, mientras proporciona componentes front-end personalizables para diversos métodos de autenticación. Cuando un usuario inicia sesión, la Autenticación Firebase verifica sus credenciales y devuelve un token, que luego puede usarse para acceder de forma segura a otros servicios o lógica de backend personalizada.

Bases de Datos

Firebase ofrece dos bases de datos de documentos basadas en la nube y accesibles para el cliente.

  • Cloud Firestore  es la base de datos de documentos JSON de grado empresarial recomendada, confiada por más de 250,000 desarrolladores. Es adecuada para aplicaciones con modelos de datos ricos que requieren capacidad de consulta, escalabilidad y alta disponibilidad. También ofrece sincronización de baja latencia con el cliente y acceso a datos sin conexión.
  • Realtime Database es la clásica base de datos JSON de Firebase. Es adecuada para aplicaciones con modelos de datos simples que requieren búsquedas sencillas y sincronización de baja latencia con escalabilidad limitada.

Utilizaremos Cloud Firestore, pero si deseas leer más sobre ventajas y desventajas puedes consultar la documentación: https://firebase.google.com/docs/database/rtdb-vs-firestore?hl=es

Primeros Pasos: Configurando Firebase

  • Visita https://console.firebase.google.com
  • Inicia sesión o regístrate en Firebase.
  • Haz clic en Empezar y luego en Agregar proyecto para configurar un nuevo proyecto.
  • Desactiva la funcionalidad de Google Analytics en la siguiente página si no es necesaria.
  • Haz clic en el icono </> para construir el sistema de inicio de sesión para una aplicación web y agrégale un nombre.
  • Haz clic en el botón Registrar app.
  • Agrega el producto de Autenticación a tu aplicación web.
  • Agrega y habilita tu método de acceso de Google.

Pasos Siguientes: Inicialización de Cloud Firestore

Lo importante es lo primero. Instala Firebase en tu proyecto:

npm install firebase

Después, crea una carpeta llamada firebase con un archivo firebaseConfig.js en ella para inicializar nuestra instancia de Cloud Firestore. components/firebase/firebaseConfig.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
		...
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
export { db };

Podemos verificar si ya se inicializó alguna otra aplicación:

import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
		...
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];

const db = getFirestore(app);
export { db };

Tras crear nuestro proyecto en la plataforma web de Firebase, podemos configurar el SDK y obtener la información de configuración de Firebase. Guarda esta información en un archivo .env y luego pásala a nuestro archivo firebaseConfig.js. En el caso de un proyecto Next.js, utilizamos NEXTPUBLIC, pero dependiendo del stack tecnológico empleado, podrías necesitar usar REACTAPP o VITE_.

import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];

const db = getFirestore(app);
export { db };

Últimos Pasos: Autenticación Firebase

Ya que queremos iniciar sesión en nuestra aplicación web, es momento de empezar con la Autenticación Firebase.

components/firebase/firebaseConfig.js

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
		...
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];

const db = getFirestore(app);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);
export { auth, db };

Configura el contexto de autenticación para leer y suscribirte a los datos de autenticación desde tu componente.

import { createContext, useState, useEffect, useContext } from "react";
import {
  signInWithPopup,
  GoogleAuthProvider,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import { auth } from "@/firebase/firebaseConfig";

export const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const handleLogin = async () => {
    const provider = new GoogleAuthProvider();
    try {
      const result = await signInWithPopup(auth, provider);
      setUser(result.user);
    } catch (error) {
      const errorCredential = GoogleAuthProvider.credentialFromError(error);
      console.log("errorCredential: ", errorCredential);
      // ...
    }
  };

  const handleLogout = () => {
    signOut(auth);
    setUser(null);
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <AuthContext.Provider value={{ handleLogin, handleLogout, user }}>
      {children}
    </AuthContext.Provider>
  );
};

export const UserAuth = () => {
  return useContext(AuthContext);
};

Agrega los botones de inicio y cierre de sesión:

import React, { useContext, useEffect } from "react";
import Link from "next/link";

import { AuthContext } from "@/components/context/AuthContext";

import styles from "@/styles/Header.module.scss";

const Header = () => {
  const { handleLogin, handleLogout, user } = useContext(AuthContext);

  const handleAuth = () => {
    handleLogin();
  };

  const cancelAuth = () => {
    handleLogout();
  };

  return (
    <>
      <div className={styles.header}>
        <div className={styles.header__auth}>
          {!user && (
            <button
              onClick={handleAuth}
              className={styles["header__auth-loginBttn"]}
            >
              Log in
            </button>
          )}
          {user && (
            <Link
              href="/"
              onClick={cancelAuth}
              className={styles["header__auth-logoutBttn"]}
            >
              Log out
            </Link>
          )}
        </div>
      </div>
    </>
  );
};

export default Header;

Conclusion

Firebase Authentication offers a robust and flexible solution for managing authentication in web applications. With its wide range of authentication methods and ease of integration into existing projects, Firebase stands out as an invaluable tool for developers looking to implement a secure and customized authentication system. Additionally, the integration of Cloud Firestore for real-time data management extends the capabilities of applications, allowing for richer and more reactive user experiences. By following the steps provided in this guide, you will be well on your way to leveraging the full functionalities that Firebase has to offer, thereby enhancing security and user experience in your web projects.