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

@@ -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,50 +1,21 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+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 {
-  componentDidMount() {
-    this.props.firebase.users().on('value', snapshot => {
-      this.props.onSetUsers(snapshot.val());
-    });
-  }
+const HomePage = () => (
+  <div>
+    <h1>Home Page</h1>
+    <p>The Home Page is accessible by every signed in user.</p>
 
-  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.props.users} />
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  users: state.userState.users,
-});
-
-const mapDispatchToProps = dispatch => ({
-  onSetUsers: users => dispatch({ type: 'USERS_SET', users }),
-});
+    <Messages />
+  </div>
+);
 
 const condition = authUser => !!authUser;
 
 export default compose(
-  withFirebase,
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-  ),
   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

@@ -62,8 +62,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,
     });
@@ -78,7 +80,7 @@ class Messages extends Component {
   };
 
   render() {
-    const { users, messages } = this.props;
+    const { messages } = this.props;
     const { text, loading } = this.state;
 
     return (
@@ -93,12 +95,8 @@ class Messages extends Component {
 
         {messages && (
           <MessageList
-            messages={messages.map(message => ({
-              ...message,
-              user: users
-                ? users[message.userId]
-                : { userId: message.userId },
-            }))}
+            authUser={this.props.authUser}
+            messages={messages}
             onEditMessage={this.onEditMessage}
             onRemoveMessage={this.onRemoveMessage}
           />

src/components/Navigation/index.js

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

@@ -108,7 +108,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(() => {
@@ -154,7 +154,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(() => {
@@ -200,7 +200,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

@@ -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