Skip to main content
se eliminaron 65 caracteres en el cuerpo
Origen Enlace
import "./globals.css";
import Sidebar from "@/components/sidebar";
import dynamic from "next/dynamic";
import { UserAuthProvider } from "@/context/UserAuthContext";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es">
      <body className={inter.className}>
        {/* <UserProvider> */}
        <div className="flex">
          <UserAuthProvider>
            <div>
              <Sidebar />
            </div>
            <div className="w-full">{children}</div>
          </UserAuthProvider>
        </div>
        {/* </UserProvider> */}
      </body>
    </html>
  );
}

import "./globals.css";
import Sidebar from "@/components/sidebar";
import dynamic from "next/dynamic";
import { UserAuthProvider } from "@/context/UserAuthContext";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es">
      <body className={inter.className}>
        {/* <UserProvider> */}
        <div className="flex">
          <UserAuthProvider>
            <div>
              <Sidebar />
            </div>
            <div className="w-full">{children}</div>
          </UserAuthProvider>
        </div>
        {/* </UserProvider> */}
      </body>
    </html>
  );
}

import "./globals.css";
import Sidebar from "@/components/sidebar";
import dynamic from "next/dynamic";
import { UserAuthProvider } from "@/context/UserAuthContext";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es">
      <body className={inter.className}>
        <div className="flex">
          <UserAuthProvider>
            <div>
              <Sidebar />
            </div>
            <div className="w-full">{children}</div>
          </UserAuthProvider>
        </div>
      </body>
    </html>
  );
}

título editado
Enlace

Problemas al sincronizar estado de autenticación en Layout y Sidebar Next.js con un Provider

Origen Enlace

Problemas al sincronizar estado de autenticación en Layout y Sidebar Next.js

Estoy desarrollando una aplicación en Next.js donde utilizo un Layout general para englobar todos mis componentes, incluido un Sidebar que debe mostrarse solo cuando el usuario está autenticado.

La estructura de mi aplicación es la siguiente:

  • Tengo un UserAuthProvider que maneja la autenticación del usuario, con los estados isAuthenticated, loading, y authInitialized.
  • En mi Layout, incluyo {children} y el componente Sidebar.
  • El Sidebar depende de isAuthenticated y loading para renderizarse, ya que quiero que solo se muestre cuando el usuario esté autenticado.

Al entrar por primera vez en mi app, reenvia a la vista /login donde se gestiona la logica de autenticacion y si es correcta reenvia al home / con los datos del proporcionados

PROBLEMA:

Al renderizar el Layout, el Sidebar no se muestra en la primera carga, ya que el estado loading aún es true y isAuthenticated todavía no está actualizado. Sin embargo, si recargo la página, el Sidebar se muestra correctamente porque los estados ya están en su estado final.

layout.tsx:

import "./globals.css";
import Sidebar from "@/components/sidebar";
import dynamic from "next/dynamic";
import { UserAuthProvider } from "@/context/UserAuthContext";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es">
      <body className={inter.className}>
        {/* <UserProvider> */}
        <div className="flex">
          <UserAuthProvider>
            <div>
              <Sidebar />
            </div>
            <div className="w-full">{children}</div>
          </UserAuthProvider>
        </div>
        {/* </UserProvider> */}
      </body>
    </html>
  );
}

sidebar component:

const Sidebar = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const path = usePathname();
  const { isAuthenticated, loading, userData, authInitialized } = useUserAuth();

  const handleLogout = async (e: any) => {
    e.preventDefault();
    try {
      const exit = await logout();
    } catch (error) {
      console.error("Error logging in", error);
    }
  };

  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };

  if (!authInitialized && loading) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return null;
  }

  return (
    <div className="">
      <div
       .......
      </div>
  );
};

export default Sidebar;


y por utlimo el UserAuthContext.tsx

"use client";

import { createContext, useContext, useState, useEffect } from "react";
import {
  getAccessToken,
  getRefreshToken,
  refreshToken,
  clearLocalStorage,
} from "@/services/authService";
import { useRouter } from "next/navigation";

interface UserAuthContextType {
  isAuthenticated: boolean;
  authInitialized: boolean;
  loading: boolean;
  userData: any;
  setUserData: (user: any) => void;
}

const UserAuthContext = createContext<UserAuthContextType | undefined>(
  undefined
);

export const UserAuthProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [userData, setUserData] = useState<any>(null);
  const [authInitialized, setAuthInitialized] = useState<boolean>(false);
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(true);
  const router = useRouter();

  useEffect(() => {
    const initializeAuth = async () => {
      try {
        const storedData = localStorage.getItem("userData");
        const accessToken = getAccessToken();

        if (storedData) {
          setUserData(JSON.parse(storedData));
        }

        if (accessToken) {
          setIsAuthenticated(true);
        } else if (getRefreshToken()) {
          const newAccessToken = await refreshToken(getRefreshToken()!);
          localStorage.setItem("accessToken", newAccessToken);
          setIsAuthenticated(true);
        } else {
          setIsAuthenticated(false);
          clearLocalStorage();
          router.push("/login");
        }
      } catch (error) {
        setIsAuthenticated(false);
        clearLocalStorage();
        router.push("/login");
      } finally {
        setLoading(false);
      }
      setAuthInitialized(true);
    };

    initializeAuth();
  }, [router]);

  return (
    <UserAuthContext.Provider
      value={{
        isAuthenticated,
        loading,
        userData,
        setUserData,
        authInitialized,
      }}
    >
      {children}
    </UserAuthContext.Provider>
  );
};

export const useUserAuth = () => {
  const context = useContext(UserAuthContext);
  if (!context) {
    throw new Error("useUserAuth must be used within a UserAuthProvider");
  }
  return context;
};

Me imagino que debe ser por la forma en que se esta renderizando el sidebar (ssr o ssg) pero sigo sin entender porque no alcanza a actualizar el estado.

Estoy trabajando con Nexjts version 14. Espero puedan ayudarme