React Auth0 v1

src/app.js

@@ -7,15 +7,11 @@ import { Home, Profile, ExternalApi } from "./views";
 import ProtectedRoute from "./auth/protected-route";
 
 import "./app.css";
+import Auth0ProviderWithHistory from "./views/auth0Provider";
 
 const App = () => {
-  const { isLoading } = useAuth0();
-
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
+    <Auth0ProviderWithHistory>
     <div id="app" className="d-flex flex-column h-100">
       <NavBar />
       <div className="container flex-grow-1">
@@ -27,7 +23,8 @@ const App = () => {
       </div>
       <Footer />
     </div>
+    </Auth0ProviderWithHistory>
   );
-};
+}; 
 
 export default App;

src/components/main-nav.js

@@ -1,7 +1,12 @@
 import {NavLink} from "react-router-dom";
 import React from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import LoginButton from "./login-button";
+import LogoutButton from "./logout-button";
 
-const MainNav = () => (
+const MainNav = () => {
+const {loginWithRedirect,logout,user,isLoading} = useAuth0();
+return (
   <div className="navbar-nav mr-auto">
     <NavLink
       to="/"
@@ -27,7 +32,10 @@ const MainNav = () => (
     >
       External API
     </NavLink>
+
+
+
   </div>
-);
+)};
 
 export default MainNav;

src/views/auth0Provider.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Auth0Provider } from '@auth0/auth0-react';
+
+const Auth0ProviderWithHistory = ({ children }) => {
+  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
+  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
+
+  const history = useHistory();
+
+  const onRedirectCallback = (appState) => {
+    history.push(appState?.returnTo || window.location.pathname);
+  };
+
+  return (  
+    <Auth0Provider
+      domain={domain}
+      clientId={clientId}
+      redirectUri={window.location.origin}
+      onRedirectCallback={onRedirectCallback}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};
+
+export default Auth0ProviderWithHistory;