0

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

1 respuesta 1

0

Ya pude encontrar una solución, no sé si es la mejor opcion considerando las opciones que tiene nexjts, pero pude solucionarlo.

En la vista /login en vez de reenviar al / usando router.push con next/navigation:

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  setLoading(true);
  try {
    const tokens = await login({ email, password });
    await getCurrentUserProfile();
    router.push = "/"
    # window.location.href = "/"
  } catch (error) {
    console.error("Error logging in", error);
  } finally {
    setLoading(false);
  }
};

Utilicé window.location.href = "/". Solución nativa de js.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.