using access token in header!

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)
 	})

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

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