From f11bcea3a27ec159cde752ed61b76d3550a45a9b Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Sun, 21 Jul 2024 16:49:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F(frontend)=20valide=20':ro?=
 =?UTF-8?q?omId'=20path=20using=20a=20regex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced security by ensuring users are redirected to a 404 error page
if they
pass an incorrect roomId path, either intentionally or unintentionally.
This is
a critical security mechanism that should be included in our MVP.

Let's discuss extracting hardcoded elements, such as lengths or
the separator, into proper constants to improve code maintainability.
I was concerned that this might make the code harder to read, it could
enhance
clarity and reusability in the long term.

I prefer exposing the roomIdRegex from the same location where we
generate IDs.
However, this increases the responsibility of that file. Lmk if you have
any
suggestion for a better organization.

Additionally, the current 404 error page displays a 'Page not found'
message for
invalid room IDs. Should we update this message to 'Invalid room name'
to
provide more context to the user?
---
 src/frontend/src/App.tsx                                | 4 ++--
 src/frontend/src/features/rooms/index.ts                | 1 +
 src/frontend/src/features/rooms/utils/generateRoomId.ts | 3 +++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index f16e7f5d..128da3f5 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import { useLang } from 'hoofd'
 import { Route, Switch } from 'wouter'
 import { HomeRoute } from '@/features/home'
 import { NotFound } from './routes/NotFound'
-import { RoomRoute } from '@/features/rooms'
+import { RoomRoute, roomIdRegex } from '@/features/rooms'
 import './i18n/init'
 
 const queryClient = new QueryClient()
@@ -19,7 +19,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <Switch>
         <Route path="/" component={HomeRoute} />
-        <Route path="/:roomId" component={RoomRoute} />
+        <Route path={roomIdRegex} component={RoomRoute} />
         <Route component={NotFound} />
       </Switch>
       <ReactQueryDevtools initialIsOpen={false} />
diff --git a/src/frontend/src/features/rooms/index.ts b/src/frontend/src/features/rooms/index.ts
index dcfe38ef..2fa2d5bf 100644
--- a/src/frontend/src/features/rooms/index.ts
+++ b/src/frontend/src/features/rooms/index.ts
@@ -1,2 +1,3 @@
 export { navigateToNewRoom } from './navigation/navigateToNewRoom'
 export { Room as RoomRoute } from './routes/Room'
+export { roomIdRegex } from './utils/generateRoomId'
diff --git a/src/frontend/src/features/rooms/utils/generateRoomId.ts b/src/frontend/src/features/rooms/utils/generateRoomId.ts
index dc84dcf1..76bce446 100644
--- a/src/frontend/src/features/rooms/utils/generateRoomId.ts
+++ b/src/frontend/src/features/rooms/utils/generateRoomId.ts
@@ -25,3 +25,6 @@ export const generateRoomId = () => {
   ];
   return parts.join('-');
 }
+
+export const roomIdRegex = /^[/](?<roomId>[a-z]{3}-[a-z]{4}-[a-z]{3})$/;
+