add protected routes

src/app/Login.tsx

@@ -17,17 +17,24 @@ export const Login = () => {
     const username = d.currentTarget['username'].value;
     const password = d.currentTarget['password'].value;
     const response = await loginMutation.mutateAsync({ username, password });
-    if(response) {
+    if (response) {
       navigateRooms();
     }
   };
 
   return (
     <Container maxWidth="xs">
-          <Typography variant="h4" sx={{ mt: 6, mb: 3 }}>
-      {t('signInTitle')}
-    </Typography>
-    {loginMutation.isError && <Alert severity="error">{t('errorOccuredWhileLogin')}</Alert>}
+      <Typography variant="h4" sx={{ mt: 6, mb: 3 }}>
+        {t('signInTitle')}
+      </Typography>
+      {loginMutation.isError && (
+        <Alert severity="error">
+          <Box>
+            <Typography fontWeight={'bold'}>{t('errorOccuredWhileLogin')}</Typography>
+            <Typography>{(loginMutation.error as Error).message}</Typography>
+          </Box>
+        </Alert>
+      )}
       <form onSubmit={Login}>
         <Box sx={{ mt: 4 }}>
           <TextField

src/main.tsx

@@ -1,6 +1,5 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
 import { Router } from './router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider, createTheme } from '@mui/material';
@@ -19,16 +18,12 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
-const basename = process.env.NODE_ENV === 'production' ? '/addons/mui/' : '/';
-
 root.render(
   <StrictMode>
     <ThemeProvider theme={theme}>
-      <BrowserRouter basename={basename}>
         <QueryClientProvider client={queryClient}>
           <Router />
         </QueryClientProvider>
-      </BrowserRouter>
     </ThemeProvider>
   </StrictMode>
 );

src/router.tsx

@@ -1,14 +1,59 @@
-import { Routes, Route } from "react-router-dom";
-import { Login } from './app/Login'
-import { Room } from "./app/Room";
-import { Rooms } from './app/Rooms'
+import {
+  createBrowserRouter,
+  RouterProvider,
+  useNavigate,
+} from 'react-router-dom';
+import { Login } from './app/Login';
+import { Room } from './app/Room';
+import { Rooms } from './app/Rooms';
+import { ReactNode, useEffect } from 'react';
+import { getSessionId } from './hooks/useApi';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const navigate = useNavigate();
+  const sessionId = getSessionId();
+
+  useEffect(() => {
+    if (!sessionId) {
+      navigate('/');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId]);
+
+  return children;
+};
 
 export const Router = () => {
+  const basename = process.env.NODE_ENV === 'production' ? '/addons/mui/' : '/';
+  const router = createBrowserRouter(
+    [
+      {
+        path: '/',
+        element: <Login />,
+      },
+      {
+        path: '/room/:roomId',
+        element: (
+          <ProtectedRoute>
+            <Room />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: '/rooms',
+        element: (
+          <ProtectedRoute>
+            <Rooms />
+          </ProtectedRoute>
+        ),
+      },
+    ],
+    { basename }
+  );
 
-    return (
-     <Routes>
-        <Route path="/" element={<Login />} />
-        <Route path="/room/:roomId" element={<Room />} />
-        <Route path="rooms" element={<Rooms/>} />
-      </Routes>)
-}
+  return <RouterProvider router={router} />;
+};