diff --git a/auth0-blog/README.md b/auth0-blog/README.md
index 80c619a..db5f102 100644
--- a/auth0-blog/README.md
+++ b/auth0-blog/README.md
@@ -13,3 +13,4 @@
* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
* [Auth0 with React}(https://auth0.com/blog/complete-guide-to-react-user-authentication/)
+* [React/JavaScript +React Router 6: Authentication Code Sample](https://auth0.com/developers/hub/code-samples/spa/react-javascript/basic-authentication-with-react-router-6)
\ No newline at end of file
diff --git a/auth0-blog/app/app.jsx b/auth0-blog/app/app.jsx
index bcc8c4d..0cd4951 100644
--- a/auth0-blog/app/app.jsx
+++ b/auth0-blog/app/app.jsx
@@ -1,25 +1,29 @@
-import React from 'react';
-import { Route, Routes } from "react-router-dom";
+import React, {Fragment} from 'react';
+import { Route, Routes} from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import NavBar from "./components/nav-bar";
import Loading from "./components/loading";
import Profile from "./pages/profile";
import Home from './pages/home';
+import ProtectedRoute from './auth/protected-route';
export default function App() {
const { isLoading } = useAuth0();
if (isLoading) {
return ;
}
return (
-
-
-
-
- } />
- } />
-
-
-
+
+
+
+ } />
+ }
+ />
+
+
);
}
diff --git a/auth0-blog/app/auth/protected-route.jsx b/auth0-blog/app/auth/protected-route.jsx
new file mode 100644
index 0000000..e752c7b
--- /dev/null
+++ b/auth0-blog/app/auth/protected-route.jsx
@@ -0,0 +1,11 @@
+import { withAuthenticationRequired } from "@auth0/auth0-react";
+import React from "react";
+import Loading from "../components/loading";
+const ProtectedRoute = ({ component }) => {
+ const Component = withAuthenticationRequired(component, {
+ onRedirecting: () => ,
+ });
+
+ return ;
+};
+export default ProtectedRoute;
diff --git a/auth0-blog/app/index.jsx b/auth0-blog/app/index.jsx
index 303b3e3..aa76c78 100644
--- a/auth0-blog/app/index.jsx
+++ b/auth0-blog/app/index.jsx
@@ -1,7 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
+
import App from './app';
-import { BrowserRouter as Router } from "react-router-dom";
import Auth0ProviderWithHistory from './auth/auth0-provider-with-history';
//TODO remove debugging
if (process.env.NODE_ENV !== 'production') {
@@ -13,9 +14,11 @@ import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById("root"));
//render root app
root.render(
-
-
-
-
- ,
+
+
+
+
+
+
+
);
diff --git a/auth0-blog/app/pages/profile.jsx b/auth0-blog/app/pages/profile.jsx
index 7204999..ff92989 100644
--- a/auth0-blog/app/pages/profile.jsx
+++ b/auth0-blog/app/pages/profile.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';
+import { useAuth0 } from '@auth0/auth0-react';
import Loading from '../components/loading';
const Profile = () => {
@@ -29,6 +29,4 @@ const Profile = () => {
);
};
-export default withAuthenticationRequired(Profile, {
- onRedirecting: () => ,
-});
+export default Profile;