Add shared authentication state with zustand

frontend/package.json

@@ -19,7 +19,8 @@
     "react-router-dom": "^7.18.4",
     "react-select": "^5.10.2",
     "rxjs": "^7.8.2",
-    "tailwindcss": "^4.3.3"
+    "tailwindcss": "^4.3.3",
+    "zustand": "^5.0.16"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",

frontend/src/components/AddToGalleryModal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import type { Gallery } from "../types/Gallery";
+import { useAuthStore } from "../store/authStore";
 
 type AddToGalleryModalProps = {
   artworkId: number;
@@ -28,6 +29,8 @@ export default function AddToGalleryModal({
   const [loading, setLoading] = useState(true);
   const [message, setMessage] = useState("");
 
+  const token = useAuthStore((state) => state.token);
+
   useEffect(() => {
     async function fetchGalleries() {
       const query = `
@@ -42,8 +45,6 @@ export default function AddToGalleryModal({
       `;
 
       try {
-        const token = sessionStorage.getItem("token");
-
         const response = await fetch("/graphql", {
           method: "POST",
           headers: {
@@ -74,7 +75,7 @@ export default function AddToGalleryModal({
     }
 
     void fetchGalleries();
-  }, []);
+  }, [token]);
 
   async function handleAddToGallery(galleryId: string) {
     const mutation = `
@@ -93,8 +94,6 @@ export default function AddToGalleryModal({
     try {
       setMessage("");
 
-      const token = sessionStorage.getItem("token");
-
       const response = await fetch("/graphql", {
         method: "POST",
         headers: {

frontend/src/components/CreateGalleryModal.tsx

@@ -1,5 +1,6 @@
 import { LucideX } from "lucide-react";
 import { useState } from "react";
+import { useAuthStore } from "../store/authStore";
 
 type CreateGalleryModalProps = {
   onClose: () => void;
@@ -14,6 +15,8 @@ export default function CreateGalleryModal({
   const [isCreating, setIsCreating] = useState(false);
   const [error, setError] = useState("");
 
+  const token = useAuthStore((state) => state.token);
+
   async function handleCreateGallery() {
     if (!title.trim() || isCreating) return;
 
@@ -32,8 +35,6 @@ export default function CreateGalleryModal({
   `;
 
     try {
-      const token = sessionStorage.getItem("token");
-
       const response = await fetch("/graphql", {
         method: "POST",
         headers: {

frontend/src/components/Hero.tsx

@@ -2,9 +2,10 @@ import heroImageBack from "../assets/hero2.png";
 import heroImageFront from "../assets/hero1.png";
 import { CircleUserRound } from "lucide-react";
 import { Link } from "react-router-dom";
+import { useAuthStore } from "../store/authStore";
 
 function Hero() {
-  const isLoggedIn = Boolean(sessionStorage.getItem("token"));
+  const isLoggedIn = useAuthStore((state) => Boolean(state.token));
 
   return (
     <section className="relative mx-auto flex min-h-152 max-w-350 items-center justify-between gap-12 px-10 py-16 pt-30">

frontend/src/components/ProtectedRoute.tsx

@@ -1,11 +1,13 @@
 import { Navigate } from "react-router-dom";
+import type { ReactNode } from "react";
+import { useAuthStore } from "../store/authStore";
 
 type ProtectedRouteProps = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export default function ProtectedRoute({ children }: ProtectedRouteProps) {
-  const token = sessionStorage.getItem("token");
+  const token = useAuthStore((state) => state.token);
 
   if (!token) {
     return <Navigate to="/login" replace />;

frontend/src/pages/CreateAccountPage.tsx

@@ -1,6 +1,7 @@
 import { useState, type SubmitEvent as ReactSubmitEvent } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import type { User } from "../types/User";
+import { useAuthStore } from "../store/authStore";
 
 type RegisterResponse = {
   data?: { register?: User };
@@ -19,6 +20,7 @@ type LoginResponse = {
 
 export default function CreateAccount() {
   const navigate = useNavigate();
+  const setAuth = useAuthStore((state) => state.setAuth);
 
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -95,8 +97,7 @@ export default function CreateAccount() {
 
       const { user, token } = loginResult.data.login;
 
-      sessionStorage.setItem("user", JSON.stringify(user));
-      sessionStorage.setItem("token", token);
+      setAuth(user, token);
 
       navigate("/profile");
     } catch (error) {

frontend/src/pages/LoginPage.tsx

@@ -1,6 +1,7 @@
 import { Link, useNavigate } from "react-router-dom";
 import { useState, type SubmitEvent as ReactSubmitEvent } from "react";
 import type { User } from "../types/User";
+import { useAuthStore } from "../store/authStore";
 
 type LoginResponse = {
   data?: {
@@ -14,6 +15,7 @@ type LoginResponse = {
 
 function Login() {
   const navigate = useNavigate();
+  const setAuth = useAuthStore((state) => state.setAuth);
 
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -58,8 +60,7 @@ function Login() {
 
       const { user, token } = result.data.login;
 
-      sessionStorage.setItem("user", JSON.stringify(user));
-      sessionStorage.setItem("token", token);
+      setAuth(user, token);
 
       navigate("/profile");
     } catch (error) {

frontend/src/pages/ProfilePage.tsx

@@ -1,11 +1,11 @@
-import type { User } from "../types/User";
 import GalleryCard from "../components/GalleryCard";
 import { LucidePlus } from "lucide-react";
 import { useEffect, useState } from "react";
 import type { Gallery } from "../types/Gallery";
 import CreateGalleryModal from "../components/CreateGalleryModal";
 import { useGalleryCoverImages } from "../hooks/useGalleryCoverImages";
 import { Link, useNavigate } from "react-router-dom";
+import { useAuthStore } from "../store/authStore";
 
 const coverColors = [
   "#F3CA34", // Yellow
@@ -19,6 +19,10 @@ const coverColors = [
 export default function ProfilePage() {
   const navigate = useNavigate();
 
+  const user = useAuthStore((state) => state.user);
+  const token = useAuthStore((state) => state.token);
+  const logout = useAuthStore((state) => state.logout);
+
   const [coverColor] = useState(() => {
     const randomIndex = Math.floor(Math.random() * coverColors.length);
     return coverColors[randomIndex];
@@ -28,8 +32,6 @@ export default function ProfilePage() {
   const [showCreateGallery, setShowCreateGallery] = useState(false);
   const [profileImage, setProfileImage] = useState<string | null>(null);
 
-  const storedUser = sessionStorage.getItem("user");
-
   const [galleries, setGalleries] = useState<Gallery[]>([]);
   const galleryCoverImages = useGalleryCoverImages(galleries);
   const [isLoading, setIsLoading] = useState(true); // Galleries
@@ -48,8 +50,6 @@ export default function ProfilePage() {
     `;
 
       try {
-        const token = sessionStorage.getItem("token");
-
         const response = await fetch("/graphql", {
           method: "POST",
           headers: {
@@ -79,7 +79,7 @@ export default function ProfilePage() {
     }
 
     void fetchProfileImage();
-  }, []);
+  }, [token]);
 
   useEffect(() => {
     async function fetchGalleries() {
@@ -95,8 +95,6 @@ export default function ProfilePage() {
     `;
 
       try {
-        const token = sessionStorage.getItem("token");
-
         const response = await fetch("/graphql", {
           method: "POST",
           headers: {
@@ -125,9 +123,7 @@ export default function ProfilePage() {
     }
 
     void fetchGalleries();
-  }, [refreshGalleries]);
-
-  const user: User | null = storedUser ? JSON.parse(storedUser) : null;
+  }, [refreshGalleries, token]);
 
   async function handleCoverImageChange(
     event: React.ChangeEvent<HTMLInputElement>,
@@ -160,8 +156,6 @@ export default function ProfilePage() {
     `;
 
       try {
-        const token = sessionStorage.getItem("token");
-
         const response = await fetch("/graphql", {
           method: "POST",
           headers: {
@@ -227,8 +221,6 @@ export default function ProfilePage() {
     `;
 
       try {
-        const token = sessionStorage.getItem("token");
-
         const response = await fetch("/graphql", {
           method: "POST",
           headers: {
@@ -262,8 +254,7 @@ export default function ProfilePage() {
   }
 
   function handleLogout() {
-    sessionStorage.removeItem("user");
-    sessionStorage.removeItem("token");
+    logout();
     navigate("/");
   }
 

frontend/src/store/authStore.ts

@@ -0,0 +1,31 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import type { User } from "../types/User";
+
+type AuthState = {
+  user: User | null;
+  token: string | null;
+  setAuth: (user: User, token: string) => void;
+  logout: () => void;
+};
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+
+      setAuth: (user, token) => {
+        set({ user, token });
+      },
+
+      logout: () => {
+        set({ user: null, token: null });
+      },
+    }),
+    {
+      name: "auth",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);