refactor: improve sign out and add set user cookie flag

apps/app/middleware/session.global.ts

@@ -1,23 +1,27 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
-  if (from.meta.ignoreMiddleware) return;
+export default defineNuxtRouteMiddleware(async (to) => {
+  const sessionStore = useSessionStore();
+  if (to.name === "sign-out") {
+    await sessionStore.signOut();
+    return navigateTo({ path: "/sign-in" });
+  }
 
   const userStore = useUserStore();
   const serverUser = useCookie("m-user");
 
-  if (serverUser) {
+  if (serverUser.value as unknown) {
     userStore.user = serverUser.value as typeof userStore.user;
   }
 
   if (to.query.oauth) return;
 
-  const sessionStore = useSessionStore();
   const serverHasSession = !!serverUser.value || sessionStore.hasSession();
 
   if (["profile"].includes(String(to.name)) && !serverHasSession) {
-    navigateTo("/sign-in");
+    return navigateTo("/sign-in");
   }
+
   if (["sign-in", "sign-up"].includes(String(to.name)) && serverHasSession) {
-    navigateTo("/");
+    return navigateTo("/");
   }
   sessionStore.cleared = false;
 });

apps/app/pages/sign-out.vue

@@ -1,16 +1,4 @@
-<script setup lang="ts">
-definePageMeta({
-  ignoreMiddleware: true,
-});
-
-const sessionStore = useSessionStore();
-const router = useRouter();
-
-onMounted(async () => {
-  await sessionStore.signOut();
-  router.push("/sign-in");
-});
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="flex justify-center pt-10 text-sm text-gray-500">

apps/app/stores/clerk/session.ts

@@ -15,13 +15,12 @@ export const useSessionStore = defineStore("session", {
     checkSessionStatus() {
       const clientSession = this.$clerk?.client?.sessions[0];
       if (clientSession?.status === "expired") {
-        this.signOut();
-        this.$router.push("/sign-in");
+        this.$router.push("/sign-out");
       }
     },
     hasSession() {
       const clientSession = this.$clerk?.client?.sessions[0];
-      return !this.cleared && clientSession;
+      return Boolean(!this.cleared && clientSession);
     },
     async refreshSession() {
       const clientSession = this.$clerk?.client?.sessions[0];

apps/app/stores/clerk/user.ts

@@ -42,6 +42,8 @@ export const useUserStore = defineStore("user", {
       this.user = userData;
       const userCookie = useCookies([]);
       userCookie.set("m-user", userData);
+
+      console.log("set user");
     },
     async updateUser() {
       await this.$clerk.user.update<UpdateUserParams>({