Merge pull request mjrussell#21 from mjrussell/ownProps

mjrussell#20 pass ownProps to the auth selector

Author: mjrussell

README.md

@@ -104,7 +104,8 @@ Any time the user data changes, the UserAuthWrapper will re-check for authentica
 
 #### Config Object Keys
 
-* `authSelector(state, [ownProps]): authData` \(*Function*): A state selector for the auth data. Just like `mapToStateProps`
+* `authSelector(state, [ownProps], [isOnEnter]): authData` \(*Function*): A state selector for the auth data. Just like `mapToStateProps`.
+ownProps will be null if isOnEnter is true because onEnter hooks cannot receive the component properties. Can be ignored when not using onEnter.
 * `[failureRedirectPath]` \(*String*): Optional path to redirect the browser to on a failed check. Defaults to `/login`
 * `[redirectAction]` \(*Function*): Optional redux action creator for redirecting the user. If not present, will use React-Router's router context to perform the transition.
 * `[wrapperDisplayName]` \(*String*): Optional name describing this authentication or authorization check.

src/index.js

@@ -48,7 +48,7 @@ const UserAuthWrapper = (args) => {
     }
 
     @connect(
-      state => { return { authData: authSelector(state) } },
+      (state, ownProps) => { return { authData: authSelector(state, ownProps, false) } },
       mapDispatchToProps,
     )
     class UserAuthWrapper extends Component {
@@ -108,7 +108,7 @@ const UserAuthWrapper = (args) => {
   }
 
   wrapComponent.onEnter = (store, nextState, replace) => {
-    const authData = authSelector(store.getState())
+    const authData = authSelector(store.getState(), null, true)
     ensureAuth({ location: nextState.location, authData }, replace)
   }
 

test/UserAuthWrapper-test.js

@@ -320,4 +320,46 @@ describe('UserAuthWrapper', () => {
     expect(store.getState().routing.location.pathname).to.equal('/login')
     expect(store.getState().routing.location.search).to.equal('?redirect=%2FonEnter')
   })
+
+  it('passes ownProps for auth selector', () => {
+    const authSelector = (state, ownProps, isOnEnter) => {
+      if (!isOnEnter) {
+        return {
+          ...state.user,
+          ...ownProps.routeParams // from React-Router
+        }
+      } else {
+        return {}
+      }
+    }
+
+    const UserIsAuthenticatedProps = UserAuthWrapper({
+      authSelector: authSelector,
+      redirectAction: routeActions.replace,
+      wrapperDisplayName: 'UserIsAuthenticatedProps',
+      predicate: user => user.firstName === 'Test' && user.id === '1'
+    })
+
+    const routes = (
+      <Route path="/" component={App} >
+        <Route path="login" component={UnprotectedComponent} />
+        <Route path="ownProps/:id" component={UserIsAuthenticatedProps(UnprotectedComponent)} />
+      </Route>
+    )
+
+    const { history, store } = setupTest(routes)
+
+    expect(store.getState().routing.location.pathname).to.equal('/')
+    expect(store.getState().routing.location.search).to.equal('')
+
+    store.dispatch(userLoggedIn())
+
+    history.push('/ownProps/1')
+    expect(store.getState().routing.location.pathname).to.equal('/ownProps/1')
+    expect(store.getState().routing.location.search).to.equal('')
+
+    history.push('/ownProps/2')
+    expect(store.getState().routing.location.pathname).to.equal('/login')
+    expect(store.getState().routing.location.search).to.equal('?redirect=%2FownProps%2F2')
+  })
 })