diff --git a/EXAMPLES.md b/EXAMPLES.md index 9e336669..562fd74a 100644 --- a/EXAMPLES.md +++ b/EXAMPLES.md @@ -170,12 +170,26 @@ import React from 'react'; import { Route, BrowserRouter, Routes, useNavigate } from 'react-router-dom'; import { Auth0Provider, withAuthenticationRequired } from '@auth0/auth0-react'; import Profile from './Profile'; +import Settings from './Settings'; -const ProtectedRoute = ({ component, ...args }) => { - const Component = withAuthenticationRequired(component, args); - return ; +// Pattern 1: Direct usage at module level +const ProtectedProfile = withAuthenticationRequired(Profile, { + onRedirecting: () =>
Redirecting to login...
, +}); + +// Pattern 2: Factory pattern (use when you need hooks in the wrapper) +const createProtectedRoute = (Component, options) => { + const ProtectedComponent = withAuthenticationRequired(Component, options); + return (props) => { + // You can use any React hooks here (useParams, useLocation, useAuth0, etc.) + return ; + }; }; +const ProtectedSettings = createProtectedRoute(Settings, { + onRedirecting: () =>
Redirecting to login...
, +}); + const Auth0ProviderWithRedirectCallback = ({ children, ...props }) => { const navigate = useNavigate(); const onRedirectCallback = (appState) => { @@ -200,10 +214,8 @@ export default function App() { > - } - /> + } /> + } />