fix: check for correct user when displaying reservation

apps/ui/modules/queries/reservation.tsx

@@ -170,6 +170,7 @@ export const GET_RESERVATION = gql`
       calendarUrl
       user {
         email
+        pk
       }
       state
       price

apps/ui/pages/reservations/[id]/index.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import type { GetServerSidePropsContext } from "next";
+import Error from "next/error";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import styled from "styled-components";
 import router from "next/router";
@@ -57,6 +58,7 @@ import { GET_RESERVATION } from "@/modules/queries/reservation";
 import { base64encode, filterNonNullable } from "common/src/helpers";
 import { fromApiDate } from "common/src/common/util";
 import { containsField, containsNameField } from "common/src/metaFieldsHelpers";
+import { useSession } from "@/hooks/auth";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
@@ -401,6 +403,7 @@ function Reservation({
   reservation,
 }: PropsNarrowed): JSX.Element | null {
   const { t, i18n } = useTranslation();
+  const { user } = useSession();
 
   // TODO this should be moved to SSR also
   const { order, isLoading: orderLoading } = useOrder({
@@ -464,6 +467,10 @@ function Reservation({
     }
   }, [reservation]);
 
+  // TODO this causes a flash of unauthorized content, because the user is not fetched on first render
+  if (reservation.user?.pk !== user?.pk) {
+    return <Error statusCode={403} />;
+  }
   const normalizedOrderStatus =
     getNormalizedReservationOrderStatus(reservation);