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

packages/okta-react/src/SecureRoute.js

@@ -12,17 +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]);
+  }, [authState.isPending, authState.isAuthenticated, authService, match]);
 
   if (!authState.isAuthenticated) {
     return null;

packages/okta-react/test/jest/secureRoute.test.js

@@ -132,16 +132,27 @@ describe('<SecureRoute />', () => {
         authState.isPending = false;
       });
 
-      it('calls login()', () => {
+      it('calls login() if route matches', () => {
         mount(
           <MemoryRouter>
             <Security {...mockProps}>
-              <SecureRoute />
+              <SecureRoute path="/" />
             </Security>
           </MemoryRouter>
         );
         expect(authService.login).toHaveBeenCalled();
       });
+
+      it('does not call login() if route does not match', () => {
+        mount(
+          <MemoryRouter>
+            <Security {...mockProps}>
+              <SecureRoute path="/other" />
+            </Security>
+          </MemoryRouter>
+        );
+        expect(authService.login).not.toHaveBeenCalled();
+      });
     });
 
     describe('isPending: true', () => {