Update PrivateRoute.js to match Quickstart

Author: adamjmcgrath

01-Login/src/components/PrivateRoute.js

@@ -3,19 +3,20 @@ import PropTypes from "prop-types";
 import { Route, withRouter } from "react-router-dom";
 import { useAuth0 } from "../react-auth0-spa";
 
-const PrivateRoute = ({ component: Component, path, location, ...rest }) => {
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
+const PrivateRoute = ({ component: Component, path, ...rest }) => {
+  const { loading, isAuthenticated, loginWithRedirect } = useAuth0();
 
   useEffect(() => {
+    if (loading || isAuthenticated) {
+      return;
+    }
     const fn = async () => {
-      if (!isAuthenticated) {
-        await loginWithRedirect({
-          appState: { targetUrl: location.pathname }
-        });
-      }
+      await loginWithRedirect({
+        appState: { targetUrl: path }
+      });
     };
     fn();
-  }, [isAuthenticated, loginWithRedirect, path, location]);
+  }, [loading, isAuthenticated, loginWithRedirect, path]);
 
   const render = props =>
     isAuthenticated === true ? <Component {...props} /> : null;
@@ -26,9 +27,6 @@ const PrivateRoute = ({ component: Component, path, location, ...rest }) => {
 PrivateRoute.propTypes = {
   component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
     .isRequired,
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired
-  }).isRequired,
   path: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string)

02-Calling-an-API/src/components/PrivateRoute.js

@@ -3,19 +3,20 @@ import PropTypes from "prop-types";
 import { Route, withRouter } from "react-router-dom";
 import { useAuth0 } from "../react-auth0-spa";
 
-const PrivateRoute = ({ component: Component, path, location, ...rest }) => {
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
+const PrivateRoute = ({ component: Component, path, ...rest }) => {
+  const { loading, isAuthenticated, loginWithRedirect } = useAuth0();
 
   useEffect(() => {
+    if (loading || isAuthenticated) {
+      return;
+    }
     const fn = async () => {
-      if (!isAuthenticated) {
-        await loginWithRedirect({
-          appState: { targetUrl: location.pathname }
-        });
-      }
+      await loginWithRedirect({
+        appState: { targetUrl: path }
+      });
     };
     fn();
-  }, [isAuthenticated, loginWithRedirect, path, location]);
+  }, [loading, isAuthenticated, loginWithRedirect, path]);
 
   const render = props =>
     isAuthenticated === true ? <Component {...props} /> : null;
@@ -26,9 +27,6 @@ const PrivateRoute = ({ component: Component, path, location, ...rest }) => {
 PrivateRoute.propTypes = {
   component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
     .isRequired,
-  location: PropTypes.shape({
-    pathname: PropTypes.string.isRequired
-  }).isRequired,
   path: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string)