Hey gang!
Running into an issue with the sdk, where I am trying to configure ProtectedRoutes for my SPA.
// node v14.17.0
import { BrowserRouter, Route, RouteProps, Switch } from 'react-router-dom'; // v5.1.7
import { AppState, Auth0Provider, withAuthenticationRequired } from '@auth0/auth0-react'; // v1.5.0
import './App.css';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Login from '../pages/Login';
import { createBrowserHistory, History } from 'history';
import { ComponentType } from 'react';
const _history = createBrowserHistory();
const ProtectedRoute = ({ component, ...args }: { component: ComponentType<any> } & RouteProps) => (
<Route component={withAuthenticationRequired(component)} {...args} />
);
const onRedirectCallback = (history: History<any>) => (appState: AppState) => {
history.replace(appState?.returnTo || window.location.pathname);
}
function App() {
return (
<BrowserRouter>
<Auth0Provider
domain={process.env.REACT_APP_AUTH0_TENANT || ''} // replace at build-time
clientId={process.env.REACT_APP_AUTH0_KEY || ''} // replace at build-time
redirectUri={`${window.location.origin}`}
onRedirectCallback={onRedirectCallback(_history)}>
<Switch>
<Route path="/page1" component={Page1} />
<Route path="/login" component={Login} />
<ProtectedRoute path="/page2" component={Page2} />
</Switch>
</Auth0Provider>
</BrowserRouter >
);
}
export default App;
When I view page2 in the above example, it immediately takes me to the Auth0 login page, rather than an interstitial /login page that I have configured.
Is there a way for me to redirect to /login – this page requires user input before authenticating? Let me know if I need to give more info and I’ll try as best I can