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

okta · Sep 9, 2020 · e3f6024 · e3f6024
1 parent 4751348
commit e3f6024
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/packages/okta-react/src/SecureRoute.js b/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;

diff --git a/packages/okta-react/test/e2e/harness/src/App.js b/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>

diff --git a/packages/okta-react/test/jest/secureRoute.test.js b/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', () => {