v3.9.0 (#1050)

* fix(auth): prevent throw in `logout` when database is not setup (#1042) - @ssdns
* fix(types): fix `reloadAuth` argument type and duplicate of `endBefore` (#1031) - @ MatthewDailey
* fix(types): fix argument type for `login` with credentials (#1045) - @AlexanderArvidsson
* fix(types): add back `FirestoreStatics` to `ExtendedFirestoreInstance` (#1030)
* fix(core): add deprecation message `enableLogging` config option
* chore(docs): add note about required rules for profile settings (#1049)

Co-authored-by: Matthew Dailey <[email protected]>
Co-authored-by: Alexander Arvidsson <[email protected]>
Co-authored-by: shishido <[email protected]>

Author: 4 people

docs/api/constants.md

@@ -2,22 +2,21 @@
 
 ### Table of Contents
 
--   [useFirebaseConnect][1]
-    -   [Parameters][2]
-    -   [Examples][3]
+- [useFirebaseConnect][1]
+  - [Parameters][2]
+  - [Examples][3]
 
 ## useFirebaseConnect
 
-
 Hook that automatically listens/unListens to provided firebase paths
 using React's useEffect hook.
 
 ### Parameters
 
--   `queriesConfig` **([object][5] \| [string][6] \| [Function][7] \| [Array][8])** 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.
+- `queriesConfig` **([Function][5] \| [Array][6])** 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
 
@@ -30,14 +29,10 @@ import { useFirebaseConnect } from 'react-redux-firebase'
 
 export default function Todos() {
   // sync /todos from firebase into redux
-  useFirebaseConnect('todos')
+  useFirebaseConnect(['todos'])
   // Connect to redux state using selector hook
-  const todos = useSelector(state => state.firebase.data.todos)
-  return (
-    <div>
-      {JSON.stringify(todos, null, 2)}
-    </div>
-  )
+  const todos = useSelector((state) => state.firebase.data.todos)
+  return <div>{JSON.stringify(todos, null, 2)}</div>
 }
 ```
 
@@ -50,49 +45,21 @@ import { useSelector } from 'react-redux'
 import { useFirebaseConnect } from 'react-redux-firebase'
 
 export default function Post({ postId }) {
-  useFirebaseConnect(`posts/${postId}`) // sync /posts/postId from firebase into redux
-  const post = useSelector(({ firebase: { ordered: { posts } } }) => posts && posts[postId])
-  return (
-    <div>
-      {JSON.stringify(post, null, 2)}
-    </div>
-  )
-}
-```
-
-_Data that depends on props, an array as a query_
-
-```javascript
-import React from 'react'
-import { compose } from 'redux'
-import { useSelector } from 'react-redux'
-import { useFirebaseConnect, getVal } from 'react-redux-firebase'
-
-export default function Post({ postId }) {
-  useFirebaseConnect([`posts/${postId}`], [postId]) // sync /posts/postId from firebase into redux
-  const post = useSelector(state => {
-    return state.firebase.ordered.posts && state.firebase.ordered.posts[postId]
-  })
-  return (
-    <div>
-      {JSON.stringify(post, null, 2)}
-    </div>
+  useFirebaseConnect([`posts/${postId}`]) // sync /posts/postId from firebase into redux
+  const post = useSelector(
+    ({
+      firebase: {
+        ordered: { posts }
+      }
+    }) => posts && posts[postId]
   )
+  return <div>{JSON.stringify(post, null, 2)}</div>
 }
 ```
 
 [1]: #usefirebaseconnect
-
 [2]: #parameters
-
 [3]: #examples
-
 [4]: https://react-redux-firebase.com/docs/api/useFirebaseConnect.html
-
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-
-[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
-
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

docs/api/firebaseInstance.md

@@ -16,7 +16,7 @@ Populate is supported for Firestore as of v0.6.0 of redux-firestore (added
 
 ### Parameters
 
-- `queriesConfigs` **([object][6] \| [string][7] \| [Array][8] \| [Function][9])** An object, string,
+- `queriesConfigs` **([Array][6] \| [Function][7])** 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.
 
@@ -72,7 +72,5 @@ export default function TodoItem({ todoId }) {
 [3]: #examples
 [4]: https://react-redux-firebase.com/docs/api/useFirestoreConnect.html
 [5]: https://github.com/prescottprue/redux-firestore/issues/48
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

docs/api/useFirebaseConnect.md

@@ -7,37 +7,33 @@ import { applyMiddleware, compose, createStore } from 'redux'
 import { browserHistory } from 'react-router'
 import makeRootReducer from './reducers'
 import createSagaMiddleware from 'redux-saga'
-import firebase from 'firebase/app';
-import 'firebase/database';
+import firebase from 'firebase/app'
+import 'firebase/database'
 
 const firebaseConfig = {} // firebase configuration including databaseURL
 const reduxFirebase = {
-  userProfile: 'users',
-  enableLogging: 'false'
+  userProfile: 'users'
 }
 
-firebase.initializeApp(firebaseConfig);
+firebase.initializeApp(firebaseConfig)
 
 function* helloSaga() {
   try {
     yield firebase.ref('/some/path').push({ nice: 'work!' })
-  } catch(err) {
+  } catch (err) {
     console.log('Error in saga!:', err)
   }
 }
 
 export default (initialState = {}, history) => {
-
   const sagaMiddleware = createSagaMiddleware() // create middleware
 
-  const middleware = [ sagaMiddleware ]
+  const middleware = [sagaMiddleware]
 
   const store = createStore(
     makeRootReducer(),
     {}, // initial state
-    compose(
-      applyMiddleware(...middleware)
-    )
+    compose(applyMiddleware(...middleware))
   )
 
   return store

docs/api/useFirestoreConnect.md

@@ -10,7 +10,22 @@ Include the `userProfile` parameter in config passed to react-redux-firebase:
 
 ```js
 const config = {
-  userProfile: 'users', // where profiles are stored in database
+  userProfile: 'users' // where profiles are stored in database
+}
+```
+
+Make sure to set your database rules to work with user profiles being stored under the `users` path of Real Time Database:
+
+```json
+{
+  "rules": {
+    "users": {
+      "$userId": {
+        ".read": "$userId === auth.uid",
+        ".write": "$userId === auth.uid"
+      }
+    }
+  }
 }
 ```
 
@@ -24,7 +39,7 @@ Then later `connect` (from [react-redux](https://github.com/reactjs/react-redux/
 import { useSelector } from 'react-redux'
 
 function SomeComponent() {
-  const profile = useSelector(state => state.firebase.profile)
+  const profile = useSelector((state) => state.firebase.profile)
   return <div>{JSON.stringify(profile, null, 2)}</div>
 }
 
@@ -42,13 +57,11 @@ Then later `connect` (from [react-redux](https://github.com/reactjs/react-redux/
 import { connect } from 'react-redux'
 
 // grab profile from redux with connect
-connect(
-  (state) => {
-    return {
-      profile: state.firebase.profile // profile passed as props.profile
-    }
+connect((state) => {
+  return {
+    profile: state.firebase.profile // profile passed as props.profile
   }
-)(SomeComponent) // pass component to be wrapped
+})(SomeComponent) // pass component to be wrapped
 
 // or with some shorthand:
 connect(({ firebase: { profile } }) => ({ profile }))(SomeComponent)
@@ -65,6 +78,19 @@ const config = {
 }
 ```
 
+Make sure to set your firestore rules to work with user profiles being stored under the `users` collection of Firestore:
+
+```
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /users/{userId} {
+      allow read, write: if request.auth.uid == userId;
+    }
+  }
+}
+```
+
 ## Update Profile
 
 The current users profile can be updated by using the `updateProfile` method:
@@ -78,7 +104,7 @@ import { useFirebase, isLoaded } from 'react-redux-firebase'
 
 export default function UpdateProfilePage() {
   const firebase = useFirebase()
-  const profile = useSelector(state => state.firebase.profile)
+  const profile = useSelector((state) => state.firebase.profile)
 
   function updateUserProfile() {
     return firebase.updateProfile({ role: 'admin' })
@@ -87,18 +113,10 @@ export default function UpdateProfilePage() {
   return (
     <div>
       <h2>Update User Profile</h2>
-      <span>
-        Click the button to update profile to include role parameter
-      </span>
-      <button onClick={updateUserProfile}>
-        Add Role To User
-      </button>
+      <span>Click the button to update profile to include role parameter</span>
+      <button onClick={updateUserProfile}>Add Role To User</button>
       <div>
-        {
-          isLoaded(profile)
-            ? JSON.stringify(profile, null, 2)
-            : 'Loading...'
-        }
+        {isLoaded(profile) ? JSON.stringify(profile, null, 2) : 'Loading...'}
       </div>
     </div>
   )
@@ -113,7 +131,8 @@ The way user profiles are written to the database can be modified by passing the
 // within your createStore.js or store.js file include the following config
 const config = {
   userProfile: 'users', // where profiles are stored in database
-  profileFactory: (userData, profileData, firebase) => { // how profiles are stored in database
+  profileFactory: (userData, profileData, firebase) => {
+    // how profiles are stored in database
     const { user } = userData
     return {
       email: user.email
@@ -152,9 +171,7 @@ Setting config like this:
 ```js
 const config = {
   userProfile: 'users', // where profiles are stored in database
-  profileParamsToPopulate: [
-    'contacts:users'
-  ]
+  profileParamsToPopulate: ['contacts:users']
 }
 ```
 

docs/integrations/redux-saga.md

@@ -9,8 +9,7 @@ export const firebase = {
 
 export const rrfConfig = {
   userProfile: 'users',
-  useFirestoreForProfile: true, // Store in Firestore instead of Real Time DB
-  enableLogging: false
+  useFirestoreForProfile: true // Store in Firestore instead of Real Time DB
 }
 
 export default { firebase, rrfConfig }

docs/recipes/profile.md

@@ -9,8 +9,7 @@ export const firebase = {
 
 export const rrfConfig = {
   userProfile: 'users',
-  useFirestoreForProfile: true, // Store in Firestore instead of Real Time DB
-  enableLogging: false
+  useFirestoreForProfile: true // Store in Firestore instead of Real Time DB
 }
 
 export default { firebase, rrfConfig }

examples/complete/firestore/src/config.js

@@ -15,7 +15,6 @@ export default function configureStore(initialState, history) {
     reactReduxFirebase(firebase, {
       userProfile: 'users',
       useFirestoreForProfile: true, // Store in Firestore instead of Real Time DB
-      enableLogging: false
     })
   )(createStore)
 

examples/complete/react-native/config.js

@@ -9,8 +9,7 @@ export const firebase = {
 
 export const reduxFirebase = {
   userProfile: 'users',
-  useFirestoreForProfile: true,
-  enableLogging: false
+  useFirestoreForProfile: true
 }
 
 export default { firebase, reduxFirebase }