v3.0.0-alpha.15

* feat(hooks): hook rework to match existing HOC - #734 - @illuminist
* fix(hooks): remove create functions (`createUseFirestore`, `createWithFirestore`, `createUseFirebase`, `createWithFirebase`) since store selection is not necessary
* feat(auth): add custom claims - #741 - @joerex 
* fix(types): changed extended firebase instance to function - #743 - @rscotten
* fix(types): switch `typeof Firebase` to `any` (prevents issue with passing some version of Firebase JS SDK)
* fix(examples): update material  and typescript examples

docs/api/constants.md

@@ -146,7 +146,7 @@ Default configuration options
     state (name given when passing reducer to combineReducers). Used in
     firebaseAuthIsReady promise (see
     [#264](https://github.com/prescottprue/react-redux-firebase/issues/264)).
--   `attachAuthIsReady` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** `false` Whether or not to attach
+-   `attachAuthIsReady` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** `true` Whether or not to attach
     firebaseAuthIsReady to store. authIsLoaded can be imported and used
     directly instead based on preference.
 -   `firestoreNamespace` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** `firestoreHelpers` Namespace for

docs/api/useFirebase.md

@@ -2,30 +2,8 @@
 
 ### Table of Contents
 
--   [createUseFirebase](#createusefirebase)
 -   [useFirebase](#usefirebase)
 
-## createUseFirebase
-
-Function that creates a react hook which provides `firebase` object.
-
-**WARNING!!** This is an advanced feature, and should only be used when
-needing to access a firebase instance created under a different store key.
-Firebase state (`state.firebase`)
-
-**Examples**
-
-_Basic_
-
-```javascript
-import { createUseFirebase } from 'react-redux-firebase'
-
-// create useFirebase
-const useFirebase = createUseFirebase()
-```
-
-Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** A hook fucntion that return firebase object.
-
 ## useFirebase
 
 React hook that provides `firebase` object.
@@ -44,14 +22,20 @@ import { useFirebase } from 'react-redux-firebase'
 
 function AddData() {
   const firebase = useFirebase()
+
+  function addTodo() {
+    const exampleTodo = { done: false, text: 'Sample' }
+    return firebase.push('todos', exampleTodo)
+  }
+
   return (
     <div>
-      <button onClick={() => firebase.push('todos', { done: false, text: 'Sample' })}>
+      <button onClick={addTodo}>
         Add Sample Todo
       </button>
     </div>
   )
 }
 ```
 
-Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Firebase instance
+Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Extended Firebase instance

docs/api/useFirebaseConnect.md

@@ -30,13 +30,13 @@ Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference
 
 Hook that automatically listens/unListens
 to provided firebase paths using React's useEffect hook.
-**Note** Only single path is allowed per one hook
 
 **Parameters**
 
--   `queriesConfig` **([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** Object or string for path to sync
-    from Firebase or null if hook doesn't need to sync.
-    Can also be a function that returns an object or a path string.
+-   `queriesConfigs` **([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** Object, string, or
+    array contains object or string for path to sync from Firebase or null if
+    hook doesn't need to sync. Can also be a function that returns an object,
+    a path string, or array of an object or a path string.
 
 **Examples**
 
@@ -50,11 +50,11 @@ import { firebaseUseConnect } from 'react-redux-firebase'
 const enhance = compose(
   connect((state) => ({
     todos: state.firebase.ordered.todos
-  })
+  }))
 )
 
 // use enhnace to pass todos list as props.todos
-const Todos = enhance(({ todos })) => {
+function Todos({ todos })) {
   useFirebaseConnect('todos') // sync /todos from firebase into redux
   return (
     <div>
@@ -76,10 +76,10 @@ import { firebaseUseConnect, getVal } from 'react-redux-firebase'
 const enhance = compose(
   connect((state, props) => ({
     post: getVal(state.firebase.data, `posts/${props.postId}`),
-  })
+  }))
 )
 
-const Post = ({ post, postId }) => {
+function Post({ post, postId }) {
   useFirebaseConnect(`posts/${postId}`) // sync /posts/postId from firebase into redux
   return (
     <div>
@@ -90,3 +90,28 @@ const Post = ({ post, postId }) => {
 
 export default enhance(Post)
 ```
+
+_Data that depends on props, an array as a query_
+
+```javascript
+import { compose } from 'redux'
+import { connect } from 'react-redux'
+import { firebaseUseConnect, getVal } from 'react-redux-firebase'
+
+const enhance = compose(
+  connect((state, props) => ({
+    post: getVal(state.firebase.data, `posts/${props.postId}`),
+  }))
+)
+
+function Post({ post, postId }) {
+  useFirebaseConnect([`posts/${postId}`], [postId]) // sync /posts/postId from firebase into redux
+  return (
+    <div>
+      {JSON.stringify(post, null, 2)}
+    </div>
+  )
+}
+
+export default enhance(Post)
+```

docs/api/useFirestore.md

@@ -2,43 +2,10 @@
 
 ### Table of Contents
 
--   [createUseFirestore](#createusefirestore)
 -   [useFirestore](#usefirestore)
 
-## createUseFirestore
-
-Function that creates a hook that which provides
-`firestore` object.
-
-**WARNING!!** This is an advanced feature, and should only be used when
-needing to access a firebase instance created under a different store key.
-
-**Parameters**
-
--   `storeKey` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Name of redux store which contains
-    Firestore state (`state.firestore`) (optional, default `'store'`)
-
-**Examples**
-
-_Basic_
-
-```javascript
-import { createUseFirestore } from 'react-redux-firebase'
-
-// create useFirestore that uses another redux store
-const useFirestore = createUseFirestore()
-
-// use the useFirestore to wrap a component
-export default useFirestore(SomeComponent)
-```
-
-Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Higher Order Component which accepts an array of
-watchers config and wraps a React Component
-
 ## useFirestore
 
-**Extends React.Component**
-
 React hook that return firestore object.
 Firestore instance is gathered from `store.firestore`, which is attached
 to store by the store enhancer (`reduxFirestore`) during setup of
@@ -54,12 +21,15 @@ import { useFirestore } from 'react-redux-firebase'
 
 function AddData({ firebase: { add } }) {
   const firestore = useFirestore()
-  const add = todo => {
-    firestore.collection('todos').add(todo)
+
+  function addTodo() {
+    const exampleTodo = { done: false, text: 'Sample' }
+    return firestore.collection('todos').add(exampleTodo)
   }
+
   return (
     <div>
-      <button onClick={() => add({ done: false, text: 'Sample' })}>
+      <button onClick={addTodo}>
         Add Sample Todo
       </button>
     </div>
@@ -69,4 +39,4 @@ function AddData({ firebase: { add } }) {
 export default AddTodo
 ```
 
-Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Firestore instance
+Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Extended Firestore instance

docs/api/useFirestoreConnect.md

@@ -11,14 +11,14 @@ React hook that automatically listens/unListens to provided
 firestore paths.
 **WARNING!!** This is an advanced feature, and should only be used when
 needing to access a firebase instance created under a different store key.
-Firestore state (state.firestore)
+Firebase state (state.firestore)
 
 **Examples**
 
 _Basic_
 
 ```javascript
-// props.firestore set on App component as firebase object with helpers
+// props.firestore set on App component as firestore object with helpers
 import { createUseFirestoreConnect } from 'react-redux-firebase'
 
 const firestoreConnect = createUseFirestoreConnect()
@@ -34,12 +34,12 @@ React hook that automatically listens/unListens
 to provided Cloud Firestore paths. Make sure you have required/imported
 Cloud Firestore, including it's reducer, before attempting to use.
 **Note** Populate is not yet supported.
-**Note2** Only single path is allowed per one hook
 
 **Parameters**
 
--   `queriesConfig` **([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** An object or string for paths to sync
-    from firestore. Can also be a function that returns the object or string.
+-   `queriesConfig` **([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function))** An object, string,
+    or array of object or string for paths to sync from firestore. Can also be
+    a function that returns the object, string, or array of object or string.
 
 **Examples**
 
@@ -49,10 +49,10 @@ _Basic_
 import React from 'react'
 import { map } from 'lodash'
 import { connect } from 'react-redux'
-import { useFirestoreConnect } from 'react-redux-firebase'
+import { useFirebaseConnect } from 'react-redux-firebase'
 
 function TodosList({ todosList }) {
-  useFirestoreConnect('todos') // sync todos collection from Firestore into redux
+  useFirebaseConnect('todos') // sync todos collection from Firestore into redux
 
   return <ul>{_.map(todosList, todo => <li>{todo}</li>)}</ul>
 }
@@ -71,17 +71,13 @@ _Object as query_
 import React, { useMemo } from 'react'
 import { get } from 'lodash'
 import { connect } from 'react-redux'
-import { useFirestoreConnect } from 'react-redux-firebase'
+import { useFirebaseConnect } from 'react-redux-firebase'
 
 function TodoItem({ todoId, todoData }) {
-  const query = useMemo( // Make sure that everytime component rerender will not create a new query object which cause unnecessary set/unset listener
-    () => ({
-      collection: 'todos',
-      doc: todoId
-    }),
-    [todoId] // useMemo's dependency
-  )
-  useFirestoreConnect(query) // sync todos collection from Firestore into redux
+  useFirebaseConnect(() => ({
+    collection: 'todos',
+    doc: todoId
+  }), [todoId]) // include dependency in the hook
 
   return <div>{JSON.stringify(todoData)}</div>
 }

docs/api/withFirebase.md

@@ -63,7 +63,7 @@ function AddTodo({ firebase: { push } }) {
         Add Sample Todo
       </button>
     </div>
-   )
+  )
 }
 
 export default withFirebase(AddTodo)

docs/auth.md

@@ -49,6 +49,14 @@ class SomeComponent extends Component {
 export default firebaseConnect()(SomeComponent) // or withFirebase(SomeComponent)
 ```
 
+#### Custom Claims
+
+ Firebase has a secure way of identifying and making claims about users with [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims). This is a good way to provide roles for users.
+
+ If `enableClaims` config option is used along with `userProfile` you will find custom claims in `state.firebase.profile.token.claims`. 
+
+ **Note**: If a claim is added to a user who is already logged in those changes will not necessarily be propagated to the client. In order to assure the change is observed, use a `refreshToken` property in your `userProfile` collection and update it's value after the custom claim has been added. Because `react-redux-firebase` watches for profile changes, the custom claim will be fetched along with the `refreshToken` update.
+
 For examples of how to use this API, checkout the [auth recipes section](/docs/recipes/auth.html).
 
 ## login(credentials)

docs/getting_started.md

@@ -45,6 +45,7 @@ const fbConfig = {}
 const rrfConfig = {
   userProfile: 'users',
   // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
+  // enableClaims: true // Get custom claims along with the profile
 }
 
 // Initialize firebase instance

examples/complete/material/.env.local

@@ -1,4 +1,3 @@
-NODE_PATH=src/
 CI=false
 # Needed to skip warnings from jest@beta in package.json
 SKIP_PREFLIGHT_CHECK=true

examples/complete/material/.eslintignore

@@ -1,6 +1,7 @@
 **/coverage/**
 **/node_modules/**
 dist/**
+build/**
 src/index.html
 blueprints/**
 src/config.js

examples/complete/material/.eslintrc.js

@@ -1,11 +1,11 @@
 module.exports = {
-  'extends': ['react-app', 'prettier'],
+  'extends': ['react-app', 'prettier', 'prettier/react'],
   root: true,
   parser: 'babel-eslint',
   plugins: ['import', 'babel', 'react', 'prettier'],
   settings: {
     react: {
-      version: '16.6'
+      version: '16.8'
     },
     'import/resolver': {
       node: {

examples/complete/material/.gitignore

@@ -8,6 +8,6 @@
 **/node_modules
 
 # React App
-**/build
+build
 src/config.js
 .env

examples/complete/material/firebase.json

@@ -10,7 +10,9 @@
     "ignore": [
       "firebase.json",
       "**/.*",
-      "**/node_modules/**"
+      "**/node_modules/**",
+      "jsconfig.json",
+      "cypress/**"
     ],
     "rewrites": [
       {

examples/complete/material/jsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": "./src",
     "paths": {
       "utils/*": [
-        "utils/*",
+        "utils/*"
       ]
     }
   },