v2.2.2 (prescottprue#567)

* fix(auth): add warning for invalid auth providers - prescottprue#559
* fix(docs): cleanup redux-persist example to remove autoRehydrate - prescottprue#545
* fix(docs): update SSR docs to include a section about Firestore - prescottprue#456
* fix(docs): update docs to have redux-auth-wrapper v2 examples above older examples - prescottprue#542

Author: prescottprue

docs/integrations/redux-persist.md

@@ -7,13 +7,12 @@ Usage with [redux-persist](https://github.com/rt2zz/redux-persist) depends on wh
 *createStore.js*
 
 ```js
-import { browserHistory } from 'react-router'
 import { createStore, compose } from 'redux'
 import { reactReduxFirebase } from 'react-redux-firebase'
 import firebase from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
-import { persistStore, persistReducer, autoRehydrate } from 'redux-persist'
+import { persistStore, persistReducer } from 'redux-persist'
 import localStorage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
 import makeRootReducer from './reducers'
 import { updateLocation } from './location'
@@ -37,14 +36,10 @@ export default (initialState = {}, history) => {
     persistedReducer,
     initialState,
     compose(
-      reactReduxFirebase(firebase, reduxConfig),
-      autoRehydrate()
+      reactReduxFirebase(firebase, reduxConfig)
     )
   )
 
-  // To unsubscribe, invoke `store.unsubscribeHistory()` anytime
-  store.unsubscribeHistory = browserHistory.listen(updateLocation(store))
-
   const persistor = persistStore(store)
 
   return { store, persistor }
@@ -99,7 +94,6 @@ export default function makeRootReducer() {
 }
 ```
 
-
 *App.js*
 
 ```js

docs/recipes/routing.md

@@ -46,37 +46,19 @@ Using [`redux-auth-wrapper`](https://github.com/mjrussell/redux-auth-wrapper) yo
 
 In order to only allow authenticated users to view a page, a `UserIsAuthenticated` Higher Order Component can be created:
 
-**redux-auth-wrapper v1**
-
-```javascript
-import { browserHistory } from 'react-router'
-import { UserAuthWrapper } from 'redux-auth-wrapper'
-
-export const UserIsAuthenticated = UserAuthWrapper({
-  wrapperDisplayName: 'UserIsAuthenticated',
-  authSelector: ({ firebase: { auth } }) => auth,
-  authenticatingSelector: ({ firebase: { auth, isInitializing } }) =>
-    !auth.isLoaded || isInitializing === true,
-  predicate: auth => !auth.isEmpty,
-  redirectAction: (newLoc) => (dispatch) => {
-    browserHistory.replace(newLoc)
-    // routerActions.replace // if using react-router-redux
-    dispatch({
-      type: 'UNAUTHED_REDIRECT',
-      payload: { message: 'You must be authenticated.' },
-    })
-  }
-})
-```
 
 **react-router v4 + redux-auth-wrapper v2**
 
+Make sure to install `history` using `npm i --save history`
+
 ```javascript
 import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper';
 import { connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect'
-import LoadingScreen from '../components/LoadingScreen'; // change it to your custom component
+import createHistory from 'history/createBrowserHistory'
+import LoadingScreen from 'components/LoadingScreen'; // change it to your custom component
 
 const locationHelper = locationHelperBuilder({});
+const history = createHistory()
 
 export const UserIsAuthenticated = connectedRouterRedirect({
   wrapperDisplayName: 'UserIsAuthenticated',
@@ -111,9 +93,14 @@ export const UserIsNotAuthenticated = connectedRouterRedirect({
 });
 ```
 
-
 Then it can be used as a Higher Order Component wrapper on a component:
 
+*standard ES5/ES6*
+
+```javascript
+export default UserIsAuthenticated(ProtectedThing)
+```
+
 *es7 decorators*
 
 ```javascript
@@ -129,12 +116,6 @@ export default class ProtectedThing extends Component {
 }
 ```
 
-*standard ES5/ES6*
-
-```javascript
-export default UserIsAuthenticated(ProtectedThing)
-```
-
 Or it can be used at the route level:
 
 ```javascript
@@ -145,39 +126,43 @@ Or it can be used at the route level:
 ```
 
 
-### Redirect Authenticated
-Just as easily as creating a wrapper for redirect if a user is not logged in, we can create one that redirects if a user *IS* authenticated. This can be useful for pages that you do not want a logged in user to see, such as the login page.
-
-**react-router v3 and earlier**
+**redux-auth-wrapper v1**
 
 ```javascript
 import { browserHistory } from 'react-router'
 import { UserAuthWrapper } from 'redux-auth-wrapper'
-import LoadingScreen from '../components/LoadingScreen'; // change it to your custom component
 
-export const UserIsNotAuthenticated = UserAuthWrapper({
-  failureRedirectPath: '/',
+export const UserIsAuthenticated = UserAuthWrapper({
+  wrapperDisplayName: 'UserIsAuthenticated',
   authSelector: ({ firebase: { auth } }) => auth,
   authenticatingSelector: ({ firebase: { auth, isInitializing } }) =>
     !auth.isLoaded || isInitializing === true,
-  predicate: auth => auth.isEmpty,
+  predicate: auth => !auth.isEmpty,
   redirectAction: (newLoc) => (dispatch) => {
     browserHistory.replace(newLoc)
+    // routerActions.replace // if using react-router-redux
     dispatch({
-      type: 'AUTHED_REDIRECT',
-      payload: { message: 'User is authenticated. Redirecting home...' }
+      type: 'UNAUTHED_REDIRECT',
+      payload: { message: 'You must be authenticated.' },
     })
   }
 })
 ```
 
+### Redirect Authenticated
+
+Just as easily as creating a wrapper for redirect if a user is not logged in, we can create one that redirects if a user *IS* authenticated. This can be useful for pages that you do not want a logged in user to see, such as the login page.
+
 **react-router v4 + redux-auth-wrapper v2**
 
 ```js
 import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper';
 import { connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect'
+import createHistory from 'history/createBrowserHistory'
+import LoadingScreen from 'components/LoadingScreen'; // change it to your custom component
 
-import LoadingScreen from '../components/LoadingScreen'; // change it to your custom component
+const locationHelper = locationHelperBuilder({})
+const history = createHistory()
 
 export const UserIsNotAuthenticated = connectedRouterRedirect({
   wrapperDisplayName: 'UserIsNotAuthenticated',
@@ -190,6 +175,7 @@ export const UserIsNotAuthenticated = connectedRouterRedirect({
   authenticatedSelector: ({ firebase: { auth } }) =>
     auth.isLoaded && auth.isEmpty,
   redirectAction: newLoc => (dispatch) => {
+    history.push(newLoc)
     // routerActions.replace or other redirect
     dispatch({ type: 'UNAUTHED_REDIRECT' });
   },
@@ -216,3 +202,26 @@ export default compose(
   withFirebase // adds this.props.firebase
 )
 ```
+
+**react-router v3 and earlier + redux-auth-wrapper v1**
+
+```javascript
+import { browserHistory } from 'react-router'
+import { UserAuthWrapper } from 'redux-auth-wrapper'
+import LoadingScreen from '../components/LoadingScreen'; // change it to your custom component
+
+export const UserIsNotAuthenticated = UserAuthWrapper({
+  failureRedirectPath: '/',
+  authSelector: ({ firebase: { auth } }) => auth,
+  authenticatingSelector: ({ firebase: { auth, isInitializing } }) =>
+    !auth.isLoaded || isInitializing === true,
+  predicate: auth => auth.isEmpty,
+  redirectAction: (newLoc) => (dispatch) => {
+    browserHistory.replace(newLoc)
+    dispatch({
+      type: 'AUTHED_REDIRECT',
+      payload: { message: 'User is authenticated. Redirecting home...' }
+    })
+  }
+})
+```

docs/recipes/ssr.md

@@ -1,8 +1,9 @@
 # Server Side Rendering
 
-
 ## Preload Data
+Preloading data is a common step to in serverside rendering. How it is done differs based on whether you are using Real Time Database or Firestore.
 
+**Real Time Database**
 `promiseEvents`, which is similar to `firebaseConnect` expected it is presented as a function instead of a React Component.
 
 After creating your store:
@@ -18,6 +19,16 @@ store.firebase // getFirebase can also be used
   })
 ```
 
+**Firestore**
+Its just as simple as calling the built in get method with your query config:
+
+```js
+store.firestore.get({ collection: 'todos' }) // or .get('todos')
+  .then(() => {
+    console.log('data is loaded into redux store')
+  })
+```
+
 ## Troubleshooting
 
 ### Include XMLHttpRequest