Adds handling of render and children to SecureRoute (#872)

packages/okta-react/CHANGELOG.md

@@ -1,3 +1,11 @@
+# 3.0.5
+
+### Bug Fixes
+
+- [#872](https://github.com/okta/okta-oidc-js/pull/872) Adjusts `<SecureRoute>` so that it enforces authentication requirement for components passed via "render" or "children" in addition to "component"
+  - NOTE: `<SecureRoute>`, like react-router `<Route>`, only wants ONE of the three ways of passing wrapped components per route
+  - This should also address cases where components loaded through SecureRoute were being unnecessarily unmounted/remounted
+
 # 3.0.4
 
 ### Bug Fixes

packages/okta-react/README.md

@@ -466,6 +466,11 @@ class App extends Component {
 
 `SecureRoute` integrates with `react-router`.  Other routers will need their own methods to ensure authentication using the hooks/HOC props provided by this SDK.
 
+As with `Route` from `react-router-dom`, `<SecureRoute>` can take one of:
+- a `component` prop that is passed a component
+- a `render` prop that is passed a function that returns a component.  This function will be passed any additional props that react-router injects (such as `history` or `match`)
+- children components
+
 ### `LoginCallback`
 
 `LoginCallback` handles the callback after the redirect to and back from the Okta-hosted login page. By default, it parses the tokens from the uri, stores them, then redirects to `/`. If a `SecureRoute` caused the redirect, then the callback redirects to the secured route. For more advanced cases, this component can be copied to your own source tree and modified as needed.

packages/okta-react/src/SecureRoute.js

@@ -12,40 +12,25 @@
 
 import React, { useEffect } from 'react';
 import { useOktaAuth } from './OktaContext';
-import { useHistory, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 
-const RequireAuth = ({ children }) => { 
+const SecureRoute = ( props ) => { 
   const { authService, authState } = useOktaAuth();
-  const history = useHistory();
 
   useEffect(() => {
-    // Make sure login process is not triggered when the app just start
+    // Start login if and only if app has decided it is not logged inn
     if(!authState.isAuthenticated && !authState.isPending) { 
-      const fromUri = history.createHref(history.location);
-      authService.login(fromUri);
+      authService.login();
     }  
-  }, [authState, authService]);
+  }, [authState.isPending, authState.isAuthenticated, authService]);
 
   if (!authState.isAuthenticated) {
     return null;
   }
 
-  return (
-    <React.Fragment>
-      {children}
-    </React.Fragment>
-  );
-
-};
-
-const SecureRoute = ( {component, ...props} ) => { 
-
-  const PassedComponent = component || function() { return null; };
-  const WrappedComponent = (wrappedProps) => (<RequireAuth><PassedComponent {...wrappedProps}/></RequireAuth>);
   return (
     <Route
       { ...props }
-      render={ (routeProps) => props.render ? props.render({...routeProps, component: WrappedComponent}) : <WrappedComponent {...routeProps}/> } 
     />
   );
 };