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

Author: rwieruch

src/components/Admin/index.js

@@ -22,7 +22,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

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

src/components/Home/index.js

@@ -1,47 +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.props.firebase.users().on('value', snapshot => {
-      this.setState({
-        users: snapshot.val(),
-      });
-    });
-  }
-
-  componentWillUnmount() {
-    this.props.firebase.users().off();
-  }
-
-  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

@@ -35,15 +35,15 @@ class MessageItem extends Component {
   };
 
   render() {
-    const { message, onRemoveMessage } = this.props;
+    const { authUser, message, onRemoveMessage } = this.props;
     const { editMode, editText } = this.state;
 
     return (
       <Feed.Event>
         <Feed.Content>
           <Feed.Summary>
             <Feed.User as={Link} to={`/`}>
-              {message.user.username || message.user.userId}
+              {message.userId}
             </Feed.User>
             <Feed.Date>
               <TimeAgo time={message.createdAt} />
@@ -68,26 +68,30 @@ class MessageItem extends Component {
             )}
           </Feed.Extra>
           <Feed.Meta>
-            {editMode ? (
-              <span>
-                <Button icon onClick={this.onSaveEditText}>
-                  <Icon color="green" name="save outline" />
-                </Button>
-                <Button icon onClick={this.onToggleEditMode}>
-                  <Icon color="blue" name="undo alternate" />
-                </Button>
-              </span>
-            ) : (
+            {authUser.uid === message.userId && (
               <span>
-                <Button icon onClick={this.onToggleEditMode}>
-                  <Icon color="blue" name="edit outline" />
-                </Button>
-                <Button
-                  icon
-                  onClick={() => onRemoveMessage(message.uid)}
-                >
-                  <Icon color="red" name="trash alternate" />
-                </Button>
+                {editMode ? (
+                  <span>
+                    <Button icon onClick={this.onSaveEditText}>
+                      <Icon color="green" name="save outline" />
+                    </Button>
+                    <Button icon onClick={this.onToggleEditMode}>
+                      <Icon color="blue" name="undo alternate" />
+                    </Button>
+                  </span>
+                ) : (
+                  <span>
+                    <Button icon onClick={this.onToggleEditMode}>
+                      <Icon color="blue" name="edit outline" />
+                    </Button>
+                    <Button
+                      icon
+                      onClick={() => onRemoveMessage(message.uid)}
+                    >
+                      <Icon color="red" name="trash alternate" />
+                    </Button>
+                  </span>
+                )}
               </span>
             )}
           </Feed.Meta>

src/components/Messages/MessageList.js

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

src/components/Messages/Messages.js

@@ -76,8 +76,10 @@ class Messages extends Component {
   };
 
   onEditMessage = (message, text) => {
+    const { uid, ...messageSnapshot } = message;
+
     this.props.firebase.message(message.uid).set({
-      ...message,
+      ...messageSnapshot,
       text,
       editedAt: this.props.firebase.serverValue.TIMESTAMP,
     });
@@ -95,8 +97,8 @@ class Messages extends Component {
   };
 
   render() {
-    const { users } = this.props;
     const { text, messages, loading } = this.state;
+
     return (
       <AuthUserContext.Consumer>
         {authUser => (
@@ -118,12 +120,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

@@ -26,7 +26,7 @@ const NavigationAuth = ({ authUser }) => (
       <Menu.Item name="Landing" as={Link} to={ROUTES.LANDING} />
       <Menu.Item name="home" as={Link} to={ROUTES.HOME} />
       <Menu.Item name="Account" as={Link} to={ROUTES.ACCOUNT} />
-      {authUser.roles.includes(ROLES.ADMIN) && (
+      {!!authUser.roles[ROLES.ADMIN] && (
         <Menu.Item name="Admin" as={Link} to={ROUTES.ADMIN} />
       )}
       <SignOutButton />

src/components/SignIn/index.js

@@ -134,7 +134,7 @@ class SignInGoogleBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.user.displayName,
           email: socialAuthUser.user.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
@@ -186,7 +186,7 @@ class SignInFacebookBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
@@ -238,7 +238,7 @@ class SignInTwitterBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {

src/components/SignUp/index.js

@@ -52,10 +52,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