React Public and Protected routes with CreateBrowerRouter

Help
,
1

I have both public and private routes. The private routes are not activating the withAuthenticationRequired. I have reviewed all new documentation but unable to get this working appropriately. Thanks

Index.tsx

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <StyledEngineProvider injectFirst>
          <App />
        </StyledEngineProvider>
        <ReactQueryDevtools />
      </QueryClientProvider>
    </ThemeProvider>
  </React.StrictMode>
);

App.tsx

function App() {
return ;
}
export default App;

router.tsx

const ProtectGlyphEditor = withAuthenticationRequired(GlyphCanvas);
const ProtectTemplateView = withAuthenticationRequired(TemplateView);

export const router = createBrowserRouter([
{
element: ,
children: [
{
path: ‘/editor’,
element: ,
},
{
path: ‘/view’,
element: ,
},
{
element: ,
errorElement: ,
children: [
{ path: ‘/’, element: },
{ path: ‘/home’, element: },
{ path: ‘/callback’, element: },
{
path: ‘*’,
element: (


404 Page not found



),
},
],
},
],
},
]);

callback.tsx

export const Callback = () => {
return (


{‘hi’}


);
};


Authorization0ProviderWithNavigation.tsx

interface Auth0ProviderWithNavigateProps {
children?: React.ReactNode;
}

export const Auth0ProviderWithNavigate = ({
children,
}: PropsWithChildren): JSX.Element | null => {
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL;
const navigate = useNavigate();

if (!(domain && clientId && redirectUri)) {
return null;
}

const onRedirectCallback = (appState: any) => {
navigate(appState?.returnTo ?? window.location.pathname);
};

return (
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{
redirect_uri: window.location.origin,
}}
onRedirectCallback={onRedirectCallback}>
{children}


);
};