[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', () => {