Implementing Auth0 Protected Routes using React Router v6...?

Get Help
, ,
3

Hey Rob,

In my team we recently ran into this problem and our strategy goes something like this:

const App => 
  <Routes>
    <Route path="some-path" element={<ProtectedComponent component={SomePrivateView} aProps={prop1} anotherProp={prop2} />} />
    ...more routes
  </Routes>

SomePrivateView is the component function. i.e.:

const SomePrivateView = (props) =>  <>something</>

In ProtectedComponent we let withAuthenticationRequired to the redirection if needed:

const ProtectedComponent = ({ component, ...propsForComponent}) => {
  const Cp = withAuthenticationRequired(component);
  return <Cp {...propsForComponent} />
}

For the moment, this has been enough. Hope this helps someone also looking to upgrade.

Regards,
Juan Carlos

5 Likes