Resolves #58 Dont render props passed to the LoadingComponent

README.md

@@ -108,8 +108,9 @@ Any time the user data changes, the UserAuthWrapper will re-check for authentica
 
 * `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.
-* `authenticatingSelector(state, [ownProps]): Bool` \(*Function*): A state selector indicating if the user is currently authenticating. Just like `mapToStateProps`. Useful for async session loading.
-* `LoadingComponent` \(*Component*): A React component to render while `authenticatingSelector` is `true`. If not present, will be a `<span/>`.
+* `authenticatingSelector(state, [ownProps]): Bool` \(*Function*): A state selector indicating if the user is currently authenticating. Just like `mapToStateProps`. Useful for async session loading. You only need this if you plan to display an alternative component while loading.
+* `LoadingComponent` \(*Component*): A React component to render while `authenticatingSelector` is `true`. If not present, will be a `<span/>`. Will be passed
+all properties passed into the wrapped component, including `children`.
 * `[failureRedirectPath]` \(*String | (state, [ownProps]): String*): Optional path to redirect the browser to on a failed check. Defaults to `/login`. Can also be a function of state and ownProps that returns a string.
 * `[redirectQueryParamName]` \(*String*): Optional name of the query parameter added when `allowRedirectBack` is true. Defaults to `redirect`.
 * `[redirectAction]` \(*Function*): Optional redux action creator for redirecting the user. If not present, will use React-Router's router context to perform the transition.

src/factory.js

@@ -2,18 +2,18 @@ import { connect } from 'react-redux'
 import hoistStatics from 'hoist-non-react-statics'
 import isEmpty from 'lodash.isempty'
 
-const defaults = {
-  LoadingComponent: 'span',
-  failureRedirectPath: '/login',
-  redirectQueryParamName: 'redirect',
-  wrapperDisplayName: 'AuthWrapper',
-  predicate: x => !isEmpty(x),
-  authenticatingSelector: () => false,
-  allowRedirectBack: true
-}
-
 export default function factory(React, empty) {
 
+  const defaults = {
+    LoadingComponent: () => React.createElement(empty), // dont allow passthrough of props from wrapper
+    failureRedirectPath: '/login',
+    redirectQueryParamName: 'redirect',
+    wrapperDisplayName: 'AuthWrapper',
+    predicate: x => !isEmpty(x),
+    authenticatingSelector: () => false,
+    allowRedirectBack: true
+  }
+
   const { Component, PropTypes } = React
 
   return (args) => {

test/UserAuthWrapper-test.js

@@ -90,6 +90,13 @@ const AlwaysAuthenticating = UserAuthWrapper({
   wrapperDisplayName: 'AlwaysAuthenticating'
 })
 
+const AlwaysAuthenticatingDefault = UserAuthWrapper({
+  authSelector: userSelector,
+  authenticatingSelector: () => true,
+  redirectAction: routerActions.replace,
+  wrapperDisplayName: 'AlwaysAuthenticating'
+})
+
 class App extends Component {
   static propTypes = {
     children: PropTypes.node
@@ -139,6 +146,7 @@ const defaultRoutes = (
   <Route path="/" component={App} >
     <Route path="login" component={UnprotectedComponent} />
     <Route path="alwaysAuth" component={AlwaysAuthenticating(UnprotectedComponent)} />
+    <Route path="alwaysAuthDef" component={AlwaysAuthenticatingDefault(UnprotectedComponent)} />
     <Route path="auth" component={UserIsAuthenticated(UnprotectedComponent)} />
     <Route path="hidden" component={HiddenNoRedir(UnprotectedComponent)} />
     <Route path="testOnly" component={UserIsOnlyTest(UnprotectedComponent)} />
@@ -214,7 +222,16 @@ describe('UserAuthWrapper', () => {
     const comp = wrapper.find(LoadingComponent)
     // Props from React-Router
     expect(comp.props().location.pathname).to.equal('/alwaysAuth')
+  })
+
+  it('renders the default component when authenticating without children and extra props', () => {
+    const { history, wrapper } = setupTest()
+
+    history.push('/alwaysAuthDef')
 
+    const comp = wrapper.find('div').last()
+    // expect no properties to be passed down
+    expect(comp.props()).to.deep.equal({})
   })
 
   it('preserves query params on redirect', () => {