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}>
<div className="flex">
<UserAuthProvider>
<div>
<Sidebar />
</div>
<div className="w-full">{children}</div>
</UserAuthProvider>
</div>
</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