feat(boilerplate): add auth guard in webapp

examples/common_nestjs_remix/apps/web/app/modules/Auth/authEffect.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useAuthStore } from "./authStore";
+import { useNavigate } from "@remix-run/react";
+
+/**
+ * @returns void
+ * @description This hook is used to rediect the user to the login page if they are not logged in.
+ */
+export function useAuthEffect() {
+  const loggedIn = useAuthStore((state) => state.isLoggedIn);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!loggedIn) {
+      navigate("/login");
+    }
+  }, [loggedIn, navigate]);
+}

examples/common_nestjs_remix/apps/web/app/modules/Auth/authGuard.ts

@@ -0,0 +1,15 @@
+import { redirect } from "@remix-run/react";
+import { useAuthStore } from "./authStore";
+
+/**
+ * @returns void
+ * @description This function is used to rediect the user to the login page if they are not logged in.
+ * @description Should be moved to middlewares once they are supported in Remix/ReactRouter7
+ */
+export function authGuard() {
+  const authStore = useAuthStore.getState();
+
+  if (!authStore.isLoggedIn) {
+    return redirect("/login");
+  }
+}

examples/common_nestjs_remix/apps/web/app/modules/Auth/authStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+type AuthStore = {
+  isLoggedIn: boolean;
+  setAuthState: (isLoggedIn: boolean) => void;
+};
+
+export const useAuthStore = create<AuthStore>((set) => ({
+  isLoggedIn: false,
+  setAuthState: (isLoggedIn) => set({ isLoggedIn }),
+}));

examples/common_nestjs_remix/apps/web/app/modules/Dashboard/Dashboard.layout.tsx

@@ -1,6 +1,14 @@
 import { Outlet } from "@remix-run/react";
+import { useAuthEffect } from "../Auth/authEffect";
+import { authGuard } from "../Auth/authGuard";
+
+export function clientLoader() {
+  authGuard();
+}
 
 export default function DashboardLayout() {
+  useAuthEffect();
+
   return (
     <div>
       <h1>Dashboard Layout</h1>

examples/common_nestjs_remix/apps/web/package.json

@@ -21,7 +21,8 @@
     "isbot": "^4.1.0",
     "morgan": "^1.10.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.9.2",