Fixes redirect on Login if you are using React Router

Author: Kavita Chaudhry

.gitignore

@@ -4,3 +4,6 @@ node_modules
 **/auth0-variables.js
 npm-debug.log
 .editorconfig
+.idea/workspace.xml
+.idea/vcs.xml
+.idea/encodings.xml

01-Login/src/components/PrivateRoute.js

@@ -1,35 +1,38 @@
-import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { Route } from "react-router-dom";
-import { useAuth0 } from "../react-auth0-spa";
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Route, withRouter } from 'react-router-dom';
+import { useAuth0 } from '../react-auth0-spa';
 
-const PrivateRoute = ({ component: Component, path, ...rest }) => {
+const PrivateRoute = ({ component: Component, path, location, ...rest }) => {
   const { isAuthenticated, loginWithRedirect } = useAuth0();
 
   useEffect(() => {
     const fn = async () => {
       if (!isAuthenticated) {
         await loginWithRedirect({
-          appState: { targetUrl: path }
+          appState: { targetUrl: location.pathname }
         });
       }
     };
     fn();
-  }, [isAuthenticated, loginWithRedirect, path]);
+  }, [isAuthenticated, loginWithRedirect, path, location]);
 
   const render = props =>
-    isAuthenticated === true ? <Component {...props} /> : null;
+      isAuthenticated === true ? <Component {...props} /> : null;
 
   return <Route path={path} render={render} {...rest} />;
 };
 
 PrivateRoute.propTypes = {
   component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
-    .isRequired,
+      .isRequired,
+  location: PropTypes.shape({
+    pathName: PropTypes.string.isRequired
+  }).isRequired,
   path: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string)
   ]).isRequired
 };
 
-export default PrivateRoute;
+export default withRouter(PrivateRoute);