v3.0.0-alpha.6

* feat(auth): exposing handleRedirectResult for react-firebaseui - prescottprue#608 - @dirathea
* fix(firestoreConnect): fix invalid proptypes - prescottprue#611 & [redux-firestore 165](prescottprue/redux-firestore#165)

Author: prescottprue

docs/recipes/auth.md

@@ -51,6 +51,69 @@ export default compose(
 )(LoginPage)
 ```
 
+## Firebase UI React
+
+Here is an example of a component that shows a usage of [Firebase UI](https://firebase.google.com/docs/auth/web/firebaseui), especially their [react component](https://github.com/firebase/firebaseui-web-react) and integrate the flow with this library:
+
+```js
+import React from 'react'
+import PropTypes from 'prop-types'
+import { compose } from 'redux'
+import { connect } from 'react-redux'
+import { firebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
+// import { withRouter } from 'react-router-dom'; // if you use react-router
+// import GoogleButton from 'react-google-button' // optional
+
+export const LoginPage = ({
+  firebase,
+  auth,
+  //history if you use react-router
+  }) => (
+  <div className={classes.container}>
+    <StyledFirebaseAuth
+      uiConfig={{
+        signInFlow: 'popup',
+        signInSuccessUrl: '/signedIn',
+        signInOptions: [this.props.firebase.auth.GoogleAuthProvider.PROVIDER_ID],
+        callbacks: {
+          signInSuccessWithAuthResult: (authResult, redirectUrl) => {
+            firebase.handleRedirectResult(authResult).then(() => {
+              // history.push(redirectUrl); if you use react router to redirect
+            });
+            return false;
+          },
+        },
+      }}
+      firebaseAuth={firebase.auth()}
+        />
+    <div>
+      <h2>Auth</h2>
+      {
+        !isLoaded(auth)
+        ? <span>Loading...</span>
+        : isEmpty(auth)
+          ? <span>Not Authed</span>
+          : <pre>{JSON.stringify(auth, null, 2)}</pre>
+      }
+    </div>
+  </div>
+)
+
+LoginPage.propTypes = {
+  firebase: PropTypes.shape({
+    handleRedirectResult: PropTypes.func.isRequired
+  }),
+  auth: PropTypes.object
+}
+
+export default compose(
+  //withRouter, if you use react router to redirect
+  firebaseConnect(), // withFirebase can also be used
+  connect(({ firebase: { auth } }) => ({ auth }))
+)(LoginPage)
+```
+
 
 ## Wait For Auth To Be Ready
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-firebase",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "Redux integration for Firebase. Comes with a Higher Order Components for use with React.",
   "main": "lib/index.js",
   "module": "es/index.js",

src/createFirebaseInstance.js

@@ -358,6 +358,15 @@ export default function createFirebaseInstance(firebase, configs, dispatch) {
   const login = credentials =>
     authActions.login(dispatch, firebase, credentials)
 
+  /**
+   * @description Logs user into Firebase using external. For examples, visit the
+   * [auth section](/docs/recipes/auth.md)
+   * @param {Object} authData - Auth data from Firebase's getRedirectResult
+   * @return {Promise} Containing user's profile
+   */
+  const handleRedirectResult = authData =>
+    authActions.handleRedirectResult(dispatch, firebase, authData)
+
   /**
    * @description Logs user out of Firebase and empties firebase state from
    * redux store
@@ -512,6 +521,7 @@ export default function createFirebaseInstance(firebase, configs, dispatch) {
     update,
     updateWithMeta,
     login,
+    handleRedirectResult,
     logout,
     updateAuth,
     updateEmail,

src/firestoreConnect.js

@@ -4,6 +4,7 @@ import { isEqual, some, filter } from 'lodash'
 import hoistStatics from 'hoist-non-react-statics'
 import { createCallable, wrapDisplayName } from './utils'
 import ReduxFirestoreContext from './ReduxFirestoreContext'
+import ReactReduxFirebaseContext from './ReactReduxFirebaseContext'
 
 /**
  * @name createFirestoreConnect
@@ -87,27 +88,35 @@ export const createFirestoreConnect = (storeKey = 'store') => (
   }
 
   FirestoreConnectWrapped.propTypes = {
-    dispatch: PropTypes.func,
+    dispatch: PropTypes.func.isRequired,
     firebase: PropTypes.object,
     firestore: PropTypes.object
   }
 
   const HoistedComp = hoistStatics(FirestoreConnectWrapped, WrappedComponent)
 
   const FirestoreConnect = props => (
-    <ReduxFirestoreContext.Consumer>
-      {firestore => <HoistedComp firestore={firestore} {...props} />}
-    </ReduxFirestoreContext.Consumer>
+    <ReactReduxFirebaseContext.Consumer>
+      {firebase => (
+        <ReduxFirestoreContext.Consumer>
+          {firestore => (
+            <HoistedComp
+              firestore={firestore}
+              firebase={firebase}
+              dispatch={firebase.dispatch}
+              {...props}
+            />
+          )}
+        </ReduxFirestoreContext.Consumer>
+      )}
+    </ReactReduxFirebaseContext.Consumer>
   )
+
   FirestoreConnect.displayName = wrapDisplayName(
     WrappedComponent,
     'FirestoreConnect'
   )
 
-  FirestoreConnect.propTypes = {
-    dispatch: PropTypes.func.isRequired
-  }
-
   return FirestoreConnect
 }