feat(auth0) add Loading component and Routes

auth0-blog/app/app.jsx

@@ -1,8 +1,10 @@
 import React 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';
 export default function App() {
     const { isLoading } = useAuth0();
@@ -13,8 +15,10 @@ export default function App() {
 	<div>
 	    <NavBar />
 	    <div>
-		<h1>Auth0 with React.js</h1>
-		<Home />
+		<Routes>
+		    <Route path="/" element={<Home/>} />
+		    <Route path="/profile" element={<Profile/>} />
+		</Routes>
 	    </div>
 	</div>
     );

auth0-blog/app/components/main-nav.jsx

@@ -1,8 +1,18 @@
+import {NavLink} from "react-router-dom";
 import React from "react";
 
 const MainNav = () => (
     <div>
-	MainNav loading...
+	<NavLink
+	    to="/"
+	>
+	    Home
+	</NavLink>
+	<NavLink
+	    to="/profile"
+	>
+	    Profile
+	</NavLink>
   </div>
 );
 

auth0-blog/app/pages/profile.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';
+import Loading from '../components/loading';
+
+const Profile = () => {
+  const { user } = useAuth0();
+  const { name, picture, email } = user;
+
+  return (
+    <div>
+      <div>
+        <div>
+          <img
+            src={picture}
+            alt="Profile"
+          />
+        </div>
+        <div>
+          <h2>{name}</h2>
+            <p>{email}</p>
+        </div>
+      </div>
+      <div>
+        <pre>
+          {JSON.stringify(user, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};
+export default withAuthenticationRequired(Profile, {
+  onRedirecting: () => <Loading />,
+});