Estoy creando una aplicación React que requiere autenticación para usar una API. Así que mantengo el token de usuario en mi contexto React. Todo funciona bien siempre que el usuario permanezca en la misma sesión pero, por supuesto, cada vez que abro una nueva pestaña o actualizo la actual, se pierde el contexto. Así que creé un componente que almacena el token en localStorage (si hay un token) o recupera dicho token de localStorage.

Pensé que lo había resuelto, pero... no funciona como se esperaba. Cuando abro una nueva pestaña, soy redirigido a la página de inicio de sesión (que se espera cuando no hay token).

Revisé lo que sucede con algunos registros de la consola y:

• cuando inicio sesión en una primera pestaña, el token se guarda en localStorage.
• cuando abro una segunda pestaña, parece que no hay nada almacenado en localStorage.
• pero si vuelvo a guardar mi código DESPUÉS de abrir la segunda etiqueta (para agregar algo inútil), entonces localStorage ya no está vacío y también estoy conectado a la segunda pestaña.

Aquí está mi componente de controlador de tokens (llamado directamente en App.jsx):

 import { useContext, useEffect } from "react"; import { DisplayContext } from "../context/DisplayContext"; export default function TokenHandler() { const { setCurrentUser, userToken, setUserToken, setTokenLimit, setUserRole, } = useContext(DisplayContext); const retrievingToken = () => { let stockDate = new Date(); if (localStorage.getItem("mddTheme") && !userToken) { const stockToken = localStorage.getItem("mddTheme"); if (stockDate.getTime() < stockToken.exp) { setUserToken(localStorage.getItem("mddTheme")); setCurrentUser(stockToken.sub); setTokenLimit(stockToken.exp); setUserRole(stockToken.aud); } else { localStorage.removeItem("mddTheme"); } } console.log( "retrieving token : ", userToken, localStorage.getItem("mddTheme") ); }; const stockingToken = () => { if ( userToken && (!localStorage.getItem("mddTheme") || localStorage.getItem("mddTheme") !== userToken) ) { localStorage.setItem("mddTheme", userToken); } console.log( "stocking token : ", userToken, localStorage.getItem("mddTheme") ); }; useEffect(() => { console.log( "token handler : ", userToken, localStorage.getItem("mddTheme") ); // if (userToken !== "") { stockingToken(); // } else { retrievingToken(); // } }, [userToken]); return <></>; }

¿Alguna idea de por qué una nueva pestaña no puede leer el almacenamiento al abrir?