From e28d9e5d16da25b19d6719b4295e6d264af759f6 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Mon, 15 Sep 2025 21:50:15 +0100
Subject: [PATCH] using access token in header!

---
 backend/images/handler.go               |  7 +++++--
 backend/middleware/middleware.go        | 18 ++++++++++++++++++
 frontend/src/components/image/index.tsx | 19 +++++++++++++++++--
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/backend/images/handler.go b/backend/images/handler.go
index 512c192..e9e8a1e 100644
--- a/backend/images/handler.go
+++ b/backend/images/handler.go
@@ -249,13 +249,16 @@ func (h *ImageHandler) reprocessImage(w http.ResponseWriter, r *http.Request) {
 func (h *ImageHandler) CreateRoutes(r chi.Router) {
 	h.logger.Info("Mounting image router")
 
-	// Protected routes
+	r.Group(func(r chi.Router) {
+		r.Use(middleware.ProtectedRouteURL)
+		r.Get("/{id}", h.serveImage)
+	})
+
 	r.Group(func(r chi.Router) {
 		r.Use(middleware.ProtectedRoute)
 		r.Use(middleware.SetJson)
 
 		r.Get("/", h.listImages)
-		r.Get("/{id}", h.serveImage)
 		r.Post("/{name}", middleware.WithLimit(h.logger, h.limitsManager.HasReachedImageLimit, h.uploadImage))
 		r.Delete("/{image-id}", h.deleteImage)
 	})
diff --git a/backend/middleware/middleware.go b/backend/middleware/middleware.go
index aec5198..135197b 100644
--- a/backend/middleware/middleware.go
+++ b/backend/middleware/middleware.go
@@ -50,9 +50,27 @@ func GetUserID(ctx context.Context, logger *log.Logger, w http.ResponseWriter) (
 	return userIdUuid, nil
 }
 
+func ProtectedRouteURL(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		token := r.URL.Query().Get("token")
+
+		userId, err := GetUserIdFromAccess(token)
+		if err != nil {
+			w.WriteHeader(http.StatusUnauthorized)
+			return
+		}
+
+		contextWithUserId := context.WithValue(r.Context(), USER_ID, userId)
+
+		newR := r.WithContext(contextWithUserId)
+		next.ServeHTTP(w, newR)
+	})
+}
+
 func ProtectedRoute(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		token := r.Header.Get("Authorization")
+
 		if len(token) < len("Bearer ") {
 			w.WriteHeader(http.StatusUnauthorized)
 			return
diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index 50b6458..6af360d 100644
--- a/frontend/src/components/image/index.tsx
+++ b/frontend/src/components/image/index.tsx
@@ -11,13 +11,19 @@ type ImageComponentProps = {
 export const ImageComponent: Component<ImageComponentProps> = (props) => {
     const [isOpen, setIsOpen] = createSignal(false);
 
+    // TODO: make sure this is up to date. Put it behind a resource.
+    const accessToken = localStorage.getItem("access");
+    if (accessToken == null) {
+        return <>Ermm... Access token is not set :(</>
+    }
+
     return (
         <>
             <div class="relative w-full flex justify-center h-[300px]">
                 <A href={`/image/${props.ID}`} class="flex w-full">
                     <img
                         class="flex w-full object-cover rounded-xl"
-                        src={`${base}/images/${props.ID}`}
+                        src={`${base}/images/${props.ID}?token=${accessToken}`}
                     />
                 </A>
                 <button
@@ -56,16 +62,25 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
     );
 };
 
+// TODO: these two components are basically identical
+// merge the fuckers
+
 export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
     const [isOpen, setIsOpen] = createSignal(false);
 
+    // TODO: make sure this is up to date. Put it behind a resource.
+    const accessToken = localStorage.getItem("access");
+    if (accessToken == null) {
+        return <>Ermm... Access token is not set :(</>
+    }
+
     return (
         <>
             <div class="relative w-full flex justify-center">
                 <A href={`/image/${props.ID}`} class="flex w-full">
                     <img
                         class="flex w-full object-cover rounded-xl"
-                        src={`${base}/images/${props.ID}`}
+                        src={`${base}/images/${props.ID}?token=${accessToken}`}
                     />
                 </A>
                 <button