React SDK withAuthenticationRequired and interstitial login page

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 :smile: