From 606cf8eae849d6c9b4d669f021f008bb4b2ccdac Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Fri, 6 Nov 2020 21:33:57 +1100
Subject: [PATCH] Add client side ownership protection for profile editing

---
 api/src/services/users/users.js               |  2 --
 web/src/components/UserProfile/UserProfile.js | 11 ++++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/api/src/services/users/users.js b/api/src/services/users/users.js
index ea9b88f..9af1a0e 100644
--- a/api/src/services/users/users.js
+++ b/api/src/services/users/users.js
@@ -8,14 +8,12 @@ export const users = () => {
 }
 
 export const user = ({ id }) => {
-  requireAuth()
   return db.user.findOne({
     where: { id },
   })
 }
 
 export const userName = ({ userName }) => {
-  requireAuth()
   return db.user.findOne({
     where: { userName },
   })
diff --git a/web/src/components/UserProfile/UserProfile.js b/web/src/components/UserProfile/UserProfile.js
index 9710e66..925599e 100644
--- a/web/src/components/UserProfile/UserProfile.js
+++ b/web/src/components/UserProfile/UserProfile.js
@@ -1,4 +1,5 @@
 import {useState, useEffect} from 'react'
+import { useAuth } from '@redwoodjs/auth'
 import { navigate, routes } from '@redwoodjs/router'
 import Editor from "rich-markdown-editor";
 
@@ -8,6 +9,12 @@ import ProfileTextInput from 'src/components/ProfileTextInput'
 
 
 const UserProfile = ({user, isEditable, loading, onSave, error}) => {
+  const { currentUser } = useAuth()
+  const canEdit = currentUser?.sub === user.id
+  useEffect(() => {isEditable &&
+    !canEdit &&
+    navigate(routes.user2({userName: user.userName}))},
+  [currentUser])
   const [input, setInput] = useState({
     userName: user.userName,
     name: user.name,
@@ -39,7 +46,9 @@ const UserProfile = ({user, isEditable, loading, onSave, error}) => {
             })} isEditable={isEditable}/>
             {isEditable ?
               <Button iconName="plus" onClick={() => onSave(user.userName, input)}>Save Profile</Button> : // TODO replace pencil with a save icon
-              <Button iconName="pencil" onClick={() => navigate(routes.editUser2({userName: user.userName}))}>Edit Profile</Button>
+              canEdit ?
+              <Button iconName="pencil" onClick={() => navigate(routes.editUser2({userName: user.userName}))}>Edit Profile</Button>:
+              null
             }
           </div>
         </div>