migrate to security rules: the-road-to-react-with-firebase/react-firebase-authentication#26

Author: rwieruch

src/components/Admin/index.js

@@ -20,7 +20,7 @@ const AdminPage = () => (
 );
 
 const condition = authUser =>
-  authUser && authUser.roles.includes(ROLES.ADMIN);
+  authUser && !!authUser.roles[ROLES.ADMIN];
 
 export default compose(
   withEmailVerification,

src/components/Firebase/firebase.js

@@ -74,7 +74,7 @@ class Firebase {
 
             // default empty roles
             if (!dbUser.roles) {
-              dbUser.roles = [];
+              dbUser.roles = {};
             }
 
             // merge auth and db user

src/components/Home/index.js

@@ -1,52 +1,21 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { compose } from 'recompose';
 
 import { withAuthorization, withEmailVerification } from '../Session';
-import { withFirebase } from '../Firebase';
 import Messages from '../Messages';
 
-class HomePage extends Component {
-  constructor(props) {
-    super(props);
+const HomePage = () => (
+  <div>
+    <h1>Home Page</h1>
+    <p>The Home Page is accessible by every signed in user.</p>
 
-    this.state = {
-      users: null,
-    };
-  }
-
-  componentDidMount() {
-    this.unsubscribe = this.props.firebase
-      .users()
-      .onSnapshot(snapshot => {
-        let users = {};
-        snapshot.forEach(doc => (users[doc.id] = doc.data()));
-
-        this.setState({
-          users,
-        });
-      });
-  }
-
-  componentWillUnmount() {
-    this.unsubscribe();
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>Home Page</h1>
-        <p>The Home Page is accessible by every signed in user.</p>
-
-        <Messages users={this.state.users} />
-      </div>
-    );
-  }
-}
+    <Messages />
+  </div>
+);
 
 const condition = authUser => !!authUser;
 
 export default compose(
-  withFirebase,
   withEmailVerification,
   withAuthorization(condition),
 )(HomePage);

src/components/Messages/MessageItem.js

@@ -28,7 +28,7 @@ class MessageItem extends Component {
   };
 
   render() {
-    const { message, onRemoveMessage } = this.props;
+    const { authUser, message, onRemoveMessage } = this.props;
     const { editMode, editText } = this.state;
 
     return (
@@ -41,29 +41,31 @@ class MessageItem extends Component {
           />
         ) : (
           <span>
-            <strong>
-              {message.user.username || message.user.userId}
-            </strong>{' '}
-            {message.text} {message.editedAt && <span>(Edited)</span>}
+            <strong>{message.userId}</strong> {message.text}
+            {message.editedAt && <span>(Edited)</span>}
           </span>
         )}
 
-        {editMode ? (
+        {authUser.uid === message.userId && (
           <span>
-            <button onClick={this.onSaveEditText}>Save</button>
-            <button onClick={this.onToggleEditMode}>Reset</button>
-          </span>
-        ) : (
-          <button onClick={this.onToggleEditMode}>Edit</button>
-        )}
+            {editMode ? (
+              <span>
+                <button onClick={this.onSaveEditText}>Save</button>
+                <button onClick={this.onToggleEditMode}>Reset</button>
+              </span>
+            ) : (
+              <button onClick={this.onToggleEditMode}>Edit</button>
+            )}
 
-        {!editMode && (
-          <button
-            type="button"
-            onClick={() => onRemoveMessage(message.uid)}
-          >
-            Delete
-          </button>
+            {!editMode && (
+              <button
+                type="button"
+                onClick={() => onRemoveMessage(message.uid)}
+              >
+                Delete
+              </button>
+            )}
+          </span>
         )}
       </li>
     );

src/components/Messages/MessageList.js

@@ -3,13 +3,15 @@ import React from 'react';
 import MessageItem from './MessageItem';
 
 const MessageList = ({
+  authUser,
   messages,
   onEditMessage,
   onRemoveMessage,
 }) => (
   <ul>
     {messages.map(message => (
       <MessageItem
+        authUser={authUser}
         key={message.uid}
         message={message}
         onEditMessage={onEditMessage}

src/components/Messages/Messages.js

@@ -65,6 +65,8 @@ class Messages extends Component {
   };
 
   onEditMessage = (message, text) => {
+    console.log(message);
+
     this.props.firebase.message(message.uid).update({
       ...message,
       text,
@@ -84,7 +86,6 @@ class Messages extends Component {
   };
 
   render() {
-    const { users } = this.props;
     const { text, messages, loading } = this.state;
 
     return (
@@ -101,12 +102,8 @@ class Messages extends Component {
 
             {messages && (
               <MessageList
-                messages={messages.map(message => ({
-                  ...message,
-                  user: users
-                    ? users[message.userId]
-                    : { userId: message.userId },
-                }))}
+                authUser={authUser}
+                messages={messages}
                 onEditMessage={this.onEditMessage}
                 onRemoveMessage={this.onRemoveMessage}
               />

src/components/Navigation/index.js

@@ -29,7 +29,7 @@ const NavigationAuth = ({ authUser }) => (
     <li>
       <Link to={ROUTES.ACCOUNT}>Account</Link>
     </li>
-    {authUser.roles.includes(ROLES.ADMIN) && (
+    {!!authUser.roles[ROLES.ADMIN] && (
       <li>
         <Link to={ROUTES.ADMIN}>Admin</Link>
       </li>

src/components/SignIn/index.js

@@ -109,7 +109,7 @@ class SignInGoogleBase extends Component {
           {
             username: socialAuthUser.user.displayName,
             email: socialAuthUser.user.email,
-            roles: [],
+            roles: {},
           },
           { merge: true },
         );
@@ -158,7 +158,7 @@ class SignInFacebookBase extends Component {
           {
             username: socialAuthUser.additionalUserInfo.profile.name,
             email: socialAuthUser.additionalUserInfo.profile.email,
-            roles: [],
+            roles: {},
           },
           { merge: true },
         );
@@ -207,7 +207,7 @@ class SignInTwitterBase extends Component {
           {
             username: socialAuthUser.additionalUserInfo.profile.name,
             email: socialAuthUser.additionalUserInfo.profile.email,
-            roles: [],
+            roles: {},
           },
           { merge: true },
         );

src/components/SignUp/index.js

@@ -40,10 +40,10 @@ class SignUpFormBase extends Component {
 
   onSubmit = event => {
     const { username, email, passwordOne, isAdmin } = this.state;
-    const roles = [];
+    const roles = {};
 
     if (isAdmin) {
-      roles.push(ROLES.ADMIN);
+      roles[ROLES.ADMIN] = ROLES.ADMIN;
     }
 
     this.props.firebase