I followed Auth0’s guide to protect routes but once logged while being redirected to my dashboard I get this error:
This is my codesandbox link with involved files: App
This is App.js:
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Auth from 'layouts/Auth.js'
import "assets/plugins/nucleo/css/nucleo.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/argon-dashboard-react.scss";
import ProtectedRoute from "auth/protected-route.js";
import AdminLayout from "layouts/Admin.js";
import { Loading } from "auth/loading.js";
const App = () => {
const { isLoading } = useAuth0();
if (isLoading) {
return <Loading />;
}
return (
<BrowserRouter h>
<Switch>
<ProtectedRoute path="/admin" render={props => <AdminLayout {...props} />} />
<Route exact path={["/","/prometheusfinancedapp"]} component={Auth} />
</Switch>
</BrowserRouter>
)
};
export default App;
My protected route:
import React from "react";
import { Route } from "react-router-dom";
import { withAuthenticationRequired } from "@auth0/auth0-react";
import Auth from "../layouts/Auth.js";
const ProtectedRoute = ({ component, ...args }) => (
<Route
component={withAuthenticationRequired(component, {
onRedirecting: () => <Auth />,
})}
{...args}
/>
);
export default ProtectedRoute;
I have tried various ways to resolve the error but failed. I hope you can help me.
