Adds preAuth action to trigger

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).
 

esbuild.config.js

@@ -0,0 +1,19 @@
+// Import esbuild as an ES module
+import esbuild from 'esbuild';
+
+// Use top-level await to handle the promise returned by esbuild.build
+try {
+  await esbuild.build({
+    entryPoints: ['src/**/**'], // Specify multiple entry points if necessary
+    outdir: 'lib',
+    minify: false,
+    sourcemap: false,
+    loader: { '.js': 'jsx', '.ts': 'tsx' },
+    splitting: false, // Ensure splitting is disabled for separate file output
+    format: 'esm', // Or 'cjs', depending on your target module system
+    // Additional options...
+  });
+} catch (error) {
+  console.error(error);
+  process.exit(1);
+}

package.json

@@ -1,33 +1,39 @@
 {
-  "name": "redux-auth-wrapper",
-  "version": "3.0.0",
-  "main": "index.js",
+  "name": "@cdmbase/redux-auth-wrapper",
+  "version": "6.6.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",
+  "type": "module",
   "scripts": {
-    "build": "mkdirp lib && babel ./src --out-dir ./lib",
+    "build": "node esbuild.config.js",
     "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 --require babel-core/register --recursive --require test/init.js test/rrv6-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 --require 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": "^9.0.0"
   },
-  "authors": [
-    "Matthew Russell"
-  ],
-  "license": "MIT",
   "devDependencies": {
+    "@babel/preset-env": "^7.23.9",
+    "@react-navigation/native": "~6.1.8",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.3",
     "babel-eslint": "10.0.3",
@@ -41,10 +47,12 @@
     "coveralls": "3.0.9",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.2",
+    "esbuild": "^0.20.1",
     "eslint": "6.8.0",
     "eslint-plugin-react": "7.17.0",
     "expect": "24.9.0",
     "gitbook-cli": "2.3.2",
+    "history": "^5.3.0",
     "jsdom": "15.2.1",
     "lodash": "4.17.19",
     "mkdirp": "0.5.1",
@@ -53,14 +61,20 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-redux": "7.1.3",
+    "react-router": "^6.4.0",
+    "react-router-dom": "^6.4.0",
     "redux": "4.0.5",
+    "redux-first-history": "^5.2.0",
+    "regenerator-runtime": "^0.14.1",
     "rimraf": "3.0.0",
-    "sinon": "8.0.2"
+    "rollup": "^4.12.0",
+    "sinon": "8.0.2",
+    "url": "^0.11.3"
   },
-  "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,7 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import hoistStatics from 'hoist-non-react-statics'
+import { useLocation, useParams, useNavigate } from 'react-router'
 
 const defaults = {
   AuthenticatingComponent: () => null, // dont render anything while authenticating
@@ -9,40 +10,64 @@ const defaults = {
 }
 
 export default (args) => {
-  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName } = {
+  const { AuthenticatingComponent, FailureComponent, wrapperDisplayName,  LoadingComponent } = {
     ...defaults,
     ...args
   }
-
+  
   // Wraps the component that needs the auth enforcement
   function wrapComponent(DecoratedComponent) {
     const displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component'
 
-    class UserAuthWrapper extends Component {
-
-      static displayName = `${wrapperDisplayName}(${displayName})`;
-
-      static propTypes = {
-        isAuthenticated: PropTypes.bool,
-        isAuthenticating: PropTypes.bool
-      };
-
-      static defaultProps = {
-        isAuthenticating: false
-      }
-
-      render() {
-        const { isAuthenticated, isAuthenticating } = this.props
-        if (isAuthenticated) {
-          return <DecoratedComponent {...this.props} />
-        } else if(isAuthenticating) {
-          return <AuthenticatingComponent {...this.props} />
-        } else {
-          return <FailureComponent {...this.props} />
+    const UserAuthWrapper = (ownProps) => {
+      let location = {}
+      try { location = useLocation() } catch(e) {}
+      const navigate = useNavigate()
+      const params = useParams()
+      const [loading, setLoading] = useState(true)
+      const authProps = {...ownProps, location, params, replace: (path) => navigate(path, {replace: true})}
+      const { isAuthenticated, isAuthenticating, preAuthAction, replace, redirectPath, ...props } = authProps
+
+      React.useEffect(() => {
+        if (loading) {
+          if (preAuthAction) {
+            preAuthAction();
+          }
+          setLoading(false);
         }
+      }, [])
+
+      if (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 {...props} />
+            }
+          </React.Fragment>
+        )
+      } else if (isAuthenticated) {
+        return <DecoratedComponent {...props} />
+      } else if(isAuthenticating) {
+        return <AuthenticatingComponent {...props} />
+      } else {
+        return <FailureComponent {...authProps} />
       }
     }
 
+    UserAuthWrapper.displayName = `${wrapperDisplayName}(${displayName})`
+    UserAuthWrapper.propTypes = {
+      isAuthenticated: PropTypes.bool,
+      isAuthenticating: PropTypes.bool
+    }
+    UserAuthWrapper.defaultProps = {
+      isAuthenticating: false
+    }
+
     return hoistStatics(UserAuthWrapper, DecoratedComponent)
   }
 

src/authWrapper.native.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import hoistStatics from "hoist-non-react-statics";
+import { useNavigation, useRoute } from "@react-navigation/native";
+
+const defaults = {
+  AuthenticatingComponent: () => null, // dont render anything while authenticating
+  FailureComponent: () => null, // dont render anything on failure of the predicate
+  wrapperDisplayName: "AuthWrapper",
+};
+
+export default (args) => {
+  const {
+    AuthenticatingComponent,
+    FailureComponent,
+    wrapperDisplayName,
+    LoadingComponent,
+  } = {
+    ...defaults,
+    ...args,
+  };
+
+  // Wraps the component that needs the auth enforcement
+  function wrapComponent(DecoratedComponent) {
+    const displayName =
+      DecoratedComponent.displayName || DecoratedComponent.name || "Component";
+
+    const UserAuthWrapper = (ownProps) => {
+      const navigation = useNavigation();
+      const route = useRoute();
+      const params = route.params;
+      const [loading, setLoading] = useState(true);
+      const authProps = {
+        ...ownProps,
+        params,
+        replace: (path) => navigation.navigate(path, { replace: true }),
+      };
+      const {
+        isAuthenticated,
+        isAuthenticating,
+        preAuthAction,
+        replace,
+        redirectPath,
+        ...props
+      } = authProps;
+
+      React.useEffect(() => {
+        if (loading) {
+          if (preAuthAction) {
+            preAuthAction();
+          }
+          setLoading(false);
+        }
+      }, []);
+
+      if (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 {...props} />
+            )}
+          </React.Fragment>
+        );
+      } else if (isAuthenticated) {
+        return <DecoratedComponent {...props} />;
+      } else if (isAuthenticating) {
+        return <AuthenticatingComponent {...props} />;
+      } else {
+        return <FailureComponent {...authProps} />;
+      }
+    };
+
+    UserAuthWrapper.displayName = `${wrapperDisplayName}(${displayName})`;
+    UserAuthWrapper.propTypes = {
+      isAuthenticated: PropTypes.bool,
+      isAuthenticating: PropTypes.bool,
+    };
+    UserAuthWrapper.defaultProps = {
+      isAuthenticating: false,
+    };
+
+    return hoistStatics(UserAuthWrapper, DecoratedComponent);
+  }
+
+  return wrapComponent;
+};

src/connectedAuthWrapper.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux'
+import authWrapper from './authWrapper.js'
 
-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/connectedAuthWrapper.native.js

@@ -0,0 +1,28 @@
+import { connect } from "react-redux";
+import authWrapper from "./authWrapper.native";
+
+const connectedDefaults = {
+  authenticatingSelector: () => false,
+};
+
+export default (args) => {
+  const { authenticatedSelector, authenticatingSelector, preAuthAction } = {
+    ...connectedDefaults,
+    ...args,
+  };
+
+  return (DecoratedComponent) =>
+    connect(
+      (state, ownProps) => ({
+        isAuthenticated: authenticatedSelector(state, ownProps),
+        isAuthenticating: authenticatingSelector(state, ownProps),
+      }),
+      (dispatch) => ({
+        preAuthAction: () => {
+          if (preAuthAction) {
+            dispatch(preAuthAction());
+          }
+        },
+      })
+    )(authWrapper(args)(DecoratedComponent));
+};