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() {
>
- }
- />
+ } />
+ } />