Merge pull request #3 from briandesousa/logrocket-blog

add firebase anonymous auth and capture user who creates each document

Author: briandesousa

src/App.js

@@ -12,28 +12,33 @@ import useQueryString from './hooks/useQueryString'
 
 function App() {
 
-  const [user, setUser] = useState()
+  const [user, setUser] = useState();
+  const [userId, setUserId] = useState();
   const [groceryList, setGroceryList] = useState();
   const [error, setError] = useState();
 
   // Use a custom hook to subscribe to the grocery list ID provided as a URL query parameter
   const [groceryListId, setGroceryListId] = useQueryString('listId');
 
-  // Use an effect to load the grocery list from the database
+  // Use an effect to authenticate and load the grocery list from the database
   useEffect(() => {
-    if (groceryListId) {
-      FirestoreService.getGroceryList(groceryListId)
-        .then(groceryList => {
-          if (groceryList.exists) {
-            setError(null);
-            setGroceryList(groceryList.data());
-          } else {
-            setError('grocery-list-not-found');
-            setGroceryListId();
-          }
-        })
-        .catch(() => setError('grocery-list-get-fail'));
-    }
+    FirestoreService.authenticateAnonymously().then(userCredential => {
+      setUserId(userCredential.user.uid);
+      if (groceryListId) {
+        FirestoreService.getGroceryList(groceryListId)
+          .then(groceryList => {
+            if (groceryList.exists) {
+              setError(null);
+              setGroceryList(groceryList.data());
+            } else {
+              setError('grocery-list-not-found');
+              setGroceryListId();
+            }
+          })
+          .catch(() => setError('grocery-list-get-fail'));
+      }
+    })
+    .catch(() => setError('anonymous-auth-failed'));
   }, [groceryListId, setGroceryListId]);
 
   function onGroceryListCreate(groceryListId, userName) {
@@ -56,19 +61,19 @@ function App() {
 
   // render a scene based on the current state
   if (groceryList && user) {
-    return <EditList {...{ groceryListId, user, onCloseGroceryList}}></EditList>;
+    return <EditList {...{ groceryListId, user, onCloseGroceryList, userId}}></EditList>;
   } else if(groceryList) {
     return (
       <div>
         <ErrorMessage errorCode={error}></ErrorMessage>
-        <JoinList users={groceryList.users} {...{groceryListId, onSelectUser, onCloseGroceryList}}></JoinList>
+        <JoinList users={groceryList.users} {...{groceryListId, onSelectUser, onCloseGroceryList, userId}}></JoinList>
       </div>
     );
   }
   return (
     <div>
       <ErrorMessage errorCode={error}></ErrorMessage>
-      <CreateList onCreate={onGroceryListCreate}></CreateList>
+      <CreateList onCreate={onGroceryListCreate} userId={userId}></CreateList>
     </div>
   );
 }

src/components/ErrorMessage/ErrorMessage.js

@@ -7,6 +7,8 @@ function ErrorMessage(props) {
 
     function getErrorMessage() {
         switch(errorCode) {
+            case 'anonymous-auth-failed':
+                return 'Anonymous authentication failed. Try again.'
             case 'grocery-list-not-found':
                 return 'The grocery list could not be found. Try creating a new one.';
             case 'grocery-list-get-fail':

src/scenes/CreateList/CreateList.js

@@ -5,7 +5,7 @@ import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
 
 function CreateList(props) {
 
-    const { onCreate } = props;
+    const { onCreate, userId } = props;
 
     const [ error, setError ] = useState();
 
@@ -19,7 +19,7 @@ function CreateList(props) {
             return;
         }
 
-        FirestoreService.createGroceryList(userName)
+        FirestoreService.createGroceryList(userName, userId)
             .then(docRef => {
                 onCreate(docRef.id, userName);
             })

src/scenes/EditList/AddItem/AddItem.js

@@ -6,7 +6,7 @@ import ErrorMessage from '../../../components/ErrorMessage/ErrorMessage'
 
 function AddItem(props) {
 
-    const { groceryListId } = props;
+    const { groceryListId, userId } = props;
 
     const [error, setError] = useState('');
 
@@ -20,7 +20,7 @@ function AddItem(props) {
             return;
         }
 
-        FirestoreService.addGroceryListItem(itemDesc, groceryListId)
+        FirestoreService.addGroceryListItem(itemDesc, groceryListId, userId)
             .then(() => document.addItemForm.reset())
             .catch(reason => {
                 if (reason.message === 'duplicate-item-error') {

src/scenes/EditList/EditList.js

@@ -5,7 +5,7 @@ import ItemList from './ItemList/ItemList';
 
 function EditList(props) {
 
-    const { groceryListId, user, onCloseGroceryList } = props;
+    const { groceryListId, user, onCloseGroceryList, userId } = props;
 
     function onCreateListClick(e) {
         e.preventDefault();
@@ -21,7 +21,7 @@ function EditList(props) {
             </header>
             <div className="edit-container">
                 <div className="add-item-column">
-                    <AddItem {...{groceryListId}}></AddItem>
+                    <AddItem {...{groceryListId, userId}}></AddItem>
                 </div>
                 <div className="list-column">
                     <ItemList {...{groceryListId}}></ItemList>

src/scenes/JoinList/JoinList.js

@@ -5,7 +5,7 @@ import * as FirestoreService from '../../services/firestore';
 
 function JoinList(props) {
 
-    const { users, groceryListId, onSelectUser, onCloseGroceryList } = props;
+    const { users, groceryListId, onSelectUser, onCloseGroceryList, userId } = props;
 
     const [ error, setError ] = useState();
 
@@ -32,11 +32,8 @@ function JoinList(props) {
         if (users.find(user => user.name === userName)) {
             onSelectUser(userName);
         } else {
-            FirestoreService.addUserToGroceryList(userName, groceryListId)
-                .then(() => {
-                    onSelectUser(userName);
-                    document.addUserToListForm.reset();
-                })
+            FirestoreService.addUserToGroceryList(userName, groceryListId, userId)
+                .then(() => onSelectUser(userName))
                 .catch(() => setError('add-user-to-list-error'));
         }
     }

src/services/firestore.js

@@ -1,5 +1,6 @@
 import * as firebase from "firebase/app";
 import "firebase/firestore";
+import "firebase/auth";
 
 const firebaseConfig = {
     apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
@@ -10,11 +11,19 @@ const firebaseConfig = {
 firebase.initializeApp(firebaseConfig);
 const db = firebase.firestore();
 
-export const createGroceryList = (userName) => {
+export const authenticateAnonymously = () => {
+    return firebase.auth().signInAnonymously();
+};
+
+export const createGroceryList = (userName, userId) => {
     return db.collection('groceryLists')
         .add({
             created: firebase.firestore.FieldValue.serverTimestamp(),
-            users: [{ name: userName}]
+            createdBy: userId,
+            users: [{ 
+                userId: userId,
+                name: userName
+            }]
         });
 };
 
@@ -39,15 +48,18 @@ export const streamGroceryListItems = (groceryListId, observer) => {
         .onSnapshot(observer);
 };
 
-export const addUserToGroceryList = (userName, groceryListId) => {
+export const addUserToGroceryList = (userName, groceryListId, userId) => {
     return db.collection('groceryLists')
         .doc(groceryListId)
         .update({
-            users: firebase.firestore.FieldValue.arrayUnion({ name: userName})
+            users: firebase.firestore.FieldValue.arrayUnion({ 
+                userId: userId,
+                name: userName
+            })
         });
 };
 
-export const addGroceryListItem = (item, groceryListId) => {
+export const addGroceryListItem = (item, groceryListId, userId) => {
     return getGroceryListItems(groceryListId)
         .then(querySnapshot => querySnapshot.docs)
         .then(groceryListItems => groceryListItems.find(groceryListItem => groceryListItem.data().name.toLowerCase() === item.toLowerCase()))
@@ -58,7 +70,8 @@ export const addGroceryListItem = (item, groceryListId) => {
                     .collection('items')
                     .add({
                         name: item,
-                        created: firebase.firestore.FieldValue.serverTimestamp()
+                        created: firebase.firestore.FieldValue.serverTimestamp(),
+                        createdBy: userId
                     });
             }
             throw new Error('duplicate-item-error');