From c898ef4dc464246b3550661c50d389dd2000a577 Mon Sep 17 00:00:00 2001
From: InfiniteStash <117855276+InfiniteStash@users.noreply.github.com>
Date: Fri, 20 Dec 2024 19:57:52 +0100
Subject: [PATCH] Refactor auth hook (#865)

---
 frontend/src/Login.tsx                        |  8 ++---
 frontend/src/Main.tsx                         |  4 +--
 .../components/deleteButton/DeleteButton.tsx  | 10 +++---
 .../src/components/editCard/AddComment.tsx    |  9 +++---
 frontend/src/components/editCard/VoteBar.tsx  | 14 +++------
 frontend/src/components/form/NoteInput.tsx    | 10 +++---
 frontend/src/{AuthContext.tsx => context.tsx} |  4 ++-
 frontend/src/graphql/queries/index.ts         | 11 +++----
 frontend/src/hooks/index.ts                   |  1 +
 frontend/src/hooks/useAuth.tsx                |  2 +-
 frontend/src/hooks/useCurrentUser.tsx         | 29 +++++++++++++++++
 .../src/pages/activateUser/ActivateUser.tsx   |  8 ++---
 frontend/src/pages/categories/Categories.tsx  | 10 +++---
 frontend/src/pages/categories/Category.tsx    | 10 +++---
 frontend/src/pages/edits/Edit.tsx             | 11 +++----
 .../pages/forgotPassword/ForgotPassword.tsx   |  8 ++---
 frontend/src/pages/performers/Performers.tsx  | 11 +++----
 .../performers/components/performerInfo.tsx   |  9 +++---
 frontend/src/pages/registerUser/Register.tsx  |  8 ++---
 .../src/pages/resetPassword/ResetPassword.tsx |  8 ++---
 frontend/src/pages/scenes/Scene.tsx           |  9 +++---
 frontend/src/pages/scenes/Scenes.tsx          | 11 +++----
 frontend/src/pages/sites/Site.tsx             | 10 +++---
 frontend/src/pages/sites/Sites.tsx            |  9 +++---
 frontend/src/pages/studios/Studio.tsx         |  9 +++---
 frontend/src/pages/studios/Studios.tsx        | 11 +++----
 frontend/src/pages/tags/Tag.tsx               | 10 +++---
 frontend/src/pages/tags/Tags.tsx              | 10 +++---
 frontend/src/pages/users/User.tsx             | 19 ++++++------
 .../pages/users/UserConfirmChangeEmail.tsx    |  2 +-
 frontend/src/pages/users/UserEditForm.tsx     | 12 +++----
 frontend/src/pages/users/UserEdits.tsx        | 31 ++++++++++---------
 frontend/src/pages/users/UserPassword.tsx     |  8 ++---
 .../pages/users/UserValidateChangeEmail.tsx   |  2 +-
 frontend/src/pages/users/index.tsx            |  3 +-
 frontend/src/utils/auth.ts                    | 11 -------
 frontend/src/utils/index.ts                   |  1 -
 frontend/src/utils/user.ts                    | 13 ++++++--
 38 files changed, 189 insertions(+), 177 deletions(-)
 rename frontend/src/{AuthContext.tsx => context.tsx} (73%)
 create mode 100644 frontend/src/hooks/useCurrentUser.tsx
 delete mode 100644 frontend/src/utils/auth.ts

diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index 2c9fdd594..a5eb89c28 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { Button, Col, Form, Row } from "react-bootstrap";
@@ -6,11 +6,11 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import cx from "classnames";
 
-import AuthContext, { ContextType } from "src/AuthContext";
 import { ROUTE_REGISTER, ROUTE_FORGOT_PASSWORD } from "src/constants/route";
 import { getPlatformURL, getCredentialsSetting } from "src/utils/createClient";
 
 import "./App.scss";
+import { useCurrentUser } from "./hooks";
 
 const schema = yup.object({
   username: yup.string().required("Username is required"),
@@ -30,7 +30,7 @@ const Login: FC = () => {
   const [loginError, setLoginError] = useState("");
   const msg = new URLSearchParams(location.search).get("msg");
   const redirect = new URLSearchParams(location.search).get("redirect");
-  const Auth = useContext<ContextType>(AuthContext);
+  const { isAuthenticated } = useCurrentUser();
   const {
     register,
     handleSubmit,
@@ -39,7 +39,7 @@ const Login: FC = () => {
     resolver: yupResolver(schema),
   });
 
-  if (Auth.authenticated) navigate("/");
+  if (isAuthenticated) navigate("/");
 
   const onSubmit = async (formData: LoginFormData) => {
     setLoading(true);
diff --git a/frontend/src/Main.tsx b/frontend/src/Main.tsx
index b7d955019..3045a1e45 100644
--- a/frontend/src/Main.tsx
+++ b/frontend/src/Main.tsx
@@ -6,7 +6,7 @@ import { faBell as faBellOutlined } from "@fortawesome/free-regular-svg-icons";
 
 import SearchField, { SearchType } from "src/components/searchField";
 import { getPlatformURL, getCredentialsSetting } from "src/utils/createClient";
-import { isAdmin, canEdit, userHref, setCachedUser } from "src/utils";
+import { userHref, setCachedUser, canEdit, isAdmin } from "src/utils";
 import { useAuth } from "src/hooks";
 import { Icon } from "src/components/fragments";
 import { useConfig, useUnreadNotificationsCount } from "src/graphql";
@@ -28,7 +28,7 @@ import {
   ROUTE_DRAFTS,
   ROUTE_NOTIFICATIONS,
 } from "src/constants/route";
-import AuthContext from "./AuthContext";
+import AuthContext from "./context";
 
 interface Props {
   children?: React.ReactNode;
diff --git a/frontend/src/components/deleteButton/DeleteButton.tsx b/frontend/src/components/deleteButton/DeleteButton.tsx
index 136cbeac3..a2d33b572 100644
--- a/frontend/src/components/deleteButton/DeleteButton.tsx
+++ b/frontend/src/components/deleteButton/DeleteButton.tsx
@@ -1,10 +1,8 @@
-import { FC, useState, useContext } from "react";
+import { FC, useState } from "react";
 import { Button } from "react-bootstrap";
 
-import AuthContext from "src/AuthContext";
-import { isAdmin } from "src/utils";
-
 import Modal from "src/components/modal";
+import { useCurrentUser } from "src/hooks";
 
 interface DeleteButtonProps {
   message?: string;
@@ -19,8 +17,8 @@ const DeleteButton: FC<DeleteButtonProps> = ({
   disabled = false,
   className,
 }) => {
+  const { isAdmin } = useCurrentUser();
   const [showDelete, setShowDelete] = useState(false);
-  const auth = useContext(AuthContext);
 
   const toggleModal = () => setShowDelete(true);
   const handleDelete = (status: boolean): void => {
@@ -40,7 +38,7 @@ const DeleteButton: FC<DeleteButtonProps> = ({
   return (
     <>
       {deleteModal}
-      {isAdmin(auth.user) && (
+      {isAdmin && (
         <Button
           variant="danger"
           disabled={showDelete || disabled}
diff --git a/frontend/src/components/editCard/AddComment.tsx b/frontend/src/components/editCard/AddComment.tsx
index 48677b52f..c615e14f6 100644
--- a/frontend/src/components/editCard/AddComment.tsx
+++ b/frontend/src/components/editCard/AddComment.tsx
@@ -1,19 +1,18 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { Button, Form } from "react-bootstrap";
 import { GraphQLFormattedError } from "graphql";
 import { useEditComment } from "src/graphql";
 import cx from "classnames";
 
-import AuthContext from "src/AuthContext";
-import { canEdit } from "src/utils";
 import { NoteInput } from "src/components/form";
+import { useCurrentUser } from "src/hooks";
 
 interface IProps {
   editID: string;
 }
 
 const AddComment: FC<IProps> = ({ editID }) => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
   const [showInput, setShowInput] = useState(false);
   const [errors, setErrors] = useState<readonly GraphQLFormattedError[]>([]);
   const [comment, setComment] = useState("");
@@ -22,7 +21,7 @@ const AddComment: FC<IProps> = ({ editID }) => {
   if (!showInput)
     return (
       <div className="d-flex">
-        {!showInput && canEdit(auth.user) && (
+        {!showInput && isEditor && (
           <Button
             className="ms-auto minimal"
             variant="link"
diff --git a/frontend/src/components/editCard/VoteBar.tsx b/frontend/src/components/editCard/VoteBar.tsx
index f67b74553..75679d1c9 100644
--- a/frontend/src/components/editCard/VoteBar.tsx
+++ b/frontend/src/components/editCard/VoteBar.tsx
@@ -1,9 +1,8 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { Button, Form } from "react-bootstrap";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 
-import AuthContext from "src/AuthContext";
 import {
   VoteStatusEnum,
   VoteTypeEnum,
@@ -11,7 +10,7 @@ import {
   EditFragment,
 } from "src/graphql";
 import { Icon } from "src/components/fragments";
-import { canVote } from "src/utils";
+import { useCurrentUser } from "src/hooks";
 
 const CLASSNAME = "VoteBar";
 const CLASSNAME_BUTTON = `${CLASSNAME}-button`;
@@ -23,10 +22,8 @@ interface Props {
 }
 
 const VoteBar: FC<Props> = ({ edit }) => {
-  const auth = useContext(AuthContext);
-  const userVote = (edit.votes ?? []).find(
-    (v) => v.user?.id && v.user.id === auth.user?.id,
-  );
+  const { isVoter, isSelf } = useCurrentUser();
+  const userVote = (edit.votes ?? []).find((v) => v.user?.id && isSelf(v.user));
   const [vote, setVote] = useState<VoteTypeEnum | null>(userVote?.vote ?? null);
   const [submitVote, { loading: savingVote }] = useVote();
 
@@ -42,8 +39,7 @@ const VoteBar: FC<Props> = ({ edit }) => {
   );
 
   // Only show vote total for edit owner and users without vote role
-  if (!canVote(auth.user) || auth.user?.id === edit.user?.id)
-    return <div>{currentVote}</div>;
+  if (!isVoter || isSelf(edit.user)) return <div>{currentVote}</div>;
 
   const handleSave = () => {
     if (!vote) return;
diff --git a/frontend/src/components/form/NoteInput.tsx b/frontend/src/components/form/NoteInput.tsx
index c33a7c30d..b8ed09b11 100644
--- a/frontend/src/components/form/NoteInput.tsx
+++ b/frontend/src/components/form/NoteInput.tsx
@@ -1,10 +1,10 @@
-import { FC, ChangeEvent, useContext, useState } from "react";
+import { FC, ChangeEvent, useState } from "react";
 import { Form, Tabs, Tab } from "react-bootstrap";
 import cx from "classnames";
 
-import AuthContext from "src/AuthContext";
 import EditComment from "src/components/editCard/EditComment";
 import { UseFormRegister } from "react-hook-form";
+import { useCurrentUser } from "src/hooks";
 
 interface IProps {
   onChange?: (text: string) => void;
@@ -20,7 +20,7 @@ const NoteInput: FC<IProps> = ({
   register,
   hasError = false,
 }) => {
-  const auth = useContext(AuthContext);
+  const { user } = useCurrentUser();
   const [comment, setComment] = useState("");
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -45,10 +45,10 @@ const NoteInput: FC<IProps> = ({
         </Tab>
         <Tab eventKey="preview" title="Preview" unmountOnExit mountOnEnter>
           <EditComment
-            id={`${auth.user?.id}-${now}`}
+            id={`${user?.id}-${now}`}
             comment={comment}
             date={now}
-            user={auth.user}
+            user={user}
           />
         </Tab>
       </Tabs>
diff --git a/frontend/src/AuthContext.tsx b/frontend/src/context.tsx
similarity index 73%
rename from frontend/src/AuthContext.tsx
rename to frontend/src/context.tsx
index 09f872e8f..73a4c919a 100644
--- a/frontend/src/AuthContext.tsx
+++ b/frontend/src/context.tsx
@@ -1,4 +1,4 @@
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 
 import { RoleEnum } from "src/graphql";
 
@@ -17,4 +17,6 @@ const AuthContext = createContext<ContextType>({
   authenticated: false,
 });
 
+export const useAuthContext = () => useContext(AuthContext);
+
 export default AuthContext;
diff --git a/frontend/src/graphql/queries/index.ts b/frontend/src/graphql/queries/index.ts
index bfc886f21..ad281365f 100644
--- a/frontend/src/graphql/queries/index.ts
+++ b/frontend/src/graphql/queries/index.ts
@@ -1,4 +1,3 @@
-import { useContext } from "react";
 import {
   useQuery,
   useLazyQuery,
@@ -6,9 +5,6 @@ import {
   LazyQueryHookOptions,
 } from "@apollo/client";
 
-import AuthContext from "src/AuthContext";
-import { isAdmin } from "src/utils";
-
 import {
   CategoryDocument,
   CategoryQueryVariables,
@@ -79,6 +75,7 @@ import {
   NotificationsQueryVariables,
   UnreadNotificationCountDocument,
 } from "../types";
+import { useCurrentUser } from "src/hooks";
 
 export const useCategory = (variables: CategoryQueryVariables, skip = false) =>
   useQuery(CategoryDocument, {
@@ -237,9 +234,9 @@ export const usePublicUser = (
   });
 
 export const useUser = (variables: UserQueryVariables, skip = false) => {
-  const Auth = useContext(AuthContext);
-  const isUser = () => Auth.user?.name === variables.name;
-  const showPrivate = isUser() || isAdmin(Auth.user);
+  const { isAdmin, user } = useCurrentUser();
+  const isUser = () => user?.name === variables.name;
+  const showPrivate = isUser() || isAdmin;
 
   const privateUser = usePrivateUser(variables, skip || !showPrivate);
   const publicUser = usePublicUser(variables, skip || showPrivate);
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index 261f12112..0b1d5f6d4 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -3,3 +3,4 @@ export { default as useEditFilter } from "./useEditFilter";
 export { default as useAuth } from "./useAuth";
 export { useToast } from "./useToast";
 export { useQueryParams } from "./useQueryParams";
+export { useCurrentUser } from "./useCurrentUser";
diff --git a/frontend/src/hooks/useAuth.tsx b/frontend/src/hooks/useAuth.tsx
index ffe6e26b6..56033b544 100644
--- a/frontend/src/hooks/useAuth.tsx
+++ b/frontend/src/hooks/useAuth.tsx
@@ -1,6 +1,6 @@
 import { useMe } from "src/graphql";
 import { getCachedUser, setCachedUser } from "src/utils";
-import { User } from "../AuthContext";
+import { User } from "../context";
 
 interface AuthResult {
   loading: boolean;
diff --git a/frontend/src/hooks/useCurrentUser.tsx b/frontend/src/hooks/useCurrentUser.tsx
new file mode 100644
index 000000000..b37e5a319
--- /dev/null
+++ b/frontend/src/hooks/useCurrentUser.tsx
@@ -0,0 +1,29 @@
+import { useContext, useMemo, useCallback } from "react";
+
+import AuthContext from "src/context";
+import { isAdmin as userIsAdmin, canEdit, canVote } from "src/utils";
+
+export const useCurrentUser = () => {
+  const auth = useContext(AuthContext);
+
+  const isAdmin = useMemo(() => userIsAdmin(auth.user), [auth.user]);
+  const isEditor = useMemo(() => canEdit(auth.user), [auth.user]);
+  const isVoter = useMemo(() => canVote(auth.user), [auth.user]);
+  const isSelf = useCallback(
+    (user?: (typeof auth)["user"] | string | null) => {
+      if (!auth.user?.id || !user) return false;
+      if (typeof user === "string") return user === auth.user.id;
+      return user?.id === auth.user.id;
+    },
+    [auth.user],
+  );
+
+  return {
+    isAdmin,
+    isSelf,
+    isEditor,
+    isVoter,
+    isAuthenticated: auth.authenticated,
+    user: auth.user,
+  };
+};
diff --git a/frontend/src/pages/activateUser/ActivateUser.tsx b/frontend/src/pages/activateUser/ActivateUser.tsx
index 8f9c65f35..944f491dc 100644
--- a/frontend/src/pages/activateUser/ActivateUser.tsx
+++ b/frontend/src/pages/activateUser/ActivateUser.tsx
@@ -1,16 +1,16 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { ApolloError } from "@apollo/client";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Button, Form, Row, Col } from "react-bootstrap";
-import AuthContext, { ContextType } from "src/AuthContext";
 import * as yup from "yup";
 import cx from "classnames";
 
 import { useActivateUser } from "src/graphql";
 import { ROUTE_HOME, ROUTE_LOGIN } from "src/constants/route";
 import Title from "src/components/title";
+import { useCurrentUser } from "src/hooks";
 
 const schema = yup.object({
   name: yup.string().required("Username is required"),
@@ -26,7 +26,7 @@ function useQuery() {
 const ActivateNewUserPage: FC = () => {
   const query = useQuery();
   const navigate = useNavigate();
-  const Auth = useContext<ContextType>(AuthContext);
+  const { isAuthenticated } = useCurrentUser();
   const [submitError, setSubmitError] = useState<string | undefined>();
 
   const {
@@ -39,7 +39,7 @@ const ActivateNewUserPage: FC = () => {
 
   const [activateNewUser] = useActivateUser();
 
-  if (Auth.authenticated) navigate(ROUTE_HOME);
+  if (isAuthenticated) navigate(ROUTE_HOME);
 
   const onSubmit = (formData: ActivateNewUserFormData) => {
     const userData = {
diff --git a/frontend/src/pages/categories/Categories.tsx b/frontend/src/pages/categories/Categories.tsx
index cda73df02..db06a626d 100644
--- a/frontend/src/pages/categories/Categories.tsx
+++ b/frontend/src/pages/categories/Categories.tsx
@@ -1,16 +1,16 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 import { Button, Card } from "react-bootstrap";
 import { sortBy, groupBy } from "lodash-es";
 
 import { useCategories } from "src/graphql";
 import { LoadingIndicator } from "src/components/fragments";
-import { isAdmin, createHref } from "src/utils";
+import { createHref } from "src/utils";
 import { ROUTE_CATEGORY, ROUTE_CATEGORY_ADD } from "src/constants/route";
-import AuthContext from "src/AuthContext";
+import { useCurrentUser } from "src/hooks";
 
 const CategoryList: FC = () => {
-  const auth = useContext(AuthContext);
+  const { isAdmin } = useCurrentUser();
   const { loading, data } = useCategories();
 
   const categoryGroups = groupBy(
@@ -43,7 +43,7 @@ const CategoryList: FC = () => {
     <>
       <div className="d-flex">
         <h3 className="me-4">Categories</h3>
-        {isAdmin(auth.user) && (
+        {isAdmin && (
           <Link to={ROUTE_CATEGORY_ADD} className="ms-auto">
             <Button>Create</Button>
           </Link>
diff --git a/frontend/src/pages/categories/Category.tsx b/frontend/src/pages/categories/Category.tsx
index 661467071..98e9df873 100644
--- a/frontend/src/pages/categories/Category.tsx
+++ b/frontend/src/pages/categories/Category.tsx
@@ -1,13 +1,13 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Button, Row } from "react-bootstrap";
 
 import { useDeleteCategory, CategoryQuery } from "src/graphql";
-import AuthContext from "src/AuthContext";
-import { isAdmin, createHref } from "src/utils";
+import { createHref } from "src/utils";
 import DeleteButton from "src/components/deleteButton";
 import { TagList } from "src/components/list";
 import { ROUTE_CATEGORIES, ROUTE_CATEGORY_EDIT } from "src/constants/route";
+import { useCurrentUser } from "src/hooks";
 
 type Category = NonNullable<CategoryQuery["findTagCategory"]>;
 
@@ -17,7 +17,7 @@ interface Props {
 
 const CategoryComponent: FC<Props> = ({ category }) => {
   const navigate = useNavigate();
-  const auth = useContext(AuthContext);
+  const { isAdmin } = useCurrentUser();
 
   const [deleteCategory, { loading: deleting }] = useDeleteCategory({
     onCompleted: (result) => {
@@ -43,7 +43,7 @@ const CategoryComponent: FC<Props> = ({ category }) => {
           <em>{category.name}</em>
         </h3>
         <div className="ms-auto">
-          {isAdmin(auth.user) && (
+          {isAdmin && (
             <>
               <Link
                 to={createHref(ROUTE_CATEGORY_EDIT, category)}
diff --git a/frontend/src/pages/edits/Edit.tsx b/frontend/src/pages/edits/Edit.tsx
index 8a3984875..c37f86c7f 100644
--- a/frontend/src/pages/edits/Edit.tsx
+++ b/frontend/src/pages/edits/Edit.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useContext } from "react";
+import { FC, useState } from "react";
 import { Button } from "react-bootstrap";
 import { useParams, Link } from "react-router-dom";
 
@@ -9,7 +9,7 @@ import {
   VoteStatusEnum,
   OperationEnum,
 } from "src/graphql";
-import AuthContext from "src/AuthContext";
+import { useCurrentUser } from "src/hooks";
 import { ErrorMessage, LoadingIndicator } from "src/components/fragments";
 import EditCard from "src/components/editCard";
 import Modal from "src/components/modal";
@@ -20,7 +20,6 @@ import {
   ROUTE_EDIT_UPDATE,
 } from "src/constants";
 import {
-  isAdmin,
   getEditTargetRoute,
   getEditTargetName,
   getEditDetailsName,
@@ -28,7 +27,7 @@ import {
 } from "src/utils";
 
 const EditComponent: FC = () => {
-  const auth = useContext(AuthContext);
+  const { isAdmin, isSelf } = useCurrentUser();
   const { id } = useParams();
   const [showApply, setShowApply] = useState(false);
   const [showCancel, setShowCancel] = useState(false);
@@ -78,7 +77,7 @@ const EditComponent: FC = () => {
 
   const mutating = cancelling || applying;
 
-  const buttons = (isAdmin(auth.user) || auth.user?.id === edit.user?.id) &&
+  const buttons = (isAdmin || isSelf(edit.user?.id)) &&
     edit.status === VoteStatusEnum.PENDING && (
       <div className="d-flex justify-content-end">
         {edit.updatable && (
@@ -96,7 +95,7 @@ const EditComponent: FC = () => {
         >
           Cancel Edit
         </Button>
-        {isAdmin(auth.user) && (
+        {isAdmin && (
           <Button
             variant="danger"
             disabled={showApply || mutating}
diff --git a/frontend/src/pages/forgotPassword/ForgotPassword.tsx b/frontend/src/pages/forgotPassword/ForgotPassword.tsx
index 3953b107c..784b7d0a8 100644
--- a/frontend/src/pages/forgotPassword/ForgotPassword.tsx
+++ b/frontend/src/pages/forgotPassword/ForgotPassword.tsx
@@ -1,16 +1,16 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { ApolloError } from "@apollo/client";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { Button, Form, Row, Col } from "react-bootstrap";
-import AuthContext, { ContextType } from "src/AuthContext";
 import * as yup from "yup";
 import cx from "classnames";
 
 import Title from "src/components/title";
 import { useResetPassword } from "src/graphql";
 import { ROUTE_HOME } from "src/constants/route";
+import { useCurrentUser } from "src/hooks";
 
 const schema = yup.object({
   email: yup.string().email().required("Email is required"),
@@ -19,8 +19,8 @@ type ResetPasswordFormData = yup.Asserts<typeof schema>;
 
 const ForgotPassword: FC = () => {
   const navigate = useNavigate();
+  const { isAuthenticated } = useCurrentUser();
   const [resetEmail, setResetEmail] = useState("");
-  const Auth = useContext<ContextType>(AuthContext);
   const [submitError, setSubmitError] = useState<string | undefined>();
 
   const {
@@ -33,7 +33,7 @@ const ForgotPassword: FC = () => {
 
   const [resetPassword, { loading }] = useResetPassword();
 
-  if (Auth.authenticated) navigate(ROUTE_HOME);
+  if (isAuthenticated) navigate(ROUTE_HOME);
 
   const onSubmit = (formData: ResetPasswordFormData) => {
     const userData = {
diff --git a/frontend/src/pages/performers/Performers.tsx b/frontend/src/pages/performers/Performers.tsx
index 31a079415..c3b17b0be 100644
--- a/frontend/src/pages/performers/Performers.tsx
+++ b/frontend/src/pages/performers/Performers.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 import { Button, Col, Form, InputGroup, Row } from "react-bootstrap";
 import Select from "react-select";
@@ -14,11 +14,10 @@ import {
   GenderFilterEnum,
   PerformerSortEnum,
 } from "src/graphql";
-import { usePagination, useQueryParams } from "src/hooks";
+import { useCurrentUser, usePagination, useQueryParams } from "src/hooks";
 import { ErrorMessage, Icon } from "src/components/fragments";
 import PerformerCard from "src/components/performerCard";
-import { canEdit, ensureEnum, resolveEnum } from "src/utils";
-import AuthContext from "src/AuthContext";
+import { ensureEnum, resolveEnum } from "src/utils";
 import { List } from "src/components/list";
 import { ROUTE_PERFORMER_ADD, GenderFilterTypes } from "src/constants";
 
@@ -40,7 +39,7 @@ const sortOptions = [
 ];
 
 const PerformersComponent: FC = () => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
   const [params, setParams] = useQueryParams({
     query: { name: "query", type: "string", default: "" },
     gender: { name: "gender", type: "string" },
@@ -148,7 +147,7 @@ const PerformersComponent: FC = () => {
     <>
       <div className="d-flex">
         <h3 className="me-4">Performers</h3>
-        {canEdit(auth.user) && (
+        {isEditor && (
           <Link to={ROUTE_PERFORMER_ADD} className="ms-auto">
             <Button>Create</Button>
           </Link>
diff --git a/frontend/src/pages/performers/components/performerInfo.tsx b/frontend/src/pages/performers/components/performerInfo.tsx
index 7b4309df3..3a050fd2b 100644
--- a/frontend/src/pages/performers/components/performerInfo.tsx
+++ b/frontend/src/pages/performers/components/performerInfo.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 import { Button, Card, Col, Row, Table } from "react-bootstrap";
 import { faCodeMerge } from "@fortawesome/free-solid-svg-icons";
@@ -9,9 +9,8 @@ import {
   usePerformer,
 } from "src/graphql";
 
-import AuthContext from "src/AuthContext";
+import { useCurrentUser } from "src/hooks";
 import {
-  canEdit,
   getCountryByISO,
   formatBodyModifications,
   formatMeasurements,
@@ -49,9 +48,9 @@ interface Props {
 }
 
 const Actions: FC<Props> = ({ performer }) => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
 
-  if (!canEdit(auth?.user) || performer.deleted) return null;
+  if (!isEditor || performer.deleted) return null;
 
   return (
     <Row className={CLASSNAME_ACTIONS}>
diff --git a/frontend/src/pages/registerUser/Register.tsx b/frontend/src/pages/registerUser/Register.tsx
index 8aea98242..b12f4dc31 100644
--- a/frontend/src/pages/registerUser/Register.tsx
+++ b/frontend/src/pages/registerUser/Register.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { ApolloError } from "@apollo/client";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
@@ -9,10 +9,10 @@ import cx from "classnames";
 import { ErrorMessage, LoadingIndicator } from "src/components/fragments";
 import Title from "src/components/title";
 import { useNewUser, useConfig, ConfigQuery } from "src/graphql";
-import AuthContext, { ContextType } from "src/AuthContext";
 import * as yup from "yup";
 
 import { ROUTE_HOME, ROUTE_ACTIVATE, ROUTE_LOGIN } from "src/constants/route";
+import { useCurrentUser } from "src/hooks";
 
 const schema = yup.object({
   email: yup.string().email().required("Email is required"),
@@ -31,7 +31,7 @@ interface Props {
 const Register: FC<Props> = ({ config }) => {
   const navigate = useNavigate();
   const [awaitingActivation, setAwaitingActivation] = useState(false);
-  const Auth = useContext<ContextType>(AuthContext);
+  const { isAuthenticated } = useCurrentUser();
   const [submitError, setSubmitError] = useState<string | undefined>();
 
   const inviteRequired = config.require_invite ?? true;
@@ -46,7 +46,7 @@ const Register: FC<Props> = ({ config }) => {
 
   const [newUser] = useNewUser();
 
-  if (Auth.authenticated) navigate(ROUTE_HOME);
+  if (isAuthenticated) navigate(ROUTE_HOME);
 
   const onSubmit = (formData: RegisterFormData) => {
     const userData = {
diff --git a/frontend/src/pages/resetPassword/ResetPassword.tsx b/frontend/src/pages/resetPassword/ResetPassword.tsx
index a4f0af383..54b65f412 100644
--- a/frontend/src/pages/resetPassword/ResetPassword.tsx
+++ b/frontend/src/pages/resetPassword/ResetPassword.tsx
@@ -1,9 +1,8 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
 import { isApolloError } from "@apollo/client";
 import { useNavigate, useLocation } from "react-router-dom";
-import AuthContext, { ContextType } from "src/AuthContext";
 import * as yup from "yup";
 import cx from "classnames";
 import { Button, Form, Row, Col } from "react-bootstrap";
@@ -11,6 +10,7 @@ import { Button, Form, Row, Col } from "react-bootstrap";
 import { ErrorMessage } from "src/components/fragments";
 import Title from "src/components/title";
 import { useChangePassword } from "src/graphql";
+import { useCurrentUser } from "src/hooks";
 import { ROUTE_HOME, ROUTE_LOGIN } from "src/constants/route";
 
 const schema = yup.object({
@@ -46,8 +46,8 @@ function useQuery() {
 const ResetPassword: FC = () => {
   const navigate = useNavigate();
   const query = useQuery();
-  const Auth = useContext<ContextType>(AuthContext);
   const [submitError, setSubmitError] = useState<string | undefined>();
+  const { isAuthenticated } = useCurrentUser();
 
   const {
     register,
@@ -59,7 +59,7 @@ const ResetPassword: FC = () => {
 
   const [changePassword, { loading }] = useChangePassword();
 
-  if (Auth.authenticated) navigate(ROUTE_HOME);
+  if (isAuthenticated) navigate(ROUTE_HOME);
 
   const key = query.get("key");
 
diff --git a/frontend/src/pages/scenes/Scene.tsx b/frontend/src/pages/scenes/Scene.tsx
index 58ad5905d..06e755392 100644
--- a/frontend/src/pages/scenes/Scene.tsx
+++ b/frontend/src/pages/scenes/Scene.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Button, Card, Tabs, Tab } from "react-bootstrap";
 
@@ -7,9 +7,8 @@ import {
   TargetTypeEnum,
   SceneFragment as Scene,
 } from "src/graphql";
-import AuthContext from "src/AuthContext";
+import { useCurrentUser } from "src/hooks";
 import {
-  canEdit,
   tagHref,
   performerHref,
   studioHref,
@@ -35,7 +34,7 @@ const SceneComponent: FC<Props> = ({ scene }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const activeTab = location.hash?.slice(1) || DEFAULT_TAB;
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
 
   const { data: editData } = usePendingEditsCount({
     type: TargetTypeEnum.SCENE,
@@ -79,7 +78,7 @@ const SceneComponent: FC<Props> = ({ scene }) => {
       <Card className="scene-info">
         <Card.Header>
           <div className="float-end">
-            {canEdit(auth.user) && !scene.deleted && (
+            {isEditor && !scene.deleted && (
               <>
                 <Link to={createHref(ROUTE_SCENE_EDIT, { id: scene.id })}>
                   <Button>Edit</Button>
diff --git a/frontend/src/pages/scenes/Scenes.tsx b/frontend/src/pages/scenes/Scenes.tsx
index 2555d16b2..0cc0aa666 100644
--- a/frontend/src/pages/scenes/Scenes.tsx
+++ b/frontend/src/pages/scenes/Scenes.tsx
@@ -1,16 +1,15 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
 import { CriterionModifier, useConfig } from "src/graphql";
-import { canEdit, createHref } from "src/utils";
-import AuthContext from "src/AuthContext";
+import { createHref } from "src/utils";
 import { SceneList } from "src/components/list";
-import { useQueryParams } from "src/hooks";
+import { useQueryParams, useCurrentUser } from "src/hooks";
 import { ROUTE_SCENE_ADD } from "src/constants/route";
 
 const Scenes: FC = () => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
   const { data: configData } = useConfig();
   const [{ fingerprint }] = useQueryParams({
     fingerprint: { name: "fingerprint", type: "string" },
@@ -28,7 +27,7 @@ const Scenes: FC = () => {
     <>
       <div className="d-flex">
         <h3 className="me-4">Scenes</h3>
-        {canEdit(auth.user) && !configData?.getConfig.require_scene_draft && (
+        {isEditor && !configData?.getConfig.require_scene_draft && (
           <Link to={createHref(ROUTE_SCENE_ADD)} className="ms-auto">
             <Button>Create</Button>
           </Link>
diff --git a/frontend/src/pages/sites/Site.tsx b/frontend/src/pages/sites/Site.tsx
index 0a8dc3a79..e1be7155d 100644
--- a/frontend/src/pages/sites/Site.tsx
+++ b/frontend/src/pages/sites/Site.tsx
@@ -1,13 +1,13 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Button } from "react-bootstrap";
 
 import { useDeleteSite, SiteQuery } from "src/graphql";
-import AuthContext from "src/AuthContext";
-import { isAdmin, createHref } from "src/utils";
+import { createHref } from "src/utils";
 import { SiteLink } from "src/components/fragments";
 import DeleteButton from "src/components/deleteButton";
 import { ROUTE_SITES, ROUTE_SITE_EDIT } from "src/constants/route";
+import { useCurrentUser } from "src/hooks";
 
 type Site = NonNullable<SiteQuery["findSite"]>;
 
@@ -17,7 +17,7 @@ interface Props {
 
 const SiteComponent: FC<Props> = ({ site }) => {
   const navigate = useNavigate();
-  const auth = useContext(AuthContext);
+  const { isAdmin } = useCurrentUser();
 
   const [deleteSite, { loading: deleting }] = useDeleteSite({
     onCompleted: (result) => {
@@ -42,7 +42,7 @@ const SiteComponent: FC<Props> = ({ site }) => {
         <h3 className="me-auto">
           <SiteLink site={site} />
         </h3>
-        {isAdmin(auth.user) && (
+        {isAdmin && (
           <div className="ms-auto">
             <Link to={createHref(ROUTE_SITE_EDIT, site)} className="me-2">
               <Button>Edit</Button>
diff --git a/frontend/src/pages/sites/Sites.tsx b/frontend/src/pages/sites/Sites.tsx
index 027761b3b..35b795189 100644
--- a/frontend/src/pages/sites/Sites.tsx
+++ b/frontend/src/pages/sites/Sites.tsx
@@ -1,16 +1,15 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 import { Button, Card } from "react-bootstrap";
 import { sortBy } from "lodash-es";
 
 import { useSites } from "src/graphql";
 import { LoadingIndicator, SiteLink } from "src/components/fragments";
-import { isAdmin } from "src/utils";
 import { ROUTE_SITE_ADD } from "src/constants/route";
-import AuthContext from "src/AuthContext";
+import { useCurrentUser } from "src/hooks";
 
 const SiteList: FC = () => {
-  const auth = useContext(AuthContext);
+  const { isAdmin } = useCurrentUser();
   const { loading, data } = useSites();
 
   const sites = sortBy(data?.querySites.sites ?? [], (s) =>
@@ -21,7 +20,7 @@ const SiteList: FC = () => {
     <>
       <div className="d-flex">
         <h3 className="me-4">Sites</h3>
-        {isAdmin(auth.user) && (
+        {isAdmin && (
           <Link to={ROUTE_SITE_ADD} className="ms-auto">
             <Button>Create</Button>
           </Link>
diff --git a/frontend/src/pages/studios/Studio.tsx b/frontend/src/pages/studios/Studio.tsx
index 29d8458d9..640fd23a2 100644
--- a/frontend/src/pages/studios/Studio.tsx
+++ b/frontend/src/pages/studios/Studio.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Button, Tab, Tabs } from "react-bootstrap";
 import { sortBy } from "lodash-es";
@@ -9,6 +9,7 @@ import {
   CriterionModifier,
   StudioFragment as Studio,
 } from "src/graphql";
+import { useCurrentUser } from "src/hooks";
 import { EditList, SceneList, URLList } from "src/components/list";
 import { StudioPerformers } from "./components";
 
@@ -16,13 +17,11 @@ import {
   getImage,
   createHref,
   studioHref,
-  canEdit,
   formatPendingEdits,
   getUrlBySite,
 } from "src/utils";
 import { ROUTE_STUDIO_EDIT, ROUTE_STUDIO_DELETE } from "src/constants/route";
 import { FavoriteStar } from "src/components/fragments";
-import AuthContext from "src/AuthContext";
 
 const DEFAULT_TAB = "scenes";
 
@@ -31,7 +30,7 @@ interface Props {
 }
 
 const StudioComponent: FC<Props> = ({ studio }) => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
   const navigate = useNavigate();
   const location = useLocation();
   const activeTab = location.hash?.slice(1) || DEFAULT_TAB;
@@ -105,7 +104,7 @@ const StudioComponent: FC<Props> = ({ studio }) => {
           </div>
         )}
         <div>
-          {canEdit(auth.user) && !studio.deleted && (
+          {isEditor && !studio.deleted && (
             <>
               <Link to={createHref(ROUTE_STUDIO_EDIT, studio)} className="ms-2">
                 <Button>Edit</Button>
diff --git a/frontend/src/pages/studios/Studios.tsx b/frontend/src/pages/studios/Studios.tsx
index 710cd4a98..f358208c7 100644
--- a/frontend/src/pages/studios/Studios.tsx
+++ b/frontend/src/pages/studios/Studios.tsx
@@ -1,20 +1,19 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Button, Card, Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
-import { studioHref, createHref, canEdit } from "src/utils";
+import { studioHref, createHref } from "src/utils";
 import { ROUTE_STUDIO_ADD } from "src/constants/route";
 import { debounce } from "lodash-es";
-import AuthContext from "src/AuthContext";
 
 import { useStudios, SortDirectionEnum, StudioSortEnum } from "src/graphql";
-import { usePagination, useQueryParams } from "src/hooks";
+import { useCurrentUser, usePagination, useQueryParams } from "src/hooks";
 import { List } from "src/components/list";
 import { FavoriteStar } from "src/components/fragments";
 
 const PER_PAGE = 40;
 
 const StudiosComponent: FC = () => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
   const [params, setParams] = useQueryParams({
     query: { name: "query", type: "string", default: "" },
     favorite: { name: "favorite", type: "string", default: "false" },
@@ -73,7 +72,7 @@ const StudiosComponent: FC = () => {
     <>
       <div className="d-flex">
         <h3 className="me-4">Studios</h3>
-        {canEdit(auth.user) && (
+        {isEditor && (
           <Link to={createHref(ROUTE_STUDIO_ADD)} className="ms-auto">
             <Button className="me-auto">Create</Button>
           </Link>
diff --git a/frontend/src/pages/tags/Tag.tsx b/frontend/src/pages/tags/Tag.tsx
index d23c36ec7..2018a9449 100644
--- a/frontend/src/pages/tags/Tag.tsx
+++ b/frontend/src/pages/tags/Tag.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Button, Tab, Tabs } from "react-bootstrap";
 
@@ -9,16 +9,16 @@ import {
   TagFragment as Tag,
 } from "src/graphql";
 
-import AuthContext from "src/AuthContext";
 import { Tooltip } from "src/components/fragments";
 import { EditList, SceneList } from "src/components/list";
-import { canEdit, createHref, tagHref, formatPendingEdits } from "src/utils";
+import { createHref, tagHref, formatPendingEdits } from "src/utils";
 import {
   ROUTE_TAG_EDIT,
   ROUTE_TAG_MERGE,
   ROUTE_TAG_DELETE,
   ROUTE_CATEGORY,
 } from "src/constants/route";
+import { useCurrentUser } from "src/hooks";
 
 const DEFAULT_TAB = "scenes";
 
@@ -27,7 +27,7 @@ interface Props {
 }
 
 const TagComponent: FC<Props> = ({ tag }) => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
   const navigate = useNavigate();
   const location = useLocation();
   const activeTab = location.hash?.slice(1) || DEFAULT_TAB;
@@ -48,7 +48,7 @@ const TagComponent: FC<Props> = ({ tag }) => {
           <span className="me-2">Tag:</span>
           {tag.deleted ? <del>{tag.name}</del> : <em>{tag.name}</em>}
         </h3>
-        {canEdit(auth.user) && !tag.deleted && (
+        {isEditor && !tag.deleted && (
           <div className="ms-auto">
             <Link to={tagHref(tag, ROUTE_TAG_EDIT)} className="ms-2">
               <Button>Edit</Button>
diff --git a/frontend/src/pages/tags/Tags.tsx b/frontend/src/pages/tags/Tags.tsx
index de57d33e5..c75bfdb89 100644
--- a/frontend/src/pages/tags/Tags.tsx
+++ b/frontend/src/pages/tags/Tags.tsx
@@ -1,19 +1,19 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
 import { TagList } from "src/components/list";
-import { canEdit, createHref } from "src/utils";
+import { createHref } from "src/utils";
 import { ROUTE_TAG_ADD } from "src/constants/route";
-import AuthContext from "src/AuthContext";
+import { useCurrentUser } from "src/hooks";
 
 const Tags: FC = () => {
-  const auth = useContext(AuthContext);
+  const { isEditor } = useCurrentUser();
   return (
     <>
       <div className="d-flex">
         <h3>Tags</h3>
-        {canEdit(auth.user) && (
+        {isEditor && (
           <Link to={createHref(ROUTE_TAG_ADD)} className="ms-auto">
             <Button className="ms-auto">Create</Button>
           </Link>
diff --git a/frontend/src/pages/users/User.tsx b/frontend/src/pages/users/User.tsx
index ef1974f8e..6eb15c280 100644
--- a/frontend/src/pages/users/User.tsx
+++ b/frontend/src/pages/users/User.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useContext } from "react";
+import { FC, useState } from "react";
 import { Link } from "react-router-dom";
 import { Button, Col, Form, InputGroup, Row, Table } from "react-bootstrap";
 import {
@@ -24,8 +24,7 @@ import {
   GenerateInviteCodeInput,
   useRequestChangeEmail,
 } from "src/graphql";
-import { useToast } from "src/hooks";
-import AuthContext from "src/AuthContext";
+import { useCurrentUser, useToast } from "src/hooks";
 import {
   ROUTE_USER_EDIT,
   ROUTE_USER_PASSWORD,
@@ -35,7 +34,7 @@ import {
 } from "src/constants/route";
 import Modal from "src/components/modal";
 import { Icon, Tooltip } from "src/components/fragments";
-import { isAdmin, isPrivateUser, createHref, formatDateTime } from "src/utils";
+import { isPrivateUser, createHref, formatDateTime } from "src/utils";
 import { EditStatusTypes, VoteTypes } from "src/constants";
 import { GenerateInviteKeyModal } from "./GenerateInviteKeyModal";
 import { isApolloError } from "@apollo/client";
@@ -137,7 +136,7 @@ interface Props {
 }
 
 const UserComponent: FC<Props> = ({ user, refetch }) => {
-  const Auth = useContext(AuthContext);
+  const { isAdmin, isSelf } = useCurrentUser();
   const { data: configData } = useConfig();
   const [showDelete, setShowDelete] = useState(false);
   const [showRegenerateAPIKey, setShowRegenerateAPIKey] = useState(false);
@@ -154,7 +153,7 @@ const UserComponent: FC<Props> = ({ user, refetch }) => {
   const [requestChangeEmail] = useRequestChangeEmail();
 
   const showPrivate = isPrivateUser(user);
-  const isOwner = showPrivate && user.id === Auth.user?.id;
+  const isOwner = showPrivate && isSelf(user);
 
   const endpointURL = configData && `${configData.getConfig.host_url}/graphql`;
 
@@ -175,7 +174,7 @@ const UserComponent: FC<Props> = ({ user, refetch }) => {
 
   const handleRegenerateAPIKey = (status: boolean): void => {
     if (status) {
-      const userID = user.id === Auth.user?.id ? null : user.id;
+      const userID = isSelf(user.id) ? null : user.id;
       regenerateAPIKey({ variables: { user_id: userID } }).then(() => {
         refetch();
       });
@@ -319,7 +318,7 @@ const UserComponent: FC<Props> = ({ user, refetch }) => {
                 Change Email
               </Button>
             )}
-            {isAdmin(Auth.user) && (
+            {isAdmin && (
               <>
                 <Link to={createHref(ROUTE_USER_EDIT, user)} className="ms-2">
                   <Button>Edit User</Button>
@@ -433,13 +432,13 @@ const UserComponent: FC<Props> = ({ user, refetch }) => {
             <Row>
               <Col xs={2}>Invite Tokens</Col>
               <InputGroup className="col">
-                {isAdmin(Auth.user) && (
+                {isAdmin && (
                   <Button onClick={() => handleRevokeInvite()}>
                     <Icon icon={faMinus} />
                   </Button>
                 )}
                 <InputGroup.Text>{user.invite_tokens ?? 0}</InputGroup.Text>
-                {isAdmin(Auth.user) && (
+                {isAdmin && (
                   <Button onClick={() => handleGrantInvite()}>
                     <Icon icon={faPlus} />
                   </Button>
diff --git a/frontend/src/pages/users/UserConfirmChangeEmail.tsx b/frontend/src/pages/users/UserConfirmChangeEmail.tsx
index 9a6b7e8d0..97647ff1b 100644
--- a/frontend/src/pages/users/UserConfirmChangeEmail.tsx
+++ b/frontend/src/pages/users/UserConfirmChangeEmail.tsx
@@ -3,7 +3,7 @@ import { isApolloError } from "@apollo/client";
 import { useNavigate } from "react-router-dom";
 import { Button, Form } from "react-bootstrap";
 
-import type { User } from "src/AuthContext";
+import type { User } from "src/context";
 import { useQueryParams, useToast } from "src/hooks";
 import { userHref } from "src/utils";
 import { ErrorMessage } from "src/components/fragments";
diff --git a/frontend/src/pages/users/UserEditForm.tsx b/frontend/src/pages/users/UserEditForm.tsx
index 4a5efd0ce..928862628 100644
--- a/frontend/src/pages/users/UserEditForm.tsx
+++ b/frontend/src/pages/users/UserEditForm.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext } from "react";
+import { FC } from "react";
 import { Button, Row, Form } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import Select from "react-select";
@@ -8,8 +8,8 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import cx from "classnames";
 
 import { RoleEnum, UserUpdateInput } from "src/graphql";
-import { isAdmin, userHref } from "src/utils";
-import AuthContext from "src/AuthContext";
+import { userHref } from "src/utils";
+import { useCurrentUser } from "src/hooks";
 
 const schema = yup.object({
   name: yup.string().optional(),
@@ -39,7 +39,7 @@ const roles = Object.keys(RoleEnum).map((role) => ({
 }));
 
 const UserForm: FC<UserProps> = ({ user, username, callback, error }) => {
-  const Auth = useContext(AuthContext);
+  const { isAdmin } = useCurrentUser();
   const {
     register,
     control,
@@ -62,7 +62,7 @@ const UserForm: FC<UserProps> = ({ user, username, callback, error }) => {
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Row>
-        {isAdmin(Auth.user) && (
+        {isAdmin && (
           <Form.Group controlId="name" className="col-6 mb-3">
             <Form.Label>Username</Form.Label>
             <Form.Control
@@ -90,7 +90,7 @@ const UserForm: FC<UserProps> = ({ user, username, callback, error }) => {
           <div className="invalid-feedback">{errors?.email?.message}</div>
         </Form.Group>
       </Row>
-      {isAdmin(Auth.user) && (
+      {isAdmin && (
         <Row>
           <Form.Group className="col-6 mb-3">
             <Form.Label>Roles</Form.Label>
diff --git a/frontend/src/pages/users/UserEdits.tsx b/frontend/src/pages/users/UserEdits.tsx
index 788676114..1ddf24b34 100644
--- a/frontend/src/pages/users/UserEdits.tsx
+++ b/frontend/src/pages/users/UserEdits.tsx
@@ -5,27 +5,30 @@ import { ROUTE_USER } from "src/constants/route";
 import { createHref } from "src/utils";
 import { EditList } from "src/components/list";
 import { VoteStatusEnum } from "src/graphql";
+import { useCurrentUser } from "src/hooks";
 
 interface Props {
   user: {
     id: string;
     name: string;
   };
-  isPrivateUser: boolean;
 }
 
-const UserEditsComponent: FC<Props> = ({ user, isPrivateUser }) => (
-  <>
-    <h3>
-      Edits by <Link to={createHref(ROUTE_USER, user)}>{user.name}</Link>
-    </h3>
-    <EditList
-      userId={user.id}
-      defaultVoteStatus={VoteStatusEnum.PENDING}
-      showVotedFilter={!isPrivateUser}
-      userSubmitted={true}
-    />
-  </>
-);
+const UserEditsComponent: FC<Props> = ({ user }) => {
+  const { isSelf } = useCurrentUser();
+  return (
+    <>
+      <h3>
+        Edits by <Link to={createHref(ROUTE_USER, user)}>{user.name}</Link>
+      </h3>
+      <EditList
+        userId={user.id}
+        defaultVoteStatus={VoteStatusEnum.PENDING}
+        showVotedFilter={!isSelf(user)}
+        userSubmitted={true}
+      />
+    </>
+  );
+};
 
 export default UserEditsComponent;
diff --git a/frontend/src/pages/users/UserPassword.tsx b/frontend/src/pages/users/UserPassword.tsx
index 7eacb19ff..5f85ae17c 100644
--- a/frontend/src/pages/users/UserPassword.tsx
+++ b/frontend/src/pages/users/UserPassword.tsx
@@ -1,14 +1,14 @@
-import { FC, useContext, useState } from "react";
+import { FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { isApolloError } from "@apollo/client";
 
 import { useChangePassword } from "src/graphql";
-import AuthContext from "src/AuthContext";
 import { userHref } from "src/utils";
 import UserPassword, { UserPasswordData } from "./UserPasswordForm";
+import { useCurrentUser } from "src/hooks";
 
 const ChangePasswordComponent: FC = () => {
-  const Auth = useContext(AuthContext);
+  const { user } = useCurrentUser();
   const [queryError, setQueryError] = useState<string>();
   const navigate = useNavigate();
   const [changePassword] = useChangePassword();
@@ -19,7 +19,7 @@ const ChangePasswordComponent: FC = () => {
       new_password: formData.newPassword,
     };
     changePassword({ variables: { userData } })
-      .then(() => Auth.user && navigate(userHref(Auth.user)))
+      .then(() => user && navigate(userHref(user)))
       .catch(
         (error: unknown) =>
           error instanceof Error &&
diff --git a/frontend/src/pages/users/UserValidateChangeEmail.tsx b/frontend/src/pages/users/UserValidateChangeEmail.tsx
index 96a194b56..68fb3bd19 100644
--- a/frontend/src/pages/users/UserValidateChangeEmail.tsx
+++ b/frontend/src/pages/users/UserValidateChangeEmail.tsx
@@ -6,7 +6,7 @@ import * as yup from "yup";
 import cx from "classnames";
 import { Button, Form, Row, Col } from "react-bootstrap";
 
-import type { User } from "src/AuthContext";
+import type { User } from "src/context";
 import { useQueryParams } from "src/hooks";
 import { ErrorMessage } from "src/components/fragments";
 import Title from "src/components/title";
diff --git a/frontend/src/pages/users/index.tsx b/frontend/src/pages/users/index.tsx
index 5c37cb247..a20be6eb9 100644
--- a/frontend/src/pages/users/index.tsx
+++ b/frontend/src/pages/users/index.tsx
@@ -4,7 +4,6 @@ import { Route, Routes, useParams } from "react-router-dom";
 import { useUser } from "src/graphql";
 import Title from "src/components/title";
 import { ErrorMessage, LoadingIndicator } from "src/components/fragments";
-import { isPrivateUser } from "src/utils";
 
 import Users from "./Users";
 import User from "./User";
@@ -52,7 +51,7 @@ const UserLoader: FC = () => {
         element={
           <>
             <Title page={`Edits by ${user.name}`} />
-            <UserEdits user={user} isPrivateUser={isPrivateUser(user)} />
+            <UserEdits user={user} />
           </>
         }
       />
diff --git a/frontend/src/utils/auth.ts b/frontend/src/utils/auth.ts
deleted file mode 100644
index b185b0fd1..000000000
--- a/frontend/src/utils/auth.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { User } from "src/AuthContext";
-import { RoleEnum } from "src/graphql";
-
-export const isAdmin = (user?: User) =>
-  (user?.roles ?? []).includes(RoleEnum.ADMIN);
-
-export const canEdit = (user?: User) =>
-  (user?.roles ?? []).includes(RoleEnum.EDIT) || isAdmin(user);
-
-export const canVote = (user?: User) =>
-  (user?.roles ?? []).includes(RoleEnum.VOTE) || isAdmin(user);
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index d07ec27c1..12a847f45 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1,4 +1,3 @@
-export * from "./auth";
 export * from "./country";
 export * from "./date";
 export * from "./edit";
diff --git a/frontend/src/utils/user.ts b/frontend/src/utils/user.ts
index 0a4b20a9b..7ef2b14f1 100644
--- a/frontend/src/utils/user.ts
+++ b/frontend/src/utils/user.ts
@@ -1,5 +1,5 @@
-import { User } from "../AuthContext";
-import { UserQuery, PublicUserQuery } from "src/graphql";
+import type { User } from "../context";
+import { UserQuery, PublicUserQuery, RoleEnum } from "src/graphql";
 
 type PrivateUser = NonNullable<UserQuery["findUser"]>;
 type PublicUser = NonNullable<PublicUserQuery["findUser"]>;
@@ -17,3 +17,12 @@ export const setCachedUser = (user?: User | null) => {
 export const isPrivateUser = (
   user: PublicUser | PrivateUser,
 ): user is PrivateUser => !!(user as PrivateUser).email;
+
+export const isAdmin = (user?: User) =>
+  (user?.roles ?? []).includes(RoleEnum.ADMIN);
+
+export const canEdit = (user?: User) =>
+  (user?.roles ?? []).includes(RoleEnum.EDIT) || isAdmin(user);
+
+export const canVote = (user?: User) =>
+  (user?.roles ?? []).includes(RoleEnum.VOTE) || isAdmin(user);