October 11, 2023

Contexto y Autenticación de Firebase con TypeScript y NextJS.

toscadev

@ ToscaDevsJS

Firebase proporciona una solución fácil y segura para la autenticación de usuarios en tus aplicaciones web.

Crearemos un contexto de usuario y un hook personalizado para acceder a la información del usuario y permitir que los usuarios inicien sesión con Google y cierren sesión.

1 - CÓDIGO COMPLETO - context/authContext.tsx

Nota: Añadimos la carpeta context en la raiz del proyecto y dentro un archivo authContext.tsx


"use client";
import React, { createContext, useContext } from "react";
import { User } from "firebase/auth"; // interface firebase
import { useAuth } from "@/hooks/useAuthFirebase";

interface UserContextType {
  user: User | null;
  googleSignIn: () => void;
  logOut: () => void;
  error?: string | null;
}

export const UserContext = createContext<UserContextType | null>(null);

const UserProvider = ({ children }: { children: React.ReactNode }) => {
  const { error, googleSignIn, logOut, user } = useAuth();

  return (
    <UserContext.Provider value={{ user, googleSignIn, logOut }}>
      {children}
    </UserContext.Provider>
  );
};
export default UserProvider;

// Hook para acceder al contexto más validar que exista el contexto
export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error(
      "No hay proveedor de autenticación, el <userProvider> no está envolviendo el componente."
    );
  }
  return context;
};

2 - Creación de un Hook personalizado para la separación de la lógica de autenticación:

Los hooks personalizados pueden mejorar la legibilidad y la organización de tu código, especialmente si estás utilizando muchas funciones relacionadas con React en tu lógica de autenticación.

CÓDIGO COMPLETO - hooks/useAuthFirebase.tsx


import { useEffect, useState } from "react";
import {
  signInWithPopup,
  GoogleAuthProvider,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import { auth } from "@/context/firebase-config";
import { User } from "firebase/auth";

export const useAuth = () => {
  const [user, setUser] = useState<User | null>(null);
  const [error, setError] = useState(null);

  const googleSignIn = async () => {
    try {
      const provider = new GoogleAuthProvider();
      await signInWithPopup(auth, provider);
    } catch (error: any) {
      setError(error.message);
    }
  };

  const logOut = async () => {
    try {
      await signOut(auth);
    } catch (error: any) {
      setError(error.message);
    }
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    console.log("useEffect user autehntication");
    return () => unsubscribe();
  }, []);

  // ... otras funciones de autenticación ...
  console.log("user", user);

  return { user, error, googleSignIn, logOut };
};

CÓDIGO COMPLETO COMPONENTE - App/login/page.tsx

"use client";

//importar hooks personalizados de autenticación
import { useUser } from "@/context/authContext";

const PageLogin = () => {
  const { user, googleSignIn, logOut } = useUser(); // hook personalizado user

  return (
    <>
      <h1 className="text-center font-bold text-5xl p-5">LOGIN</h1>
        <button
          className="w-full mt-9 px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600"
          onClick={() => googleSignIn()}
        >
          Iniciar con Google
        </button>
        <button onClick={() => logOut()}>cerrar sesión</button>
        <div>{user?.email}</div>
      </div>
    </>
  );
};

export default PageLogin;

CONFIGURACIÓN DEL PROYECTO Y NOTAS DEL DESARROLLADOR

Antes de comenzar, asegúrate de que tu proyecto de ReactJS ya esté configurado para usar Firebase. Puedes seguir la documentación oficial de Firebase para obtener instrucciones detalladas sobre cómo configurar Firebase en tu aplicación.

Instalación firebase dependencias:

npm install firebase

Creación del Contexto de Usuario

En el código proporcionado, estamos creando un contexto de usuario (UserContext) utilizando la función createContext de React.

Este contexto contendrá la información del usuario y las funciones para iniciar sesión y cerrar sesión.

import React, { createContext, useContext } from "react";
import { User } from "firebase/auth";
import { useAuth } from "@/hooks/useAuthFirebase";

interface UserContextType {
  user: User | null;
  googleSignIn: () => void;
  logOut: () => void;
  error?: string | null;
}

export const UserContext = createContext<UserContextType | null>(null);

Proveedor de Usuario

El componente UserProvider es responsable de proporcionar el contexto de usuario a los componentes de la aplicación.

Recibe los valores de usuario, funciones de inicio de sesión y cierre de sesión del hook useAuth, que deben estar definidos en tu aplicación.


const UserProvider = ({ children }: { children: React.ReactNode }) => {

  // useAuth() es el hook donde se encuentra la lógica de autenticación
  const { error, googleSignIn, logOut, user } = useAuth();

  return (
    <UserContext.Provider value={{ user, googleSignIn, logOut }}>
      {children}
    </UserContext.Provider>
  );
};
export default UserProvider;

Mini Hook Personalizado para Acceder al Contexto de Usuario

El hook useUser permite a los componentes de la aplicación acceder al contexto de usuario de manera sencilla y segura.

Si el contexto no está disponible, se lanza un error para asegurarse de que el componente esté envuelto por UserProvider.


// Hook para acceder al contexto más validar que exista el contexto
export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error(
      "No hay proveedor de autenticación, el <UserProvider> no está envolviendo el componente."
    );
  }
  return context;
};

Si te gusto esta guía no dudes en compartirla o sugerir tu opinión. ❤️

Regresar al Blog.