[okta-react] fixes SecureRoute to only run logic if route matches

packages/okta-react/src/SecureRoute.js

@@ -12,21 +12,22 @@
 
 import React, { useEffect } from 'react';
 import { useOktaAuth } from './OktaContext';
-import { Route } from 'react-router-dom';
+import { Route, useRouteMatch } from 'react-router-dom';
 
 const SecureRoute = ( props ) => { 
   const { authService, authState } = useOktaAuth();
+  const match = useRouteMatch(props);
 
   useEffect(() => {
+    // Only process logic if the route matches
+    if (!match) {
+      return;
+    }
     // Start login if and only if app has decided it is not logged inn
     if(!authState.isAuthenticated && !authState.isPending) { 
       authService.login();
     }  
-  }, [authState.isPending, authState.isAuthenticated, authService]);
-
-  if (!authState.isAuthenticated) {
-    return null;
-  }
+  }, [authState.isPending, authState.isAuthenticated, authService, match]);
 
   return (
     <Route

packages/okta-react/test/e2e/harness/src/App.js

@@ -11,7 +11,7 @@
  */
 
 import React, { Component } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import { AuthService, Security, LoginCallback, SecureRoute } from '@okta/okta-react';
 import Home from './Home';
@@ -45,14 +45,12 @@ class App extends Component {
                   redirectUri={redirectUri}
                   onAuthRequired={this.onAuthRequired}
                   pkce={pkce}>
-          <Switch>
-            <Route path='/login' component={CustomLogin}/>
-            <Route path='/sessionToken-login' component={SessionTokenLogin}/>
-            <SecureRoute exact path='/protected' component={Protected}/>
-            <Route path='/implicit/callback' component={LoginCallback} />
-            <Route path='/pkce/callback' component={LoginCallback} />
-            <Route path='/' component={Home}/>
-          </Switch>
+          <Route path='/login' component={CustomLogin}/>
+          <Route path='/sessionToken-login' component={SessionTokenLogin}/>
+          <SecureRoute exact path='/protected' component={Protected}/>
+          <Route path='/implicit/callback' component={LoginCallback} />
+          <Route path='/pkce/callback' component={LoginCallback} />
+          <Route exact path='/' component={Home}/>
         </Security>
         <a href="/?pkce=1">PKCE Flow</a> | <a href="/">Implicit Flow</a>
       </React.StrictMode>