diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index ec32f9b..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "presets": ["es2015", "react", "stage-0"],
- "plugins": [
- ["transform-decorators-legacy"],
- ]
-}
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index daf7241..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,7 +0,0 @@
-lib
-examples/**/bundle.js
-node_modules
-coverage
-npm-debug.log
-.idea/
-_book
diff --git a/src/index.js b/.nojekyll
similarity index 100%
rename from src/index.js
rename to .nojekyll
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index f5d175b..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-sudo: false
-language: node_js
-cache:
- directories:
- - node_modules
-node_js:
- - "8"
- - "10"
- - "12"
-env:
- - REACT_ROUTER_VERSION=3
- - REACT_ROUTER_VERSION=4
-script:
- - yarn run lint
- - ./runTests.sh
-after_success:
-- cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 7166701..0000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1,88 +0,0 @@
-## [HEAD](https://github.com/mjrussell/redux-auth-wrapper/compare/v3.0.0...HEAD)
--Nothing yet
-
-## [3.0.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v2.1.0...v3.0.0)
-- **Breaking Change:** Fix deprecated lifecyle method for react 16.3+ support[#250](https://github.com/mjrussell/redux-auth-wrapper/pull/250) (contributed by @JackHowa)
-- Dependency upgrades for react 16.3 support
-
-## [2.1.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v2.0.3...v2.1.0)
-- Upgrade deps and relax bounds [#244](https://github.com/mjrussell/redux-auth-wrapper/pull/244)
-
-## [2.0.3](https://github.com/mjrussell/redux-auth-wrapper/compare/v2.0.2...v2.0.3)
-- Warning fix for React 16.3+ [#235](https://github.com/mjrussell/redux-auth-wrapper/pull/235) (contributed by @tpai)
-
-## [2.0.2](https://github.com/mjrussell/redux-auth-wrapper/compare/v2.0.1...v2.0.2)
-- **Bugfix:** Prevents unnecessary re-renders on child subcomponents on state changes [#187](https://github.com/mjrussell/redux-auth-wrapper/issues/187)
-
-## [2.0.1](https://github.com/mjrussell/redux-auth-wrapper/compare/v2.0.0...v2.0.1)
-- **Bugfix:** Adds empty main with index.js for webpack ddl support (Contributed by @victorouse)
-
-## [2.0.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v1.1.0...v2.0.0)
-**BREAKING CHANGES** Version 2.0 include several new changes! See https://mjrussell.github.io/redux-auth-wrapper/docs/Migrating.html for migrating from 1.x
-
-## [1.1.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v1.0.0...v1.1.0)
-- **Feature:** Support hash fragments in building the redirect location [#121](https://github.com/mjrussell/redux-auth-wrapper/issues/121)
-- **Feature:** Upgrade to proptypes package after React 15.5 deprecation [#147](https://github.com/mjrussell/redux-auth-wrapper/pull/147) (Contributed by @jruhland)
-
-## [1.0.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.10.0...v1.0.0)
-- **Bugfix:** Redirection preserves query params in the redirect path. [#111](https://github.com/mjrussell/redux-auth-wrapper/pull/111)
-
-## [0.10.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.9.0...v0.10.0)
-- **Feature:** `allowRedirectBack` can also take a selector function that returns a bool instead of a bool. [#93](https://github.com/mjrussell/redux-auth-wrapper/pull/93) (Contributed by @oyeanuj)
-
-## [0.9.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.8.0...v0.9.0)
-- **Bugfix:** Don't pass down auth wrapper props besides authData [#81](https://github.com/mjrussell/redux-auth-wrapper/issues/81)
-- **Feature:** Add propMapper function to restrict passed through props [#28](https://github.com/mjrussell/redux-auth-wrapper/issues/28)
-- **Bugfix/Breaking Change:** onEnter now checks isAuthenticating for redirection [#89](https://github.com/mjrussell/redux-auth-wrapper/issues/89)
-- **Feature:** onEnter selectors receive nextState as the second argument instead of null [#90](https://github.com/mjrussell/redux-auth-wrapper/issues/90)
-
-## [0.8.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.7.0...v0.8.0)
-- **Feature:** FailureComponent to not redirect and either hide or show a different component on auth failure [#61](https://github.com/mjrussell/redux-auth-wrapper/pull/61). (Contributed by @mehiel)
-- **Feature:** Pass auth data as props to Loading Component [#75](https://github.com/mjrussell/redux-auth-wrapper/issues/75)
-- **Breaking Change:** When rendering an "empty" component such as the default LoadingComponent and when the user is about
-to be redirect, return `null` so React will omit it instead of an empty `div`.
-- **Breaking Change:** Don't need to import React Native compatible from lib.
-
-## [0.7.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.6.0...v0.7.0)
-- **Bugfix:** Don't render subroutes as children in default LoadingComponent [#63](https://github.com/mjrussell/redux-auth-wrapper/pull/63)
-- **Bugfix/Breaking Change:** Change default LoadingComponent to a `div` and use the React native default empty element [#63](https://github.com/mjrussell/redux-auth-wrapper/pull/63)
-
-## [0.6.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.5.2...v0.6.0)
-- **Feature:** `failureRedirectPath` can be a function of state and props [#57](https://github.com/mjrussell/redux-auth-wrapper/pull/57)
-- **Feature:** option to change the query param name with `redirectQueryParamName` [#57](https://github.com/mjrussell/redux-auth-wrapper/pull/57)
-
-## [0.5.2](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.5.1...v0.5.2)
-- **BugFix:** Fixes bug introduced in v0.5.1 that prevented redirection when only isAuthenticating changed [#49](https://github.com/mjrussell/redux-auth-wrapper/issues/49)
-
-## [0.5.1](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.5.0...v0.5.1)
-- **BugFix:** Adds safeguard to prevent infinite redirects from the wrapper [#45](https://github.com/mjrussell/redux-auth-wrapper/pull/45)
-
-## [0.5](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.4.0...v0.5.0)
-- **Feature:** Adds `isAuthenticating` selector and `LoadingComponent`
-[#35](https://github.com/mjrussell/redux-auth-wrapper/pull/35). (Contributed by @cab)
-
-## [0.4](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.3.0...v0.4.0)
-- **Feature:** Adds React Native support [#33](https://github.com/mjrussell/redux-auth-wrapper/pull/33)
-
-## [0.3](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.2.1...v0.3.0)
-- **Feature:** Adds `ownProps` param to `authSelector` [#21](https://github.com/mjrussell/redux-auth-wrapper/pull/21)
-- **Feature:** Adds `onEnter` function for Server Side Rendering support [#19](https://github.com/mjrussell/redux-auth-wrapper/pull/19)
-- **Breaking:** Removes arg style syntax that was deprecated in 0.2
-
-## [0.2.1](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.2.0...v0.2.1)
-- router context is only required if no redirectAction
-
-## [0.2.0](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.1.1...v0.2.0)
-- **Feature:** new redirectAction config arg, removes dependency on a redux-routing implementation [#13](https://github.com/mjrussell/redux-auth-wrapper/issues/13)
-- **Feature:** New config object syntax for AuthWrapper [#12](https://github.com/mjrussell/redux-auth-wrapper/issues/12)
-- **Deprecation:** Deprecates AuthWrapper args syntax [#12](https://github.com/mjrussell/redux-auth-wrapper/issues/12)
-- **Feature:** Hoists wrapped component's statics up to the returned component
-
-## [0.1.1](https://github.com/mjrussell/redux-auth-wrapper/compare/v0.1.0...v0.1.1)
-- Fixes the bad npm publish
-
-## [0.1.0](https://github.com/mjrussell/redux-auth-wrapper/compare/fcbf49d0abcae7075daa146c05edff1b735b3a16...v0.1.0)
-- First release!
-- Adds AuthWrapper with args syntax
-- Examples using Redux-Simple-Router (now React-Router-Redux)
-- Lots of tests
diff --git a/LICENSE.txt b/LICENSE.txt
deleted file mode 100644
index 337130e..0000000
--- a/LICENSE.txt
+++ /dev/null
@@ -1,19 +0,0 @@
-Copyright (c) 2016 Matthew Russell
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-of the Software, and to permit persons to whom the Software is furnished to do
-so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/SUMMARY.md b/SUMMARY.md
deleted file mode 100644
index 20dcbe9..0000000
--- a/SUMMARY.md
+++ /dev/null
@@ -1,16 +0,0 @@
-## Table of Contents
-
-* [Read Me](README.md)
-* [Getting Started](docs/Getting-Started/Overview.md)
- * [React Router 3](docs/Getting-Started/ReactRouter3.md)
- * [React Router 4](docs/Getting-Started/ReactRouter4.md)
- * [React Native](docs/Getting-Started/ReactNative.md)
- * [Hiding and Alternate Components](docs/Getting-Started/HidingAlternate.md)
- * [Nesting Wrappers](docs/Getting-Started/NestingWrappers.md)
-* [Migrating from V1](docs/Migrating.md)
-* [Troubleshooting](docs/Troubleshooting.md)
-* [API](docs/API.md)
-* Advanced Usage
- * [Integrating with other Routers](docs/AdvancedUsage/OtherRouters.md)
- * [React Router3 and SSR](docs/AdvancedUsage/ReactRouter3.md)
- * [Advanced Redux](docs/AdvancedUsage/Redux.md)
diff --git a/_layouts/website/page.html b/_layouts/website/page.html
deleted file mode 100644
index 9f0e253..0000000
--- a/_layouts/website/page.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends template.self %}
-
-{% block head %}
- {{ super() }}
-
-{% endblock %}
diff --git a/book.json b/book.json
deleted file mode 100644
index 57b4032..0000000
--- a/book.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "gitbook": "3.2.2",
- "plugins": ["prism@1.0.0", "-highlight", "github", "github-edit", "heading-anchors", "ga@1.0.1"],
- "pluginsConfig": {
- "github": {
- "url": "https://github.com/mjrussell/redux-auth-wrapper"
- },
- "ga": {
- "token": "UA-102064405-1"
- },
- "github-edit": {
- "repo": "mjrussell/redux-auth-wrapper",
- "branch": "master"
- },
- "sharing": {
- "facebook": false,
- "twitter": true,
- "google": false,
- "weibo": false,
- "instapaper": false,
- "vk": false
- },
- "theme-default": {
- "styles": { }
- }
- }
-}
diff --git a/docs/API.html b/docs/API.html
new file mode 100644
index 0000000..02cd32f
--- /dev/null
+++ b/docs/API.html
@@ -0,0 +1,558 @@
+
+
+
+
+
+
+ API · GitBook
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The returned Component after applying a Component to the HOC takes as props isAuthenticated and isAuthenticating, both of which are booleans. isAuthenticating defaults to false.
Because routes in React Router 3 are not required to have paths, you can use nesting to protect multiple routes without applying
+the wrapper multiple times.
One thing to note is that if you use named children routes (TODO example) then you may need to use a different approach than cloneElement with the children prop.
+
Server Side Rendering
+
If you are using redux-auth-wrapper for redirection in apps that use Server Side Rendering you may need to use the onEnter. This is because in most cases your server should redirect users before sending down the client HTML.
During onEnter, selectors such as authenticatedSelector, authenticatingSelector, and failureRedirectPath (if you are using)
+the function variation, will receive react-router's nextState as their second argument instead of the component props.
+
With nested wrappers
+
To implement SSR with nested wrappers, you will have to provide a function to chain onEnter functions of each wrapper.
+
const onEnterAuth =createOnEnter({
+ redirectPath:'unprotected',
+ authenticatedSelector: state => state.user !==null,
+})
+
+const userIsAuthenticated =connectedReduxRedirect({
+ redirectPath:'unprotected',
+ authenticatedSelector: state => state.user !==null,
+})
+
+const onEnterAdmin =createOnEnter({
+ redirectPath:'home',
+ authenticatedSelector: state => state.user.isAdmin ===false,
+})
+
+const userIsAdmin =connectedReduxRedirect({
+ redirectPath:'home',
+ authenticatedSelector: state => state.user.isAdmin ===false,
+})
+
+const getRoutes =(store)=>{
+ const connect =(fn)=>(nextState, replaceState)=>fn(store, nextState, replaceState);
+
+ //This executes the parent onEnter first, going from left to right.
+ // `replace` has to be wrapped because we want to stop executing `onEnter` hooks
+ // after the first call to `replace`.
+ const onEnterChain =(...listOfOnEnters)=>(store, nextState, replace)=>{
+ let redirected =false;
+ const wrappedReplace =(...args)=>{
+ replace(...args);
+ redirected =true;
+ };
+ listOfOnEnters.forEach((onEnter)=>{
+ if(!redirected){
+ onEnter(store, nextState, wrappedReplace);
+ }
+ });
+ };
+
+ return(
+ <Route>
+ <Route path="/" component={App}>
+ <Route path="unprotected" component={Unprotected}/>
+ <Route path="home"
+ component={userIsAuthenticated(Home)}
+ onEnter={connect(onEnterChain(onEnterAuth))}/>
+ <Route path="admin"
+ component={userIsAuthenticated(userIsAdmin(Admin))}
+ onEnter={connect(onEnterChain(onEnterAuth, onEnterAdmin))}/>
+ </Route>
+ </Route>
+ );
+};
+
Dispatching an Additional Redux Action on Redirect
+
You may want to dispatch an additional redux action when a redirect occurs. One example of this is to display a notification message
+that the user is being redirected or doesn't have access to that protected resource. To do this, you can chain the redirectAction
+parameter using redux-thunk middleware. It depends slightly on if you are using a redux + routing solution or just React Router.
+
Note: make sure you add redux-thunk to your store's middleware or else the following will not work
+
Using react-router-redux or redux-router and dispatching an extra redux action in the wrapper
+
import{ replace } from 'react-router-redux';// Or your redux-router equivalent
+import{ connectedReduxRedirect } from 'redux-auth-wrapper/history3/redirect'
+import addNotification from './notificationActions';
+
+// Admin Authorization, redirects non-admins to /app
+exportconst userIsAdmin =connectedReduxRedirect({
+ redirectPath:'/app',
+ allowRedirectBack:false,
+ authenticatedSelector: state => state.user !==null&& state.user.isAdmin,
+ redirectAction:(newLoc)=>(dispatch)=>{
+ dispatch(replace(newLoc));
+ dispatch(addNotification({ message:'Sorry, you are not an administrator'}));
+ },
+ wrapperDisplayName:'UserIsAdmin'
+})
+
+
Using React Router with history singleton and extra redux action
+
import{ browserHistory } from 'react-router';// react router 3
+import addNotification from './notificationActions';
+
+// Admin Authorization, redirects non-admins to /app
+exportconst userIsAdmin =connectedReduxRedirect({
+ redirectPath:'/app',
+ allowRedirectBack:false,
+ authenticatedSelector: state => state.user !==null&& state.user.isAdmin,
+ redirectAction:(newLoc)=>(dispatch)=>{
+ browserHistory.replace(newLoc);
+ dispatch(addNotification({ message:'Sorry, you are not an administrator'}));
+ },
+ wrapperDisplayName:'UserIsAdmin'
+})
+
In addition to controlling what pages users can access in an application, another common requirement is to hide or display different elements on the page depending on the user's permissions. redux-auth-wrapper also provides an HOC that makes this easy to do in your application.
+
Hiding a Component
+
If you want to hide a component, you can import the connectedAuthWrapper HOC. When the authenticatedSelector returns true, the wrapped component will be rendered and passed all props from the parent. When the authenticatedSelector returns false, no component will be rendered.
+
Here is an example that hides a link from a non-admin user.
+
import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
+
+const visibleOnlyAdmin =connectedAuthWrapper({
+ authenticatedSelector: state => state.user !==null&& state.user.isAdmin,
+ wrapperDisplayName:'VisibleOnlyAdmin',
+})
+
+// Applying to a function component for simplicity but could be Class or createClass component
+const AdminOnlyLink =visibleOnlyAdmin(()=><Link to='/admin'>Admin Section</Link>)
+
+
Displaying an Alternate Component
+
You can also display a component when the authenticatedSelector returns false. Simply pass the FailureComponent property to the authWrapper.
+
import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
+
+const visibleOnlyAdmin =connectedAuthWrapper({
+ authenticatedSelector: state => state.user !==null&& state.user.isAdmin,
+ wrapperDisplayName:'AdminOrHomeLink',
+ FailureComponent:()=><Link to='/home'>Home Section</Link>
+})
+
+// Applying to a function component for simplicity but could be Class or createClass component
+const AdminOnlyLink =visibleOnlyAdmin(()=><Link to='/admin'>Admin Section</Link>)
+
+
You can also easily wrap the call to authWrapper in a function to make it more flexible to apply throughout your code:
+
const adminOrElse =(Component, FailureComponent)=>connectedAuthWrapper({
+ authenticatedSelector: state => state.user !==null&& state.user.isAdmin,
+ wrapperDisplayName:'AdminOrElse',
+ FailureComponent
+})(Component)
+
+// Show Admin dashboard to admins and user dashboard to regular users
+<Route path='/dashboard' component={adminOrElse(AdminDashboard, UserDashboard)}/>
+
+
Unconnected Wrapper
+
If you don't want to have redux-auth-wrapper connect your selector automatically for you, you can use the un-connected version. This might be useful if you are already connecting the component and dont want the extra overhead of another connect, or want to pass the props in via traditional state.
+
import authWrapper from 'redux-auth-wrapper/authWrapper'
+
+const visibleOnlyAdmin =authWrapper({
+ wrapperDisplayName:'VisibleOnlyAdmin',
+})
+
+// Applying to a function component for simplicity but could be Class or createClass component
+const AdminOnlyLink =visibleOnlyAdmin(()=><Link to='/admin'>Admin Section</Link>)
+
+classMyComponentextendsComponent{
+
+ ...
+
+ render(){
+ <div>
+ <AdminOnlyLink isAuthenticated={this.state.isAuthenticated}/>
+ </div>
+ }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/Getting-Started/HidingAlternate.md b/docs/Getting-Started/HidingAlternate.md
deleted file mode 100644
index 400c767..0000000
--- a/docs/Getting-Started/HidingAlternate.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# Hiding and Displaying Alternate Components
-
-In addition to controlling what pages users can access in an application, another common requirement is to hide or display different elements on the page depending on the user's permissions. redux-auth-wrapper also provides an HOC that makes this easy to do in your application.
-
-## Hiding a Component
-
-If you want to hide a component, you can import the `connectedAuthWrapper` HOC. When the `authenticatedSelector` returns true, the wrapped component will be rendered and passed all props from the parent. When the `authenticatedSelector` returns false, no component will be rendered.
-
-Here is an example that hides a link from a non-admin user.
-```js
-import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
-
-const visibleOnlyAdmin = connectedAuthWrapper({
- authenticatedSelector: state => state.user !== null && state.user.isAdmin,
- wrapperDisplayName: 'VisibleOnlyAdmin',
-})
-
-// Applying to a function component for simplicity but could be Class or createClass component
-const AdminOnlyLink = visibleOnlyAdmin(() => Admin Section)
-```
-
-## Displaying an Alternate Component
-
-You can also display a component when the `authenticatedSelector` returns false. Simply pass the `FailureComponent` property to the `authWrapper`.
-
-```js
-import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
-
-const visibleOnlyAdmin = connectedAuthWrapper({
- authenticatedSelector: state => state.user !== null && state.user.isAdmin,
- wrapperDisplayName: 'AdminOrHomeLink',
- FailureComponent: () => Home Section
-})
-
-// Applying to a function component for simplicity but could be Class or createClass component
-const AdminOnlyLink = visibleOnlyAdmin(() => Admin Section)
-```
-
-You can also easily wrap the call to `authWrapper` in a function to make it more flexible to apply throughout your code:
-
-```js
-const adminOrElse = (Component, FailureComponent) => connectedAuthWrapper({
- authenticatedSelector: state => state.user !== null && state.user.isAdmin,
- wrapperDisplayName: 'AdminOrElse',
- FailureComponent
-})(Component)
-
-// Show Admin dashboard to admins and user dashboard to regular users
-
-```
-
-## Unconnected Wrapper
-
-If you don't want to have redux-auth-wrapper connect your selector automatically for you, you can use the un-connected version. This might be useful if you are already connecting the component and dont want the extra overhead of another `connect`, or want to pass the props in via traditional state.
-
-```js
-import authWrapper from 'redux-auth-wrapper/authWrapper'
-
-const visibleOnlyAdmin = authWrapper({
- wrapperDisplayName: 'VisibleOnlyAdmin',
-})
-
-// Applying to a function component for simplicity but could be Class or createClass component
-const AdminOnlyLink = visibleOnlyAdmin(() => Admin Section)
-
-class MyComponent extends Component {
-
- ...
-
- render() {
-
Both the redirection HOCs and authWrapper can be nested (composed) together to create additional constraints for auth. This is especially useful when you want to provide authorization checks, such as checking a user is logged in and also an administrator.
+
For example, we can create a button that will only display for logged in users named Bob:
When nesting redirection HOCs, it is important to pay attention to the order of the nesting, especially if you are using a different redirectPath or allowRedirectBack. Consider the following:
+
const userIsAuthenticated =connectedRouterRedirect({
+ redirectPath:'/login',
+ authenticatedSelector: state => state.user !==null,
+ wrapperDisplayName:'UserIsAuthenticated'
+})
+
+const userIsAdmin =connectedRouterRedirect({
+ authenticatedSelector: state => state.user.isAdmin,
+ redirectPath:'/app',
+ wrapperDisplayName:'UserIsAdmin',
+ allowRedirectBack:false
+})
+
+// Now to secure the component: first check if the user is authenticated, and then check if the user is an admin
+<Route path="admin" component={userIsAuthenticated(userIsAdmin(Admin))}/>
+
+
Because the userIsAuthenticated check happens first, if the users aren't logged in they will be sent to the /login first, skipping the admin check all together. Then once they've authenticated, they can be checked for if they are an admin. Otherwise, they would be sent to /app which might also be protected by a userIsAuthenticated and then get sent to /login from there (assuming another auth check). This would result in the user ending up at /app once they've authenticated, instead of at /admin if they are an admin but weren't logged in at the time.
+
Chaining using compose
+
Since Higher Order Components are functions, they can easily be chained together using compose to prevent accidentally applying them in the wrong order. compose can be imported from redux, or recompose:
+
import{ compose } from 'redux'
+
+// userIsAuthenticated and userIsAdmin from above
+const userIsAdminChain =compose(userIsAuthenticated, userIsAdmin)
+
+// Now to secure the component, you don't have to think which order to apply!
+<Route path="admin" component={userIsAdminChain(Admin)}/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/Getting-Started/NestingWrappers.md b/docs/Getting-Started/NestingWrappers.md
deleted file mode 100644
index 6a8feea..0000000
--- a/docs/Getting-Started/NestingWrappers.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Nesting Wrappers
-
-Both the redirection HOCs and `authWrapper` can be nested (composed) together to create additional constraints for auth. This is especially useful when you want to provide authorization checks, such as checking a user is logged in and also an administrator.
-
-For example, we can create a button that will only display for logged in users named Bob:
-
-```js
-const onlyBob = authWrapper({
- authenticatedSelector: state => state.user.firstName === 'Bob'
- wrapperDisplayName: 'UserIsOnlyBob',
-})
-
-const OnlyBobButton = onlyBob(MyButton)
-```
-
-When nesting redirection HOCs, it is important to pay attention to the order of the nesting, especially if you are using a different `redirectPath` or `allowRedirectBack`. Consider the following:
-
-``` js
-const userIsAuthenticated = connectedRouterRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user !== null,
- wrapperDisplayName: 'UserIsAuthenticated'
-})
-
-const userIsAdmin = connectedRouterRedirect({
- authenticatedSelector: state => state.user.isAdmin,
- redirectPath: '/app',
- wrapperDisplayName: 'UserIsAdmin',
- allowRedirectBack: false
-})
-
-// Now to secure the component: first check if the user is authenticated, and then check if the user is an admin
-
-```
-
-Because the `userIsAuthenticated` check happens first, if the users aren't logged in they will be sent to the `/login` first, skipping the admin check all together. Then once they've authenticated, they can be checked for if they are an admin. Otherwise, they would be sent to `/app` which might also be protected by a `userIsAuthenticated` and then get sent to `/login` from there (assuming another auth check). This would result in the user ending up at `/app` once they've authenticated, instead of at `/admin` if they are an admin but weren't logged in at the time.
-
-#### Chaining using compose
-
-Since Higher Order Components are functions, they can easily be chained together using `compose` to prevent accidentally applying them in the wrong order. `compose` can be imported from redux, or recompose:
-
-```js
-import { compose } from 'redux'
-
-// userIsAuthenticated and userIsAdmin from above
-const userIsAdminChain = compose(userIsAuthenticated, userIsAdmin)
-
-// Now to secure the component, you don't have to think which order to apply!
-
-```
diff --git a/docs/Getting-Started/Overview.html b/docs/Getting-Started/Overview.html
new file mode 100644
index 0000000..936225f
--- /dev/null
+++ b/docs/Getting-Started/Overview.html
@@ -0,0 +1,524 @@
+
+
+
+
+
+
+ Getting Started · GitBook
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
redux-auth-wrapper makes use of higher order components to decouple the rendering logic in your components from the permissions a user might have. If you are unfamiliar with using higher order components or where to apply them, please read below, otherwise skip to the Tutorials.
+
For a great read on what higher order components are, check out Dan Abramov's blog post:
A higher-order component is just a function that takes an existing component and returns another component that wraps it
+
+
Where to apply
+
Higher order components are extremely powerful tools for adding logic to your components and keeping them easy to understand. It is important, however, to apply HOCs in the proper place. Failure to do so can cause subtle bugs and performance problems in your code.
+
In all of the following examples, we use the hoc authWrapper, but this advice applies for all HOCs (even ones not from redux-auth-wrapper).
import MyComponent from './component/mycomponent.js'
+
+const MyAuthComponent =authWrapper(MyComponent)
+
+
Not Safe to Apply
+
The following are all not safe because they create a new component over and over again, preventing react from considering these the "same" component and causing mounting/unmounting loops.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/Getting-Started/Overview.md b/docs/Getting-Started/Overview.md
deleted file mode 100644
index a8335f4..0000000
--- a/docs/Getting-Started/Overview.md
+++ /dev/null
@@ -1,111 +0,0 @@
-# Overview
-
-## Higher Order Components
-
-redux-auth-wrapper makes use of higher order components to decouple the rendering logic in your components from the permissions a user might have. If you are unfamiliar with using higher order components or where to apply them, please read below, otherwise skip to the [Tutorials](#tutorials).
-
-For a great read on what higher order components are, check out Dan Abramov's blog post:
-
-[Higher Order Components](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.ao9jjxx89).
-> A higher-order component is just a function that takes an existing component and returns another component that wraps it
-
-### Where to apply
-
-Higher order components are extremely powerful tools for adding logic to your components and keeping them easy to understand. It is important, however, to apply HOCs in the proper place. Failure to do so can cause subtle bugs and performance problems in your code.
-
-In all of the following examples, we use the hoc `authWrapper`, but this advice applies for all HOCs (even ones not from redux-auth-wrapper).
-
-#### Safe to Apply
-
-Directly inside ReactDOM.render:
-```js
-ReactDOM.render(
-
-
-
-
- ...
-
-
- ,
- document.getElementById('mount')
-)
-```
-
-Separate route config file:
-```js
-const routes = (
-
-
- ...
-
-)
-
-ReactDOM.render(
-
-
- {routes}
-
- ,
- document.getElementById('mount')
-)
-```
-
-Applied in the component file (es7):
-```js
-@authWrapper
-export default class MyComponent extends Component {
- ...
-}
-```
-
-Applied in the component file (es6):
-```js
-class MyComponent extends Component {
- ...
-}
-export default UserIsAuthenticated(MyComponent)
-```
-
-Applied outside the component file:
-```js
-import MyComponent from './component/mycomponent.js'
-
-const MyAuthComponent = authWrapper(MyComponent)
-```
-
-#### Not Safe to Apply
-
-The following are all not safe because they create a new component over and over again, preventing react from considering these the "same" component and causing mounting/unmounting loops.
-
-Inside of render:
-```js
-import MyComponent from './component/MyComponent.js'
-
-class MyParentComponent extends Component {
- render() {
- const MyAuthComponent = authWrapper(MyComponent)
- return
- }
-}
-```
-
-Inside of any `getComponent` (react router 3):
-```js
-const routes = (
-
- {
- cb(null, authWrapper(Foo))
- }} />
- ...
-
-)
-```
-
-## Tutorials
-
-* [React Router 3 Tutorial](ReactRouter3.md)
-* [React Router 4 Tutorial](ReactRouter4.md)
-* [React Native Tutorial](ReactNative.md)
-* [Hiding and Alternative Components](HidingAlternate.md)
-* [Nesting Wrappers](NestingWrappers.md)
diff --git a/docs/Getting-Started/ReactNative.html b/docs/Getting-Started/ReactNative.html
new file mode 100644
index 0000000..b021ce0
--- /dev/null
+++ b/docs/Getting-Started/ReactNative.html
@@ -0,0 +1,437 @@
+
+
+
+
+
+
+ React Native · GitBook
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
At first glance, it appears that redux-auth-wrapper is unnecessary in React Router 3 because of the onEnter method.
+
onEnter is great, and useful in certain situations. However, here are some common auth problems onEnter does not solve:
+
+
Decide authentication/authorization from redux store data (there are some workarounds)
+
Recheck auth when the store changes but not the current route (not possible!)
+
+
Instead, we can use redux-auth-wrapper to protect React Router 3 routes with auth checks to more easily interact with our redux store.
+
Securing a Route
+
To add redirection to your app with React Router 3, import the following helper:
+
import{ connectedRouterRedirect } from 'redux-auth-wrapper/history3/redirect'
+
+
The connectedRouterRedirect will build the redirect higher order component, but we have to first pass in a config object. The wrapper needs to know how to determine if a user is allowed to access the route.
+
const userIsAuthenticated =connectedRouterRedirect({
+ // The url to redirect user to if they fail
+ redirectPath:'/login',
+ // Determine if the user is authenticated or not
+ authenticatedSelector: state => state.user !==null,
+ // A nice display name for this check
+ wrapperDisplayName:'UserIsAuthenticated'
+})
+
+
userIsAuthenticated is a Higher Order Component, so we can apply it to the component we want to protect. You can do this in many places, see where to apply the wrappers for more details. In our case, we apply it directly in the route definition.
When the user navigates to /profile, one of the following occurs:
+
+
If The state.user is null:
+
The user is redirected to /login?redirect=%2Fprofile
+
Notice the url contains the query parameter redirect for sending the user back to after you log them into your app
+
+
Otherwise:
+
The <Profile> component is rendered
+
+
+
Redirecting from Login
+
We've only done half of the work however. When a user logs into the login page, we want to send them back to /profile. Additionally, if a user is already logged in, but navigates to our login page, we may want to send them to a landing page (/landing). Luckily we can easily do both of these with another wrapper.
+
import locationHelperBuilder from 'redux-auth-wrapper/history3/locationHelper'
+
+const locationHelper =locationHelperBuilder({})
+
+const userIsNotAuthenticated =connectedRouterRedirect({
+ // This sends the user either to the query param route if we have one, or to the landing page if none is specified and the user is already logged in
+ redirectPath:(state, ownProps)=> locationHelper.getRedirectQueryParam(ownProps)||'/landing',
+ // This prevents us from adding the query parameter when we send the user away from the login page
+ allowRedirectBack:false,
+ // Determine if the user is authenticated or not
+ authenticatedSelector: state => state.user.data !==null,
+ // A nice display name for this check
+ wrapperDisplayName:'UserIsNotAuthenticated'
+})
+
The locationHelper requires the location object in props. If the component is not rendered as part of a route component then you must use the withRouter HOC from react-router:
+
withRouter(userIsNotAuthenticated(Login))
+
+
Displaying an AuthenticatingComponent Component
+
Its often useful to display some sort of loading component or animation when you are checking if the user's credentials are valid or if the user is already logged in. We can add a loading component to both our Login and Profile page easily:
+
When authenticatingSelector returns true, no redirection will be performed and the the specified AuthenticatingComponent will be displayed. If no AuthenticatingComponent is specified, then no component will be rendered (null).
+
const userIsAuthenticated =connectedRouterRedirect({
+ redirectPath:'/login',
+ authenticatedSelector: state => state.user.data.!==null,
+ wrapperDisplayName:'UserIsAuthenticated'
+ // Returns true if the user auth state is loading
+ authenticatingSelector: state => state.user.isLoading,
+ // Render this component when the authenticatingSelector returns true
+ AuthenticatingComponent: LoadingSpinner,
+})
+
+
You can also add an authenticatingSelector and AuthenticatingComponent
+
Integrating with redux-based routing
+
If you want to dispatch a redux action to perform navigation instead of interacting directly with the history/router object then you can pass the redux action creator to redirectAction. Note that using redirectAction is not required if you use redux-based or redux-integrated routing, it only changes how the route change is triggered in the client.
+
To do this, swap out the import of connectedRouterRedirect for connectedReduxRedirect and pass the redirectAction parameter to the config object:
+
import{ connectedReduxRedirect } from 'redux-auth-wrapper/history3/redirect'
+import{ routerActions } from 'react-router-redux'
+
+const userIsAuthenticated =connectedReduxRedirect({
+ redirectPath:'/login',
+ authenticatedSelector: state => state.user !==null,
+ wrapperDisplayName:'UserIsAuthenticated',
+ // This should be a redux action creator
+ redirectAction: routerActions.replace,
+})
+
+
Next Steps
+
Check out the examples or browse the API documentation. If you are using server side rendering (SSR) with React Router 3, you should also check out the Server Side Rendering documentation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/Getting-Started/ReactRouter3.md b/docs/Getting-Started/ReactRouter3.md
deleted file mode 100644
index 1f21e3d..0000000
--- a/docs/Getting-Started/ReactRouter3.md
+++ /dev/null
@@ -1,121 +0,0 @@
-# React Router 3 Redirection
-
-At first glance, it appears that redux-auth-wrapper is unnecessary in React Router 3 because of the [onEnter](https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#onenternextstate-replace-callback) method.
-
-`onEnter` is great, and useful in certain situations. However, here are some common auth problems `onEnter` does not solve:
-* Decide authentication/authorization from redux store data (there are some [workarounds](https://github.com/CrocoDillon/universal-react-redux-boilerplate/blob/master/src/routes.js#L8))
-* Recheck auth when the store changes but not the current route (not possible!)
-
-Instead, we can use redux-auth-wrapper to protect React Router 3 routes with auth checks to more easily interact with our redux store.
-
-## Securing a Route
-
-To add redirection to your app with React Router 3, import the following helper:
-```js
-import { connectedRouterRedirect } from 'redux-auth-wrapper/history3/redirect'
-```
-
-The `connectedRouterRedirect` will build the redirect higher order component, but we have to first pass in a config object. The wrapper needs to know how to determine if a user is allowed to access the route.
-
-```js
-const userIsAuthenticated = connectedRouterRedirect({
- // The url to redirect user to if they fail
- redirectPath: '/login',
- // Determine if the user is authenticated or not
- authenticatedSelector: state => state.user !== null,
- // A nice display name for this check
- wrapperDisplayName: 'UserIsAuthenticated'
-})
-```
-
-`userIsAuthenticated` is a Higher Order Component, so we can apply it to the component we want to protect. You can do this in many places, see [where to apply the wrappers](Overview.md#where-to-apply) for more details. In our case, we apply it directly in the route definition.
-
-```js
-
-```
-
-When the user navigates to `/profile`, one of the following occurs:
-
-1. If The `state.user` is null:
-
- The user is redirected to `/login?redirect=%2Fprofile`
-
- *Notice the url contains the query parameter `redirect` for sending the user back to after you log them into your app*
-2. Otherwise:
-
- The `` component is rendered
-
-## Redirecting from Login
-
-We've only done half of the work however. When a user logs into the login page, we want to send them back to `/profile`. Additionally, if a user is already logged in, but navigates to our login page, we may want to send them to a landing page (`/landing`). Luckily we can easily do both of these with another wrapper.
-
-```js
-import locationHelperBuilder from 'redux-auth-wrapper/history3/locationHelper'
-
-const locationHelper = locationHelperBuilder({})
-
-const userIsNotAuthenticated = connectedRouterRedirect({
- // This sends the user either to the query param route if we have one, or to the landing page if none is specified and the user is already logged in
- redirectPath: (state, ownProps) => locationHelper.getRedirectQueryParam(ownProps) || '/landing',
- // This prevents us from adding the query parameter when we send the user away from the login page
- allowRedirectBack: false,
- // Determine if the user is authenticated or not
- authenticatedSelector: state => state.user === null,
- // A nice display name for this check
- wrapperDisplayName: 'UserIsNotAuthenticated'
-})
-```
-
-```js
-
-
-```
-
-The `locationHelper` requires the `location` object in props. If the component is not rendered as part of a route component then you must use the `withRouter` HOC from `react-router`:
-
-```js
-withRouter(userIsNotAuthenticated(Login))
-```
-
-## Displaying an AuthenticatingComponent Component
-
-Its often useful to display some sort of loading component or animation when you are checking if the user's credentials are valid or if the user is already logged in. We can add a loading component to both our Login and Profile page easily:
-
-When `authenticatingSelector` returns true, no redirection will be performed and the the specified `AuthenticatingComponent` will be displayed. If no `AuthenticatingComponent` is specified, then no component will be rendered (null).
-
-```js
-const userIsAuthenticated = connectedRouterRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user !== null,
- wrapperDisplayName: 'UserIsAuthenticated'
- // Returns true if the user auth state is loading
- authenticatingSelector: state => state.user.isLoading,
- // Render this component when the authenticatingSelector returns true
- AuthenticatingComponent: LoadingSpinner,
-})
-```
-
-You can also add an `authenticatingSelector` and `AuthenticatingComponent`
-
-## Integrating with redux-based routing
-
-If you want to dispatch a redux action to perform navigation instead of interacting directly with the history/router object then you can pass the redux action creator to `redirectAction`. Note that using `redirectAction` is not required if you use redux-based or redux-integrated routing, it only changes how the route change is triggered in the client.
-
-To do this, swap out the import of `connectedRouterRedirect` for `connectedReduxRedirect` and pass the `redirectAction` parameter to the config object:
-
-```js
-import { connectedReduxRedirect } from 'redux-auth-wrapper/history3/redirect'
-import { routerActions } from 'react-router-redux'
-
-const userIsAuthenticated = connectedReduxRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user !== null,
- wrapperDisplayName: 'UserIsAuthenticated',
- // This should be a redux action creator
- redirectAction: routerActions.replace,
-})
-```
-
-## Next Steps
-
-Check out the [examples](https://github.com/mjrussell/redux-auth-wrapper/tree/master/examples) or browse the [API documentation](/docs/API.md). If you are using server side rendering (SSR) with React Router 3, you should also check out the [Server Side Rendering](/docs/AdvancedUsage/ReactRouter3.md) documentation.
diff --git a/docs/Getting-Started/ReactRouter4.html b/docs/Getting-Started/ReactRouter4.html
new file mode 100644
index 0000000..8447d76
--- /dev/null
+++ b/docs/Getting-Started/ReactRouter4.html
@@ -0,0 +1,521 @@
+
+
+
+
+
+
+ React Router 4 · GitBook
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
note: this guide refers mainlys to React Router 4. React Router 5 is the same API and redux-auth-wrapper 3.x is fully compatible with React Router 5.
+
React Router 4 removed onEnter and onChange in favor of performing those routing logic actions inside component life cycle methods. This is what redux-auth-wrapper already does with Higher Order Components!
+
Using redux-auth-wrapper with React Router 4 is very similar to React Router 3 with a few changes.
+
Securing a Route
+
To add redirection to your app with React Router 4, import the following helper:
+
import{ connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect'
+
+
The connectedRouterRedirect will build the redirect higher order component, but we have to first pass in a config object. The wrapper needs to know how to determine if a user is allowed to access the route.
+
const userIsAuthenticated =connectedRouterRedirect({
+ // The url to redirect user to if they fail
+ redirectPath:'/login',
+ // If selector is true, wrapper will not redirect
+ // For example let's check that state contains user data
+ authenticatedSelector: state => state.user.data !==null,
+ // A nice display name for this check
+ wrapperDisplayName:'UserIsAuthenticated'
+})
+
+
userIsAuthenticated is a Higher Order Component, so we can apply it to the component we want to protect. You can do this in many places, see where to apply the wrappers for more details. In our case, we apply it directly in the route definition.
When the user navigates to /profile, one of the following occurs:
+
+
If The state.user is null:
+
The user is redirected to /login?redirect=%2Fprofile
+
Notice the url contains the query parameter redirect for sending the user back to after you log them into your app
+
+
Otherwise:
+
The <Profile> component is rendered
+
+
+
Redirecting from Login
+
We've only done half of the work however. When a user logs into the login page, we want to send them back to /profile. Additionally, if a user is already logged in, but navigates to our login page, we may want to send them to a landing page (/landing). Luckily we can easily do both of these with another wrapper.
+
import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper'
+
+const locationHelper =locationHelperBuilder({})
+
+const userIsNotAuthenticated =connectedRouterRedirect({
+ // This sends the user either to the query param route if we have one, or to the landing page if none is specified and the user is already logged in
+ redirectPath:(state, ownProps)=> locationHelper.getRedirectQueryParam(ownProps)||'/landing',
+ // This prevents us from adding the query parameter when we send the user away from the login page
+ allowRedirectBack:false,
+ // If selector is true, wrapper will not redirect
+ // So if there is no user data, then we show the page
+ authenticatedSelector: state => state.user.data ===null,
+ // A nice display name for this check
+ wrapperDisplayName:'UserIsNotAuthenticated'
+})
+
The locationHelper requires the location object in props. If the component is not rendered as part of a route component then you must use the withRouter HOC from react-router:
+
withRouter(userIsNotAuthenticated(Login))
+
+
Displaying an AuthenticatingComponent Component
+
Its often useful to display some sort of loading component or animation when you are checking if the user's credentials are valid or if the user is already logged in. We can add a loading component to both our Login and Profile page easily:
+
When authenticatingSelector returns true, no redirection will be performed and the the specified AuthenticatingComponent will be displayed. If no AuthenticatingComponent is specified, then no component will be rendered (null).
+
const userIsAuthenticated =connectedRouterRedirect({
+ redirectPath:'/login',
+ authenticatedSelector: state => state.user.data !==null,
+ wrapperDisplayName:'UserIsAuthenticated',
+ // Returns true if the user auth state is loading
+ authenticatingSelector: state => state.user.isLoading,
+ // Render this component when the authenticatingSelector returns true
+ AuthenticatingComponent: LoadingSpinner
+})
+
+
You can also add an authenticatingSelector and AuthenticatingComponent
+
Integrating with redux-based routing
+
If you want to dispatch a redux action to perform navigation instead of interacting directly with the history/router object then you can pass the redux action creator to redirectAction. Note that using redirectAction is not required if you use redux-based or redux-integrated routing, it only changes how the route change is triggered in the client.
+
To do this, swap out the import of connectedRouterRedirect for connectedReduxRedirect and pass the redirectAction parameter to the config object:
+
import{ connectedReduxRedirect } from 'redux-auth-wrapper/history4/redirect'
+import{ replace } from 'connected-react-router'
+
+const userIsAuthenticated =connectedReduxRedirect({
+ redirectPath:'/login',
+ authenticatedSelector: state => state.user !==null,
+ wrapperDisplayName:'UserIsAuthenticated',
+ // This should be a redux action creator
+ redirectAction: replace,
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/Getting-Started/ReactRouter4.md b/docs/Getting-Started/ReactRouter4.md
deleted file mode 100644
index 6b2ebc8..0000000
--- a/docs/Getting-Started/ReactRouter4.md
+++ /dev/null
@@ -1,121 +0,0 @@
-# React Router 4/5 Redirection
-
-_note: this guide refers mainlys to React Router 4. React Router 5 is the same API and redux-auth-wrapper 3.x is fully compatible with React Router 5._
-
-React Router 4 removed `onEnter` and `onChange` in favor of performing those routing logic actions inside component life cycle methods. This is what redux-auth-wrapper already does with Higher Order Components!
-
-Using redux-auth-wrapper with React Router 4 is very similar to React Router 3 with a few changes.
-
-## Securing a Route
-
-To add redirection to your app with React Router 4, import the following helper:
-```js
-import { connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect'
-```
-
-The `connectedRouterRedirect` will build the redirect higher order component, but we have to first pass in a config object. The wrapper needs to know how to determine if a user is allowed to access the route.
-
-```js
-const userIsAuthenticated = connectedRouterRedirect({
- // The url to redirect user to if they fail
- redirectPath: '/login',
- // If selector is true, wrapper will not redirect
- // For example let's check that state contains user data
- authenticatedSelector: state => state.user.data !== null,
- // A nice display name for this check
- wrapperDisplayName: 'UserIsAuthenticated'
-})
-```
-
-`userIsAuthenticated` is a Higher Order Component, so we can apply it to the component we want to protect. You can do this in many places, see [where to apply the wrappers](Overview.md#where-to-apply) for more details. In our case, we apply it directly in the route definition.
-
-```js
-
-```
-
-When the user navigates to `/profile`, one of the following occurs:
-
-1. If The `state.user` is null:
-
- The user is redirected to `/login?redirect=%2Fprofile`
-
- *Notice the url contains the query parameter `redirect` for sending the user back to after you log them into your app*
-2. Otherwise:
-
- The `` component is rendered
-
-## Redirecting from Login
-
-We've only done half of the work however. When a user logs into the login page, we want to send them back to `/profile`. Additionally, if a user is already logged in, but navigates to our login page, we may want to send them to a landing page (`/landing`). Luckily we can easily do both of these with another wrapper.
-
-```js
-import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper'
-
-const locationHelper = locationHelperBuilder({})
-
-const userIsNotAuthenticated = connectedRouterRedirect({
- // This sends the user either to the query param route if we have one, or to the landing page if none is specified and the user is already logged in
- redirectPath: (state, ownProps) => locationHelper.getRedirectQueryParam(ownProps) || '/landing',
- // This prevents us from adding the query parameter when we send the user away from the login page
- allowRedirectBack: false,
- // If selector is true, wrapper will not redirect
- // So if there is no user data, then we show the page
- authenticatedSelector: state => state.user.data === null,
- // A nice display name for this check
- wrapperDisplayName: 'UserIsNotAuthenticated'
-})
-```
-
-```js
-
-
-```
-
-The `locationHelper` requires the `location` object in props. If the component is not rendered as part of a route component then you must use the `withRouter` HOC from `react-router`:
-
-```js
-withRouter(userIsNotAuthenticated(Login))
-```
-
-## Displaying an AuthenticatingComponent Component
-
-Its often useful to display some sort of loading component or animation when you are checking if the user's credentials are valid or if the user is already logged in. We can add a loading component to both our Login and Profile page easily:
-
-When `authenticatingSelector` returns true, no redirection will be performed and the the specified `AuthenticatingComponent` will be displayed. If no `AuthenticatingComponent` is specified, then no component will be rendered (null).
-
-```js
-const userIsAuthenticated = connectedRouterRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user.data !== null,
- wrapperDisplayName: 'UserIsAuthenticated',
- // Returns true if the user auth state is loading
- authenticatingSelector: state => state.user.isLoading,
- // Render this component when the authenticatingSelector returns true
- AuthenticatingComponent: LoadingSpinner
-})
-```
-
-You can also add an `authenticatingSelector` and `AuthenticatingComponent`
-
-## Integrating with redux-based routing
-
-If you want to dispatch a redux action to perform navigation instead of interacting directly with the history/router object then you can pass the redux action creator to `redirectAction`. Note that using `redirectAction` is not required if you use redux-based or redux-integrated routing, it only changes how the route change is triggered in the client.
-
-To do this, swap out the import of `connectedRouterRedirect` for `connectedReduxRedirect` and pass the `redirectAction` parameter to the config object:
-
-```js
-import { connectedReduxRedirect } from 'redux-auth-wrapper/history4/redirect'
-import { replace } from 'connected-react-router'
-
-const userIsAuthenticated = connectedReduxRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user !== null,
- wrapperDisplayName: 'UserIsAuthenticated',
- // This should be a redux action creator
- redirectAction: replace,
-})
-```
-
-## Next Steps
-
-Check out the [examples](https://github.com/mjrussell/redux-auth-wrapper/tree/master/examples) or browse the [API documentation](/docs/API.md).
diff --git a/docs/Migrating.html b/docs/Migrating.html
new file mode 100644
index 0000000..de70313
--- /dev/null
+++ b/docs/Migrating.html
@@ -0,0 +1,534 @@
+
+
+
+
+
+
+ Migrating from V1 · GitBook
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
redux-auth-wrapper has really changed a lot since it was first designed as a small specialized utility for handling redirection with react-router-redux. Since then, it has been adopted by many developers and they've used it in numerous unforeseen and useful ways such as hiding components, displaying alternate components, and integrating with other routers. Additionally, redux-auth-wrapper needed to support two version of React Router (3 and 4) which had very different APIs. Therefore, version 2.x breaks redux-auth-wrapper into many more small, composable pieces. redux-auth-wrapper still provides a simple import for those looking to get started quickly with React Router, but also allows for developers to import the building blocks to create redirection wrappers that work with any router (or history directly). You can even use redux-auth-wrapper 2.x in a project without redux or even routing.
+
The largest change is that wrappers that perform redirection have been split from those that hide or display alternate components using FailureComponent.
+This made practical sense since using a FailureComponent disabled the redirection, yet the wrapper would still complain
+about missing redirection helpers like history even when they would not be used. Now you can use Failure Component wrappers
+without even a router.
+
Migrating redirection wrappers
+
The main changes are the following:
+
+
Combined authSelector and predicate into a single authenticatedSelector
+
No longer passed authData as a prop to child components. This was the return value of authSelector. If you need your auth data, just connect it at a lower level.
+
renamed LoadingComponent to AuthenticatingComponent
Removed mapProps. If you need to prevent passing down any props from redux-auth-wrapper, use mapProps from recompose.
+
+
Previously:
+
v1.x:
+
import{ UserAuthWrapper } from 'redux-auth-wrapper'
+
+const UserIsAuthenticated =UserAuthWrapper({
+ authSelector: state => state.user.data,
+ authenticatingSelector: state => state.user.isLoading,
+ LoadingComponent: Loading,
+ redirectAction: routerActions.replace,
+ wrapperDisplayName:'UserIsAuthenticated'
+})
+
+
v2.x:
+
// NOTE: use history3 because coming from React Router 2/3. If planning to upgrade to React Router 4 use history4
+import{ connectedReduxRedirect } from 'redux-auth-wrapper/history3/redirect'
+
+exportconst userIsAuthenticated =connectedReduxRedirect({
+ redirectPath:'/login',
+ authenticatedSelector: state => state.user.data !==null,
+ authenticatingSelector: state => state.user.isLoading,
+ AuthenticatingComponent: Loading,
+ redirectAction: routerActions.replace,
+ wrapperDisplayName:'UserIsAuthenticated'
+})
+
+
Note: If not using redirectAction, import connectedRouterRedirect instead.
+
Migrating failure and alternative components
+
+
Combined authSelector and predicate into a single authenticatedSelector
+
FailureComponent is optional now, not specifying it will render nothing (null) when the authenticatedSelector returns false
+
All properties besides authenticatedSelector, authenticatingSelector, FailureComponent, and wrapperDisplayName have been removed
+
+
Hiding Components
+
v1.x
+
import{ UserAuthWrapper } from 'redux-auth-wrapper'
+
+
+const VisibleOnlyAdmin =UserAuthWrapper({
+ authSelector: state => state.user,
+ wrapperDisplayName:'VisibleOnlyAdmin',
+ predicate: user => user.isAdmin,
+ FailureComponent:null
+})
+
+// Applying to a function component for simplicity but could be Class or createClass component
+const AdminOnlyLink =VisibleOnlyAdmin(()=><Link to='/admin'>Admin Section</Link>)
+
+
v2.x
+
import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
+
+const visibleOnlyAdmin =authWrapper({
+ authenticatedSelector: state => state.user !==null&& state.user.isAdmin,
+ wrapperDisplayName:'VisibleOnlyAdmin',
+})
+
+
Alternate Components
+
v1.x
+
import{ UserAuthWrapper } from 'redux-auth-wrapper'
+
+const AdminOrElse =(Component, FailureComponent)=>UserAuthWrapper({
+ authSelector: state => state.user,
+ wrapperDisplayName:'AdminOrElse',
+ predicate: user => user.isAdmin,
+ FailureComponent
+})(Component)
+
+// Show Admin dashboard to admins and user dashboard to regular users
+<Route path='/dashboard' component={AdminOrElse(AdminDashboard, UserDashboard)}/>
+
+
v2.x
+
import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
+
+const adminOrElse =(Component, FailureComponent)=>connectedAuthWrapper({
+ authenticatedSelector: state => state.user !==null&& state.user.isAdmin,
+ wrapperDisplayName:'AdminOrElse',
+ FailureComponent
+})(Component)
+
+// Show Admin dashboard to admins and user dashboard to regular users
+<Route path='/dashboard' component={adminOrElse(AdminDashboard, UserDashboard)}/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/Migrating.md b/docs/Migrating.md
deleted file mode 100644
index a8cc8ec..0000000
--- a/docs/Migrating.md
+++ /dev/null
@@ -1,118 +0,0 @@
-# Migrating from Version 1.x to Version 2.x
-
-## Motivation for 2.x
-
-redux-auth-wrapper has really changed a lot since it was first designed as a small specialized utility for handling redirection with react-router-redux. Since then, it has been adopted by many developers and they've used it in numerous unforeseen and useful ways such as hiding components, displaying alternate components, and integrating with other routers. Additionally, redux-auth-wrapper needed to support two version of React Router (3 and 4) which had very different APIs. Therefore, version 2.x breaks redux-auth-wrapper into many more small, composable pieces. redux-auth-wrapper still provides a simple import for those looking to get started quickly with React Router, but also allows for developers to import the building blocks to create redirection wrappers that work with any router (or history directly). You can even use redux-auth-wrapper 2.x in a project without redux or even routing.
-
-The largest change is that wrappers that perform redirection have been split from those that hide or display alternate components using `FailureComponent`.
-This made practical sense since using a FailureComponent disabled the redirection, yet the wrapper would still complain
-about missing redirection helpers like `history` even when they would not be used. Now you can use Failure Component wrappers
-without even a router.
-
-## Migrating redirection wrappers
-
-The main changes are the following:
-* Combined `authSelector` and `predicate` into a single `authenticatedSelector`
-* No longer passed `authData` as a prop to child components. This was the return value of `authSelector`. If you need your auth data, just connect it at a lower level.
-* renamed `LoadingComponent` to `AuthenticatingComponent`
-* renamed `failureRedirectPath` to `redirectPath`
-* `redirectPath` no longer defaults to `/login`
-* removed `FailureComponent` from the redirect helper, see [Migrating failure and alternative components](#migrating-failure-and-alternative-components) for details
-* Removed `mapProps`. If you need to prevent passing down any props from redux-auth-wrapper, use `mapProps` from recompose.
-
-Previously:
-
-v1.x:
-```js
-import { UserAuthWrapper } from 'redux-auth-wrapper'
-
-const UserIsAuthenticated = UserAuthWrapper({
- authSelector: state => state.user.data,
- authenticatingSelector: state => state.user.isLoading,
- LoadingComponent: Loading,
- redirectAction: routerActions.replace,
- wrapperDisplayName: 'UserIsAuthenticated'
-})
-```
-
-v2.x:
-```js
-// NOTE: use history3 because coming from React Router 2/3. If planning to upgrade to React Router 4 use history4
-import { connectedReduxRedirect } from 'redux-auth-wrapper/history3/redirect'
-
-export const userIsAuthenticated = connectedReduxRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user.data !== null,
- authenticatingSelector: state => state.user.isLoading,
- AuthenticatingComponent: Loading,
- redirectAction: routerActions.replace,
- wrapperDisplayName: 'UserIsAuthenticated'
-})
-```
-
-**Note:** If not using `redirectAction`, import `connectedRouterRedirect` instead.
-
-## Migrating failure and alternative components
-
-* Combined `authSelector` and `predicate` into a single `authenticatedSelector`
-* FailureComponent is optional now, not specifying it will render nothing (null) when the `authenticatedSelector` returns false
-* All properties besides `authenticatedSelector`, `authenticatingSelector`, `FailureComponent`, and `wrapperDisplayName` have been removed
-
-### Hiding Components
-
-v1.x
-```js
-import { UserAuthWrapper } from 'redux-auth-wrapper'
-
-
-const VisibleOnlyAdmin = UserAuthWrapper({
- authSelector: state => state.user,
- wrapperDisplayName: 'VisibleOnlyAdmin',
- predicate: user => user.isAdmin,
- FailureComponent: null
-})
-
-// Applying to a function component for simplicity but could be Class or createClass component
-const AdminOnlyLink = VisibleOnlyAdmin(() => Admin Section)
-```
-
-v2.x
-```js
-import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
-
-const visibleOnlyAdmin = authWrapper({
- authenticatedSelector: state => state.user !== null && state.user.isAdmin,
- wrapperDisplayName: 'VisibleOnlyAdmin',
-})
-```
-
-### Alternate Components
-
-v1.x
-```js
-import { UserAuthWrapper } from 'redux-auth-wrapper'
-
-const AdminOrElse = (Component, FailureComponent) => UserAuthWrapper({
- authSelector: state => state.user,
- wrapperDisplayName: 'AdminOrElse',
- predicate: user => user.isAdmin,
- FailureComponent
-})(Component)
-
-// Show Admin dashboard to admins and user dashboard to regular users
-
-```
-
-v2.x
-```js
-import connectedAuthWrapper from 'redux-auth-wrapper/connectedAuthWrapper'
-
-const adminOrElse = (Component, FailureComponent) => connectedAuthWrapper({
- authenticatedSelector: state => state.user !== null && state.user.isAdmin,
- wrapperDisplayName: 'AdminOrElse',
- FailureComponent
-})(Component)
-
-// Show Admin dashboard to admins and user dashboard to regular users
-
-```
diff --git a/docs/Troubleshooting.html b/docs/Troubleshooting.html
new file mode 100644
index 0000000..6b105e0
--- /dev/null
+++ b/docs/Troubleshooting.html
@@ -0,0 +1,503 @@
+
+
+
+
+
+
+ Troubleshooting · GitBook
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Having trouble with redux-auth-wrapper? Check out the following common issues.
+
Applying the HOC
+
Make sure that when using the helpers from redux-auth-wrapper that you are applying the HOC to your component and in the right location (see where to apply the wrappers for more details). Most imports from this library are HOC builders, requiring first a configuration object. For instance you shouldn't be applying the connectedRouterRedirect directly to a component:
The redirect helpers make us of the history object from React Router. In most cases, this is passed down because the wrapped component is rendered as a child of <Router>. However if you render the component elsewhere you might get Uncaught TypeError: Cannot read property 'replace' of undefined. This likely means the history object was not passed to the component. You can solve this by using the withRouter higher order component:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/Troubleshooting.md b/docs/Troubleshooting.md
deleted file mode 100644
index e9c1ab6..0000000
--- a/docs/Troubleshooting.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Troubleshooting and Common Issues
-
-Having trouble with redux-auth-wrapper? Check out the following common issues.
-
-#### Applying the HOC
-
-Make sure that when using the helpers from redux-auth-wrapper that you are applying the HOC to your component and in the right location (see [where to apply the wrappers](Overview.md#where-to-apply) for more details). Most imports from this library are HOC builders, requiring first a configuration object. For instance you shouldn't be applying the `connectedRouterRedirect` directly to a component:
-
-Incorrect:
-```js
-const ProtectedComponent = connectedRouterRedirect(MyComponent)
-```
-
-Correct:
-```js
-const userIsAuthenticated = connectedRouterRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user !== null
-})
-
-const ProtectedComponent = userIsAuthenticated(MyComponent)
-```
-
-Also, please be sure that you've applied the HOC in a proper location. Check out the documentation on [where to apply auth wrappers](/docs/Getting-Started/Overview.md#where-to-apply).
-
-#### Rendering the wrapped component
-
-Also remember that the result of an HOC being applied to a Component is a new Component, so you cannot render it without instantiating it:
-
-Incorrect:
-```js
-const visibleOnlyAdmin = authWrapper({
- authenticatedSelector: state => state.user !== null && state.user.isAdmin,
- wrapperDisplayName: 'AdminOrHomeLink',
- FailureComponent: () => Home Section
-})
-
-const AdminOnlyLink = visibleOnlyAdmin(() => Admin Section)
-
- class MyComponent extends Component {
- render() {
- return (
-
- )
-
- }
- }
-```
-
-#### Replace of undefined
-
-The redirect helpers make us of the `history` object from React Router. In most cases, this is passed down because the wrapped component is rendered as a child of ``. However if you render the component elsewhere you might get `Uncaught TypeError: Cannot read property 'replace' of undefined`. This likely means the `history` object was not passed to the component. You can solve this by using the `withRouter` higher order component:
-
-```js
-import { withRouter } from 'react-router';
-const userIsAuthenticated = connectedRouterRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user.data. !== null
-})
-
-const ProtectedComponent = withRouter(userIsAuthenticated(MyComponent))
-```
diff --git a/examples/react-router-3/.babelrc b/examples/react-router-3/.babelrc
deleted file mode 100644
index 7008890..0000000
--- a/examples/react-router-3/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "presets": ["es2015", "react", "stage-0"]
-}
diff --git a/examples/react-router-3/README.md b/examples/react-router-3/README.md
deleted file mode 100644
index 4243491..0000000
--- a/examples/react-router-3/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-redux-auth-wrapper react router 3 example
-=================================
-
-This is an example of redux-auth-wrapper that uses `authenticatingSelector` with `LoadingComponent`
-to show a loading screen while the user logs in. This example also demonstrates how to use the UserAuthWrapper for
-wrapping the Login Component in an HOC.
-
-This example uses React-Router 3.x and React-Router-Redux 4.x.
-
-**To run, follow these steps:**
-
-1. Go to the root of this project (up two folders) and run `npm install && npm run build`
-2. In this folder, run `npm install`
-3. In this folder, `npm start`
-4. `Browse to http://localhost:8080`
-
-Login as any user to access the protected page `foo`.
-Login with the admin box check to access the admin section.
-Logout from any protected page to get redirect back to the login page.
diff --git a/examples/react-router-3/actions/user.js b/examples/react-router-3/actions/user.js
deleted file mode 100644
index 388b220..0000000
--- a/examples/react-router-3/actions/user.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as constants from '../constants'
-
-export const login = data => dispatch => {
- dispatch({
- type: constants.USER_LOGGING_IN
- })
- // Wait 2 seconds before "logging in"
- setTimeout(() => {
- dispatch({
- type: constants.USER_LOGGED_IN,
- payload: data
- })
- }, 2000)
-}
-
-export function logout() {
- return {
- type: constants.USER_LOGGED_OUT
- }
-}
diff --git a/examples/react-router-3/app.js b/examples/react-router-3/app.js
deleted file mode 100644
index 869c7a2..0000000
--- a/examples/react-router-3/app.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
-import { Provider } from 'react-redux'
-import { Router, Route, IndexRoute, browserHistory } from 'react-router'
-import { routerReducer, syncHistoryWithStore, routerMiddleware } from 'react-router-redux'
-import thunkMiddleware from 'redux-thunk'
-
-import * as reducers from './reducers'
-import { App, Home, Foo, Admin, Login } from './components'
-import { userIsAuthenticated, userIsAdmin, userIsNotAuthenticated } from './auth'
-
-const baseHistory = browserHistory
-const routingMiddleware = routerMiddleware(baseHistory)
-const reducer = combineReducers(Object.assign({}, reducers, {
- routing: routerReducer
-}))
-
-const enhancer = compose(
- // Middleware you want to use in development:
- applyMiddleware(thunkMiddleware, routingMiddleware),
-)
-
-// Note: passing enhancer as the last argument requires redux@>=3.1.0
-const store = createStore(reducer, enhancer)
-const history = syncHistoryWithStore(baseHistory, store)
-
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
- ,
- document.getElementById('mount')
-)
diff --git a/examples/react-router-3/auth.js b/examples/react-router-3/auth.js
deleted file mode 100644
index 7ddfc29..0000000
--- a/examples/react-router-3/auth.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import locationHelperBuilder from 'redux-auth-wrapper/history3/locationHelper'
-import { connectedRouterRedirect } from 'redux-auth-wrapper/history3/redirect'
-import { routerActions } from 'react-router-redux'
-
-import { Loading } from './components'
-
-const locationHelper = locationHelperBuilder({})
-
-export const userIsAuthenticated = connectedRouterRedirect({
- redirectPath: '/login',
- authenticatedSelector: state => state.user.data !== null,
- authenticatingSelector: state => state.user.isLoading,
- AuthenticatingComponent: Loading,
- redirectAction: routerActions.replace,
- wrapperDisplayName: 'UserIsAuthenticated'
-})
-
-export const userIsAdmin = connectedRouterRedirect({
- redirectPath: '/',
- allowRedirectBack: false,
- authenticatedSelector: state => state.user.data !== null && state.user.data.isAdmin,
- redirectAction: routerActions.replace,
- wrapperDisplayName: 'UserIsAdmin'
-})
-
-export const userIsNotAuthenticated = connectedRouterRedirect({
- redirectPath: (state, ownProps) => locationHelper.getRedirectQueryParam(ownProps) || '/foo',
- allowRedirectBack: false,
- // Want to redirect the user when they are done loading and authenticated
- authenticatedSelector: state => state.user.data === null && state.user.isLoading === false,
- redirectAction: routerActions.replace,
- wrapperDisplayName: 'UserIsNotAuthenticated'
-})
diff --git a/examples/react-router-3/components/Admin.js b/examples/react-router-3/components/Admin.js
deleted file mode 100644
index a4d72cd..0000000
--- a/examples/react-router-3/components/Admin.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { connect } from 'react-redux'
-
-const Admin = ({ authData }) => {
- return