diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts
index 9d1c5334e..7e9dd441d 100644
--- a/frontend/src/bundles/common/enums/app-route.enum.ts
+++ b/frontend/src/bundles/common/enums/app-route.enum.ts
@@ -3,6 +3,7 @@ const AppRoute = {
SIGN_IN: '/sign-in',
SIGN_UP: '/sign-up',
STUDIO: '/studio',
+ ANY: '*',
} as const;
export { AppRoute };
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 901c2d1de..b07af5537 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,42 +1,14 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
-import { App } from '~/app/app.js';
-import { Auth } from '~/bundles/auth/pages/auth.js';
import {
ComponentsProvider,
RouterProvider,
StoreProvider,
} from '~/bundles/common/components/components.js';
-import { AppRoute } from '~/bundles/common/enums/enums.js';
-import { Studio } from '~/bundles/studio/pages/studio.js';
import { store } from '~/framework/store/store.js';
import { theme } from '~/framework/theme/theme.js';
-
-const routes = [
- {
- path: AppRoute.ROOT,
- element: ,
- children: [
- {
- path: AppRoute.ROOT,
- element: 'Root',
- },
- {
- path: AppRoute.SIGN_IN,
- element: ,
- },
- {
- path: AppRoute.SIGN_UP,
- element: ,
- },
- {
- path: AppRoute.STUDIO,
- element: ,
- },
- ],
- },
-];
+import { routes } from '~/router/routes.js';
createRoot(document.querySelector('#root') as HTMLElement).render(
diff --git a/frontend/src/router/components/protected-route.tsx b/frontend/src/router/components/protected-route.tsx
new file mode 100644
index 000000000..130755f91
--- /dev/null
+++ b/frontend/src/router/components/protected-route.tsx
@@ -0,0 +1,20 @@
+import { Navigate } from 'react-router-dom';
+
+import { RouterOutlet } from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+// import { useAppSelector } from '~/bundles/common/hooks/hooks.js';
+
+const ProtectedRoute: React.FC = () => {
+ // const user = useAppSelector((state) => state.auth.user);
+
+ // TODO: for implementing persistence. The following line is temporary
+ const user = true;
+
+ if (!user) {
+ return ;
+ }
+
+ return ;
+};
+
+export { ProtectedRoute };
diff --git a/frontend/src/router/routes.tsx b/frontend/src/router/routes.tsx
new file mode 100644
index 000000000..9131d0b2c
--- /dev/null
+++ b/frontend/src/router/routes.tsx
@@ -0,0 +1,15 @@
+import { App } from '~/app/app.js';
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+
+import { protectedRoutes } from './routes/protected-routes.js';
+import { publicRoutes } from './routes/public-routes.js';
+
+const routes = [
+ {
+ path: AppRoute.ROOT,
+ element: ,
+ children: [protectedRoutes, ...publicRoutes],
+ },
+];
+
+export { routes };
diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx
new file mode 100644
index 000000000..4724f0a4b
--- /dev/null
+++ b/frontend/src/router/routes/protected-routes.tsx
@@ -0,0 +1,24 @@
+import { Navigate } from 'react-router-dom';
+
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+import { Studio } from '~/bundles/studio/pages/studio.js';
+
+import { ProtectedRoute } from '../components/protected-route.js';
+
+const protectedRoutes = {
+ path: AppRoute.ROOT,
+ element: ,
+ children: [
+ //TODO Add protected routes here in element property and specify the correct path
+ {
+ path: AppRoute.STUDIO,
+ element: ,
+ },
+ {
+ path: AppRoute.ANY,
+ element: ,
+ },
+ ],
+};
+
+export { protectedRoutes };
diff --git a/frontend/src/router/routes/public-routes.tsx b/frontend/src/router/routes/public-routes.tsx
new file mode 100644
index 000000000..ead9cf5ff
--- /dev/null
+++ b/frontend/src/router/routes/public-routes.tsx
@@ -0,0 +1,15 @@
+import { Auth } from '~/bundles/auth/pages/auth.js';
+import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+
+const publicRoutes = [
+ {
+ path: AppRoute.SIGN_IN,
+ element: ,
+ },
+ {
+ path: AppRoute.SIGN_UP,
+ element: ,
+ },
+];
+
+export { publicRoutes };