Estoy usando auth0 para la autenticación en la aplicación de reacción. Mi aplicación es solo un botón que conduciría a la página auth0. Sin embargo, cuando uso <Auth0ProviderWithHistory> no se procesa.

Archivo index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Auth0ProviderWithHistory from './auth0provider'; ReactDOM.render( <React.StrictMode> <Auth0ProviderWithHistory> <App /> </Auth0ProviderWithHistory> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();

Archivo App.js:

 import"./App.css" import React from "react" import Auth0ProviderWithHistory from "./auth0provider" import { useAuth0 } from "@auth0/auth0-react" import Button from '@mui/material/Button'; function App() { const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout, } = useAuth0(); return( <Button variant="contained" onClick={() => loginWithRedirect }>Contained</Button> ) } export default App;

El código fue tomado de https://auth0.com/blog/complete-guide-to-react-user-authentication/ [Página web con error ][1]

archivo auth0provider.js:

 import React from 'react'; import { useNavigate} from 'react-router-dom'; import { Auth0Provider } from '@auth0/auth0-react'; const Auth0ProviderWithHistory = ({ children }) => { const domain = process.env.REACT_APP_AUTH0_DOMAIN; const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID; const history = useNavigate(); const onRedirectCallback = (appState) => { history.push(appState?.returnTo || window.location.pathname); }; return ( <Auth0Provider domain={domain} clientId={clientId} redirectUri={window.location.origin} onRedirectCallback={onRedirectCallback} > {children} </Auth0Provider> ); }; export default Auth0ProviderWithHistory;

Error de consola