Estoy creando una autenticación MERN simple, mi backend funciona completamente bien y lo he probado con cartero, da respuestas booleanas cuando verifica si el usuario ha iniciado sesión.

A continuación se muestra el enrutador para verificar el usuario que inició sesión y enviar los valores booleanos a la interfaz.

 router.get("/loggedIn", (req, res) => { try { const token = req.cookies.token; if (!token) return res.json(false); jwt.verify(token, process.env.JWT_SECRET); res.send(true); } catch (err) { res.json(false); } });

En React, estoy usando Context Hook para obtener esa respuesta usando Axios.

 import React, { useState, useEffect, createContext } from "react"; import Axios from "axios"; const AuthContext = createContext(); function AuthContextProvider(props) { const [loggedIn, setLoggedIn] = useState(undefined); const getLoggedIn = async () => { await Axios.get("http://localhost:5000/auth/loggedIn") .then((res) => setLoggedIn(res.data)) .catch((err) => console.log(err)); }; useEffect(() => { getLoggedIn(); }, []); return ( <AuthContext.Provider value={{ loggedIn, getLoggedIn }}> {props.children} </AuthContext.Provider> ); } export default AuthContext; export { AuthContextProvider };

Estoy usando el inicio de loggedIn para renderizar condicionalmente algunos componentes, pero el valor o el estado siempre permanece false , si cambio el estado de las herramientas de desarrollo, el renderizado condicional funciona bien.

implementación de AuthContext de autenticación,

 const { loggedIn } = useContext(AuthContext); {loggedIn === false && ( <Link className="nav-link" to="/login"> <FaUser /> </Link> )} {loggedIn === true && ( <Link className="nav-link" to="/logout"> <Button variant="outline-dark">Logout</Button> </Link> )}

Como puede ver, solo quiero renderizar condicionalmente un componente, pero siempre devuelve false

Soy nuevo en ContextHook.