feat: refactor auth redirect into router as route guard

src/main.ts

@@ -5,6 +5,7 @@ import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 
 import App from "./App.vue";
+import { useUser } from "./components/user";
 import HomeVue from "./views/Home.vue";
 
 const app = createApp(App);
@@ -52,5 +53,14 @@ const router = createRouter({
     },
   ],
 });
+router.beforeEach((to, from, next) => {
+  const { isLoggedIn } = useUser();
+  if (to.path == "/projects/new" && !isLoggedIn) {
+    next("/login");
+  } else {
+    next();
+  }
+});
+
 const pinia = createPinia();
 app.use(router).use(pinia).mount("#app");

src/views/NewProject.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getStorage, ref as storageRef, uploadBytes } from "firebase/storage";
 import { useField, useForm } from "vee-validate";
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { string } from "yup";
 
@@ -100,18 +100,6 @@ const router = useRouter();
 const projectStore = useProjectStore();
 const userStore = useUser();
 
-if (!userStore.isLoggedIn) {
-  router.push("/");
-}
-watch(
-  () => userStore.isLoggedIn,
-  (isLoggedIn) => {
-    if (!isLoggedIn) {
-      router.push("/");
-    }
-  },
-);
-
 const onSubmit = handleSubmit(
   // Success
   async (values: ProjectCreationFormData) => {