Updates SecureRoute to pass react-router props (#802)

packages/okta-react/CHANGELOG.md

@@ -1,3 +1,11 @@
+# 3.0.2
+
+### Bug Fixes
+- [#802] 
+  - The minimum version of okta-auth-js is updated to 3.1.2 from 3.0.0 to help address an issue with overlapping PKCE renewal requests.
+  - `<SecureRoute>` should now pass the same react-router properties to wrapped components that `<Route>` does.
+  - Passing custom props to a component using the `render` property of `<SecureRoute>` should now work
+
 # 3.0.1
 
 ### Features

packages/okta-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/okta-react",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "React support for Okta",
   "main": "./dist/index.js",
   "scripts": {
@@ -33,7 +33,7 @@
   "homepage": "https://github.com/okta/okta-oidc-js#readme",
   "dependencies": {
     "@okta/configuration-validation": "^0.4.1",
-    "@okta/okta-auth-js": "^3.0.0",
+    "@okta/okta-auth-js": "^3.1.2",
     "babel-runtime": "^6.26.0",
     "prop-types": "^15.5.10"
   },

packages/okta-react/src/SecureRoute.js

@@ -37,11 +37,11 @@ const RequireAuth = ({ children }) => {
 const SecureRoute = ( {component, ...props} ) => { 
 
   const PassedComponent = component || function() { return null; };
-  const WrappedComponent = () => (<RequireAuth><PassedComponent/></RequireAuth>);
+  const WrappedComponent = (wrappedProps) => (<RequireAuth><PassedComponent {...wrappedProps}/></RequireAuth>);
   return (
     <Route
       { ...props }
-      render={ () => props.render ? props.render({...props, component: WrappedComponent}) : <WrappedComponent /> } 
+      render={ (routeProps) => props.render ? props.render({...routeProps, component: WrappedComponent}) : <WrappedComponent {...routeProps}/> } 
     />
   );
 };

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

@@ -8,6 +8,7 @@ describe('<SecureRoute />', () => {
   let authService;
   let authState;
   let mockProps;
+
   beforeEach(() => {
     authState = {
       isPending: true
@@ -20,10 +21,13 @@ describe('<SecureRoute />', () => {
     };
     mockProps = { authService };
   });
+
   describe('isAuthenticated: true', () => {
+
     beforeEach(() => {
       authState.isAuthenticated = true;
     });
+
     it('will render wrapped component', () => {
       const MyComponent = function() { return <div>hello world</div>; };
       const wrapper = mount(
@@ -38,10 +42,13 @@ describe('<SecureRoute />', () => {
       expect(wrapper.find(MyComponent).html()).toBe('<div>hello world</div>');
     });
   });
+
   describe('isAuthenticated: false', () => {
+
     beforeEach(() => {
       authState.isAuthenticated = false;
     });
+
     it('will not render wrapped component', () => {
       const MyComponent = function() { return <div>hello world</div>; };
       const wrapper = mount(
@@ -55,10 +62,13 @@ describe('<SecureRoute />', () => {
       );
       expect(wrapper.find(MyComponent).length).toBe(0);
     });
+
     describe('isPending: false', () => {
+
       beforeEach(() => {
         authState.isPending = false;
       });
+
       it('calls login()', () => {
         mount(
           <MemoryRouter>
@@ -70,10 +80,13 @@ describe('<SecureRoute />', () => {
         expect(authService.login).toHaveBeenCalled();
       });
     });
+
     describe('isPending: true', () => {
+
       beforeEach(() => {
         authState.isPending = true;
       });
+
       it('does not call login()', () => {
         mount(
           <MemoryRouter>
@@ -86,6 +99,7 @@ describe('<SecureRoute />', () => {
       });
     });
   });
+
   it('should accept a "path" prop and render a component', () => {
     const wrapper = mount(
       <MemoryRouter>
@@ -198,4 +212,36 @@ describe('<SecureRoute />', () => {
     const secureRoute = wrapper.find(SecureRoute);
     expect(secureRoute.find(Route).props().sensitive).toBe(true);
   });
+
+  it('should pass react-router props to an internal Route component', () => {
+    authState.isAuthenticated = true;
+    const MyComponent = function(props) { return <div>{ props.history ? 'has history' : 'lacks history'}</div>; };
+    const wrapper = mount(
+      <MemoryRouter>
+        <Security {...mockProps}>
+          <SecureRoute
+            path='/'
+            component={MyComponent}
+          />
+        </Security>
+      </MemoryRouter>
+    );
+    expect(wrapper.find(MyComponent).html()).toBe('<div>has history</div>');
+  });
+
+  it('should pass props using the "render" prop', () => {
+    authState.isAuthenticated = true;
+    const MyComponent = function(props) { return <div>{ props.someProp ? 'has someProp' : 'lacks someProp'}</div>; };
+    const wrapper = mount(
+      <MemoryRouter>
+        <Security {...mockProps}>
+          <SecureRoute
+            path='/'
+            render={ () => <MyComponent someProp={true}/> }
+          />
+        </Security>
+      </MemoryRouter>
+    );
+    expect(wrapper.find(MyComponent).html()).toBe('<div>has someProp</div>');
+  });
 });

packages/okta-react/yarn.lock

@@ -115,10 +115,10 @@
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@okta/configuration-validation/-/configuration-validation-0.4.1.tgz#6fa4520bc96c27b3d7aedcb0523de1fbceee9105"
 
-"@okta/okta-auth-js@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@okta/okta-auth-js/-/okta-auth-js-3.0.0.tgz#8fc9d07e3e2906f6f2506fa92a483789892110fb"
-  integrity sha512-RD9R2JdNYKeg4OD6weRk/tHURVbC88L40ve2qZdbi1UrfdLyh3wlmrz5H/9H80my1t5JACZvUIR9MWnQaEapGA==
+"@okta/okta-auth-js@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@okta/okta-auth-js/-/okta-auth-js-3.1.2.tgz#4046bd006a5d311b222d17f05f3d2a567c11db41"
+  integrity sha512-Z3Ay1axae2EMTcK7oPJZ0DnhmDZByaYmfnRbjr2UVPrnCWJFZuEPpIal59mC75QoPQNn95RaS/gclnXhM0exJg==
   dependencies:
     Base64 "0.3.0"
     cross-fetch "^3.0.0"