feat(auth0) add Profile page and update React Router to version v6

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)

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 <Loading />;
     }
     return (
-	<div>
-	    <NavBar />
-	    <div>
-		<Routes>
-		    <Route path="/" element={<Home/>} />
-		    <Route path="/profile" element={<Profile/>} />
-		</Routes>
-	    </div>
-	</div>
+	    <Fragment>
+		<NavBar/>
+		    <Routes>
+			<Route
+			    path="/"
+			    element={<Home/>} />
+			<Route
+			    path="/profile"
+			    element={<ProtectedRoute component={Profile} />}
+          />
+		    </Routes>
+	    </Fragment>
     );
 }

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: () => <Loading />,
+  });
+
+  return <Component />;
+};
+export default ProtectedRoute;

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(
-  <Router>
-    <Auth0ProviderWithHistory>
-      <App />
-    </Auth0ProviderWithHistory>
-  </Router>,
+    <React.StrictMode>
+	<BrowserRouter>
+	    <Auth0ProviderWithHistory>
+		<App />
+	    </Auth0ProviderWithHistory>
+	</BrowserRouter>
+    </React.StrictMode>
 );

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 = () => {
     </div>
   );
 };
-export default withAuthenticationRequired(Profile, {
-  onRedirecting: () => <Loading />,
-});
+export default Profile;