protected routes and protected layout initial commit

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "reflect-metadata": "^0.1.13",
+    "style-loader": "^3.3.3",
     "tsyringe": "^4.8.0",
     "zustand": "^4.4.1"
   },

src/@types/history.d.ts

@@ -6,4 +6,5 @@ interface IHistoryServiceURL {
 
 interface IHistoryService {
   push(url: string | Partial<IHistoryServiceURL>): void;
+  replace(url: string): void;
 }

src/App.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { bootstrap } from "@/utils/bootstrap";
 
-import { Game } from "@/modules/game/components/Game";
 import { CustomBrowserRouter } from "@/modules/global/history/CustomRouter";
-import { Route, Routes } from "react-router-dom";
-import Test from "./Test";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { Login } from "@/modules/global/auth/Login";
+import { Game } from "./modules/game/components/Game";
+import { ProtectedRoute } from "./ProtectedRoute";
+import { AppLayout } from "./AppLayout";
 
 const App = () => {
   const [appReady, setAppReady] = useState<boolean>(false);
@@ -26,8 +28,18 @@ const App = () => {
   return (
     <CustomBrowserRouter>
       <Routes>
-        <Route path="/" element={<Game />} />
-        <Route path="/test" element={<Test />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={<AppLayout />}>
+          <Route element={<ProtectedRoute />}>
+            <Route path="/game" element={<Game />} />
+          </Route>
+          <Route element={<ProtectedRoute />}>
+            <Route path="/" element={<Navigate to="game" />} />
+          </Route>
+        </Route>
+        <Route element={<ProtectedRoute />}>
+          <Route path="*" element={<div>Not Found</div>} />
+        </Route>
       </Routes>
     </CustomBrowserRouter>
   );

src/AppLayout.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+type PropsType = {
+  children?: React.ReactNode;
+};
+
+export const AppLayout = ({ children }: PropsType) => {
+  return (
+    <div>
+      <div>Navigation</div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  );
+};

src/ProtectedRoute.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Navigate, Outlet } from "react-router-dom";
+
+import { identify } from "@helpers";
+import { useAuthStore } from "@/modules/global/auth/useAuthStore";
+
+export const ProtectedRoute = () => {
+  const { isLoggedIn } = useAuthStore<IAuthStore>(identify);
+
+  if (!isLoggedIn) {
+    return <Navigate to="/login" />;
+  }
+
+  return <Outlet />;
+};

src/modules/global/auth/AuthService.ts

@@ -5,7 +5,10 @@ import { inject, injectable } from "tsyringe";
 @injectable()
 export class AuthService implements IAuthService {
   constructor(
-    @inject(InjectionToken.IAuthStore) private _authStore: StoreType<IAuthStore>
+    @inject(InjectionToken.IAuthStore)
+    private _authStore: StoreType<IAuthStore>,
+    @inject(InjectionToken.IHistoryService)
+    private _historyService: IHistoryService
   ) {}
 
   login(): void {
@@ -14,5 +17,7 @@ export class AuthService implements IAuthService {
         state.isLoggedIn = true;
       })
     );
+
+    this._historyService.replace("/");
   }
 }

src/modules/global/auth/Login.tsx

@@ -1,9 +1,17 @@
+import { InjectionToken } from "@/constants/injection-token";
+import { useController } from "@/utils/hooks/useController";
 import React from "react";
 
 export const Login = () => {
+  const { loginClicked } = useController<IAuthController>(
+    InjectionToken.IAuthController
+  );
+
   return (
     <div>
-      <button>Login</button>
+      <input type="text" />
+      <input type="password" />
+      <button onClick={loginClicked}>Login</button>
     </div>
   );
 };

src/modules/global/history/HistoryService.ts

@@ -14,4 +14,8 @@ export class HistoryService implements IHistoryService {
   public push(url: string | Partial<IHistoryServiceURL>): void {
     this._history.push(url);
   }
+
+  public replace(url: string): void {
+    this._history.replace(url);
+  }
 }

src/utils/helpers.ts

@@ -0,0 +1 @@
+export const identify = <T>(x: T): T => x;

tsconfig.json

@@ -13,7 +13,8 @@
     "paths": {
       "@/*": ["*"],
       "@hooks/*": ["utils/hooks/*"],
-      "@history": ["utils/history"]
+      "@history": ["utils/history"],
+      "@helpers": ["utils/helpers"]
     },
     "typeRoots": ["@types", "node_modules/@types"]
   },