Esperado: la función asíncrona verifica si el usuario está autenticado, luego devuelve verdadero, para que el componente protegido se represente, o falso, que redirige al usuario a la página de inicio de sesión.
Lo que realmente sucede: la función getAuth() devuelve "Promise", rompiendo el código.
export default function RequireAuth({ children, redirectTo }) { const BASE_API_URL = "https://api-backend.test"; const getAuth = async () => { const isAuth = await axios .get(BASE_API_URL + "/user_auth.php", { withCredentials: true, }) .then((res) => { if (res.status === 201) { return true; } }) .catch((err) => { if (err.response.status === 401) { return false; } }); return isAuth; }; let isAuthenticated = getAuth(); return isAuthenticated ? children : <Navigate to={redirectTo} />; }Así debería mostrarse el componente "protegido" según la documentación oficial aquí .
<Route path="/dashboard" element={ <RequireAuth redirectTo="/login"> <Dashboard /> </RequireAuth> } />Tienes que hacerlo correctamente usando useEffect , prueba esto
export default function RequireAuth({ children, redirectTo }) { const BASE_API_URL = "https://api-backend.test"; const [isAuthenticated, setAuthenticated] = useState(false); useEffect(() => { const getAuth = () => { const isAuth = axios .get(BASE_API_URL + "/user_auth.php", { withCredentials: true }) .then((res) => { if (res.status === 201) { setAuthenticated(true); } }) .catch((err) => { if (err.response.status === 401) { setAuthenticated(false); } }); }; getAuth(); }, [redirectTo]); if (isAuthenticated) { return children; } return <Navigate to={redirectTo} />; }getAuth es una función asíncrona, por lo que devolverá una Promesa. Debe await su salida o usar .then para trabajar con la promesa resuelta.
Nota al margen, por lo general es preferible usar async/await .then o .then , pero no ambos.