Bugfix/initial loader state

README.md

@@ -14,6 +14,10 @@ redux-auth-wrapper is a utility library for handling authentication and authoriz
 
 Read the documentation at https://mjrussell.github.io/redux-auth-wrapper
 
+## Custom Release
+
+yarn build && yarn build:copyFiles && yarn dist
+
 ## Version 3
 Version 3.x has the same external API as version 2, however it only supports React >= 16.3. It is also tested with react-router v5 and [connected-react-router](https://github.com/supasate/connected-react-router) which replaced [react-router-redux](https://github.com/reactjs/react-router-redux).
 

package.json

@@ -1,32 +1,35 @@
 {
-  "name": "redux-auth-wrapper",
-  "version": "3.0.0",
-  "main": "index.js",
+  "name": "@cdmbase/redux-auth-wrapper",
+  "version": "5.3.0",
   "description": "A utility library for handling authentication and authorization for redux and react-router",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mjrussell/redux-auth-wrapper.git"
+  },
+  "license": "MIT",
+  "main": "index.js",
   "scripts": {
     "build": "mkdirp lib && babel ./src --out-dir ./lib",
     "build:clean": "rimraf ./lib",
     "build:copyFiles": "cp -rf package.json LICENSE.txt README.md lib/.",
     "dist": "cd lib && yarn publish",
     "dist:prepare": "yarn run build:clean && yarn run build && yarn run build:copyFiles",
-    "lint": "eslint src test examples",
-    "test": "mocha --compilers js:babel-core/register --recursive --require test/init.js test/authWrapper-test.js",
-    "test:cov": "babel-node --max-old-space-size=4076 $(yarn bin)/babel-istanbul cover $(yarn bin)/_mocha -- --require test/init.js test/authWrapper-test.js",
-    "test:watch": "mocha --compilers js:babel-core/register --recursive --require test/init.js -w test/authWrapper-test.js",
+    "docs:build": "yarn run docs:prepare && gitbook build",
     "docs:clean": "rimraf _book",
     "docs:prepare": "gitbook install",
-    "docs:build": "yarn run docs:prepare && gitbook build",
+    "docs:publish": "yarn run docs:clean && yarn run docs:build && cp README.md _book && cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push [email protected]:mjrussell/redux-auth-wrapper gh-pages --force",
     "docs:watch": "yarn run docs:prepare && gitbook serve",
-    "docs:publish": "yarn run docs:clean && yarn run docs:build && cp README.md _book && cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push [email protected]:mjrussell/redux-auth-wrapper gh-pages --force"
+    "lint": "eslint src test examples",
+    "test": "mocha --compilers js:babel-core/register --recursive --require test/init.js test/authWrapper-test.js",
+    "test:cov": "babel-node --max-old-space-size=4076 $(yarn bin)/babel-istanbul cover $(yarn bin)/_mocha -- --require test/init.js test/authWrapper-test.js",
+    "test:watch": "mocha --compilers js:babel-core/register --recursive --require test/init.js -w test/authWrapper-test.js"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mjrussell/redux-auth-wrapper.git"
+  "dependencies": {
+    "hoist-non-react-statics": "^3.3.0",
+    "invariant": "^2.2.4",
+    "lodash.isempty": "^4.4.0",
+    "query-string": "^6.9.0"
   },
-  "authors": [
-    "Matthew Russell"
-  ],
-  "license": "MIT",
   "devDependencies": {
     "babel-cli": "6.26.0",
     "babel-core": "6.26.3",
@@ -57,10 +60,10 @@
     "rimraf": "3.0.0",
     "sinon": "8.0.2"
   },
-  "dependencies": {
-    "hoist-non-react-statics": "^3.3.0",
-    "invariant": "^2.2.4",
-    "lodash.isempty": "^4.4.0",
-    "query-string": "^6.9.0"
-  }
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Matthew Russell"
+  ]
 }

src/authWrapper.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import hoistStatics from 'hoist-non-react-statics'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 const defaults = {
   AuthenticatingComponent: () => null, // dont render anything while authenticating
@@ -9,7 +9,7 @@ const defaults = {
 }
 
 export default (args) => {
-  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName } = {
+  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName, LoadingComponent } = {
     ...defaults,
     ...args
   }
@@ -19,6 +19,18 @@ export default (args) => {
     const displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component'
 
     class UserAuthWrapper extends Component {
+      constructor() {
+        super();
+        this.state = { loading: true };
+      }
+
+      componentDidMount() {
+        if (this.props.preAuthAction) {
+          this.props.preAuthAction();
+        }
+        // reset the loading state once component is mounted.
+        this.setState({loading: false})
+      }
 
       static displayName = `${wrapperDisplayName}(${displayName})`;
 
@@ -33,9 +45,22 @@ export default (args) => {
 
       render() {
         const { isAuthenticated, isAuthenticating } = this.props
-        if (isAuthenticated) {
+        if (this.state.loading) {
+          /**
+           * If loading component is not provided then render the authenticating component as a fallback, Since mostly
+           * authenticating component will be a loader or a spinner.
+           */
+          return (
+            <React.Fragment>
+              {LoadingComponent
+                ? <LoadingComponent />
+                : <AuthenticatingComponent {...this.props} />
+              }
+            </React.Fragment>
+          )
+        }else if (isAuthenticated) {
           return <DecoratedComponent {...this.props} />
-        } else if(isAuthenticating) {
+        } else if (isAuthenticating) {
           return <AuthenticatingComponent {...this.props} />
         } else {
           return <FailureComponent {...this.props} />

src/connectedAuthWrapper.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux'
-
 import authWrapper from './authWrapper'
 
+
 const connectedDefaults = {
   authenticatingSelector: () => false
 }
 
 export default (args) => {
-  const { authenticatedSelector, authenticatingSelector } = {
+  const { authenticatedSelector, authenticatingSelector, preAuthAction} = {
     ...connectedDefaults,
     ...args
   }
@@ -16,5 +16,11 @@ export default (args) => {
     connect((state, ownProps) => ({
       isAuthenticated: authenticatedSelector(state, ownProps),
       isAuthenticating: authenticatingSelector(state, ownProps)
+    }), (dispatch) => ({
+      preAuthAction: () => {
+        if (preAuthAction) {
+          dispatch(preAuthAction())
+        }
+      }
     }))(authWrapper(args)(DecoratedComponent))
 }

src/helper/redirect.js

@@ -1,9 +1,9 @@
-import { connect } from 'react-redux'
 import invariant from 'invariant'
-
+import { connect } from 'react-redux'
 import authWrapper from '../authWrapper'
 import Redirect from '../redirect'
 
+
 const connectedDefaults = {
   authenticatingSelector: () => false,
   allowRedirectBack: true,
@@ -15,7 +15,7 @@ export default ({ locationHelperBuilder, getRouterRedirect }) => {
 
   const connectedRouterRedirect = (args) => {
     const allArgs = { ...connectedDefaults, ...args }
-    const { FailureComponent, redirectPath, authenticatedSelector, authenticatingSelector, allowRedirectBack, redirectQueryParamName } = allArgs
+    const { FailureComponent, redirectPath, authenticatedSelector, authenticatingSelector, allowRedirectBack, redirectQueryParamName, preAuthAction } = allArgs
 
     const { createRedirectLoc } = locationHelperBuilder({
       redirectQueryParamName
@@ -51,12 +51,18 @@ export default ({ locationHelperBuilder, getRouterRedirect }) => {
         redirectPath: redirectPathSelector(state, ownProps),
         isAuthenticated: authenticatedSelector(state, ownProps),
         isAuthenticating: authenticatingSelector(state, ownProps)
-      }))(authWrapper({ ...allArgs, FailureComponent: ConnectedFailureComponent })(DecoratedComponent))
+      }), (dispatch) => ({
+        preAuthAction: () => {
+          if (preAuthAction) {
+            dispatch(preAuthAction())
+          }
+        }
+      }) )(authWrapper({ ...allArgs, FailureComponent: ConnectedFailureComponent })(DecoratedComponent))
   }
 
   const connectedReduxRedirect = (args) => {
     const allArgs = { ...connectedDefaults, ...args }
-    const { FailureComponent, redirectPath, authenticatedSelector, authenticatingSelector, allowRedirectBack, redirectAction, redirectQueryParamName } = allArgs
+    const { FailureComponent, redirectPath, authenticatedSelector, authenticatingSelector, allowRedirectBack, redirectAction, redirectQueryParamName, preAuthAction } = allArgs
 
     const { createRedirectLoc } = locationHelperBuilder({
       redirectQueryParamName
@@ -90,7 +96,13 @@ export default ({ locationHelperBuilder, getRouterRedirect }) => {
       connect((state, ownProps) => ({
         redirectPath: redirectPathSelector(state, ownProps),
         isAuthenticated: authenticatedSelector(state, ownProps),
-        isAuthenticating: authenticatingSelector(state, ownProps)
+        isAuthenticating: authenticatingSelector(state, ownProps),
+      }), (dispatch) => ({
+        preAuthAction: () => {
+          if (preAuthAction) {
+            dispatch(preAuthAction())
+          }
+        }
       }))(authWrapper({ ...allArgs, FailureComponent: ConnectedFailureComponent })(DecoratedComponent))
   }