fix: session issues and lessons navigation

apps/app/components/molecules/SearchModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ParsedContent } from "../../../../node_modules/@nuxt/content/dist/runtime/types";
+import { useDebounceFn } from "@vueuse/core";
 
 import { useMagicKeys } from "@vueuse/core";
 const { escape } = useMagicKeys();
@@ -23,7 +24,7 @@ function resetNavigatedIndex() {
 }
 
 const searchModalStore = useSearchModalStore();
-
+const loading = ref(false);
 const search = ref(null);
 
 const { data: coursesAndCategories } = await useAsyncData(
@@ -62,6 +63,11 @@ function resetSearch() {
   });
 }
 
+const searchDebounce = useDebounceFn(() => {
+  searchContent();
+  loading.value = false;
+}, 1000);
+
 async function searchContent() {
   resetNavigatedIndex();
   if (String(search.value).length <= 0) {
@@ -130,11 +136,18 @@ watch(searchModalStore, async (newValue) => {
             ref="searchInput"
             type="search"
             v-model="search"
-            @input="searchContent"
+            @input="
+              loading = true;
+              searchDebounce();
+            "
             autocomplete="off"
             placeholder="Pesquise aulas ou escreva um comando..."
             class="mb-3 block w-full pt-2 text-base font-medium text-zinc-950 !outline-none placeholder:text-zinc-500"
           />
+          <MSpinner
+            v-if="loading"
+            class="absolute top-[24px] right-[24px] w-[14px] h-[14px] border-zinc-400"
+          />
           <div class="flex items-center text-sm">
             <div class="flex flex-1 items-center gap-2 text-zinc-700">
               <Command icon="arrow-up" />

apps/app/components/molecules/TopBar.vue

@@ -3,11 +3,6 @@ const router = useRouter();
 const sessionStore = useSessionStore();
 const userStore = useUserStore();
 const defaultAsideStore = useDefaultAsideStore();
-
-function signOut() {
-  sessionStore.signOut();
-  router.push("/sign-in");
-}
 </script>
 
 <template>
@@ -58,11 +53,9 @@ function signOut() {
               <NuxtLink to="/profile">
                 <DropdownItem icon="circle-user" name="Perfil" />
               </NuxtLink>
-              <DropdownItem
-                icon="arrow-right-from-bracket"
-                name="Sair"
-                @click="signOut"
-              />
+              <NuxtLink to="/sign-out">
+                <DropdownItem icon="arrow-right-from-bracket" name="Sair" />
+              </NuxtLink>
             </div>
           </template>
         </VDropdown>

apps/app/components/organisms/DefaultAside.vue

@@ -7,7 +7,7 @@ const queryBuilder = computed(() => {
   return queryContent(`/${route.params?.slug ? route.params.slug[0] : ""}`);
 });
 
-const { data: navigation } = await useAsyncData(
+const { data: navigation, refresh } = await useAsyncData(
   route.params?.slug ? route.params.slug[0] : "navigation",
   () => fetchContentNavigation(queryBuilder.value),
   {
@@ -18,6 +18,10 @@ const { data: navigation } = await useAsyncData(
 const isLesson = computed(() => {
   return !!route.meta?.lesson;
 });
+
+watch(isLesson, async () => {
+  refresh();
+});
 </script>
 
 <template>

apps/app/composables/useCookieFetch.ts

@@ -0,0 +1,10 @@
+import { appendResponseHeader, H3Event } from "h3";
+
+export const useCookieFetch = async (event: H3Event, url: string) => {
+  const res = await $fetch.raw(url);
+  const cookies = (res.headers.get("set-cookie") || "").split(",");
+  for (const cookie of cookies) {
+    appendResponseHeader(event, "set-cookie", cookie);
+  }
+  return res._data;
+};

apps/app/layouts/default.vue

@@ -2,6 +2,7 @@
 const userStore = useUserStore();
 const sessionStore = useSessionStore();
 const defaultAsideStore = useDefaultAsideStore();
+sessionStore.refreshSession();
 
 const content = ref();
 

apps/app/middleware/session.global.ts

@@ -1,19 +1,15 @@
-import { useCookies } from "@vueuse/integrations/useCookies";
-
 export default defineNuxtRouteMiddleware(async (to) => {
-  if (to.query.oauth) return;
-
-  const sessionStore = useSessionStore();
   const userStore = useUserStore();
+  const serverUser = useCookie("m-user");
 
-  const userCookie = useCookies([]);
-  const userCookieValue = userCookie.get("m-user");
-  if (userCookieValue) {
-    userStore.user = userCookieValue;
-    console.log({ userCookieValue });
+  if (serverUser) {
+    userStore.user = serverUser.value as typeof userStore.user;
   }
 
-  const serverHasSession = sessionStore.hasSession();
+  if (to.query.oauth) return;
+
+  const sessionStore = useSessionStore();
+  const serverHasSession = !!serverUser.value || sessionStore.hasSession();
 
   if (["profile"].includes(String(to.name)) && !serverHasSession) {
     return navigateTo("/sign-in");

apps/app/modules/eslint-globals.ts

@@ -59,7 +59,7 @@ const autoImportEslint = defineNuxtModule({
         getContents,
         write: true,
       });
-      console.log(`globals file is generated at ${fullPath}`);
+      // console.log(`globals file is generated at ${fullPath}`);
     });
   },
 });

apps/app/package.json

@@ -10,7 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.8.2",
+    "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxtjs/fontaine": "^0.2.5",
     "@types/node": "^20.4.6",
     "nuxt": "^3.7.3",

apps/app/pages/code.vue

@@ -23,8 +23,9 @@ async function sendCode() {
     await signUpStore.attemptEmailAddressVerification({
       code: code.join(""),
     });
-    await sessionStore.refreshSession();
     userStore.setUser();
+    await sessionStore.refreshSession();
+
     router.push("/");
   } catch (e) {
     toast?.error("Código incorreto ou expirado.");

apps/app/pages/sign-in.vue

@@ -100,7 +100,7 @@ async function clerkOAuth({ strategy }: { strategy: string }) {
       />
       <MTextField
         class="mb-6"
-        label="Password"
+        label="Senha"
         type="password"
         v-model="password"
         :rules="['password']"

apps/app/pages/sign-up.vue

@@ -95,7 +95,7 @@ async function clerkOAuth(strategy) {
       />
       <MTextField
         class="mb-6"
-        label="Password"
+        label="Senha"
         type="password"
         v-model="password"
         :rules="['password']"

apps/app/stores/clerk/session.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { useCookies } from "@vueuse/integrations/useCookies";
+import { ClerkAPIError } from "@clerk/types";
 
 export const useSessionStore = defineStore("session", {
   state: (): { token: string | null; cleared: boolean } => ({
@@ -24,7 +25,17 @@ export const useSessionStore = defineStore("session", {
     },
     async refreshSession() {
       const clientSession = this.$clerk?.client?.sessions[0];
-      await this.$clerk.setSession(clientSession);
+      if (!clientSession) return;
+      try {
+        await this.$clerk.setSession(clientSession);
+      } catch (e) {
+        const clerkError: { errors: ClerkAPIError[] } | any = e;
+        if (clerkError.errors[0].code === "authentication_invalid") {
+          this.$router.push("/sign-out");
+        }
+
+        throw new Error((e as Error).message);
+      }
     },
     async signOut() {
       const clerkToken = useCookies([]);

apps/app/stores/clerk/user.ts

@@ -36,11 +36,12 @@ export const useUserStore = defineStore("user", {
       const userData = this.$clerk.user
         ? this.$clerk.user
         : this.$clerk.client.sessions[0]?.user;
+
       if (!userData) return;
 
       this.user = userData;
       const userCookie = useCookies([]);
-      userCookie.set("rise-user", userData);
+      userCookie.set("m-user", userData);
     },
     async updateUser() {
       await this.$clerk.user.update<UpdateUserParams>({