Fix useContent not using cookies therefore skipping the auth step

components/base/Loading.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="{'w-6 h-6 after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
+    <span :class="{'w-6 h-6 border-4 border-transparent after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
 </template>
 
 <script setup lang="ts">

components/canvas/CanvasEdge.vue

@@ -2,8 +2,8 @@
 import type { CanvasColor } from "~/types/canvas";
 
 type Direction = 'bottom' | 'top' | 'left' | 'right';
-interface Props
+
-{
+const props = defineProps<{
     path: {
         path: string;
         from: { x: number; y: number };
@@ -12,8 +12,7 @@ interface Props
     };
     color?: CanvasColor;
     label?: string;
-}
+}>();
-const props = defineProps<Props>();
 
 const rotation: Record<Direction, string> = {
     top: "180",

components/page/Canvas.vue

@@ -1,10 +1,3 @@
-<script lang="ts">
-function cancelEvent(e: Event)
-{
-    e.preventDefault();
-}
-</script>
-
 <script setup lang="ts">
 import { useDrag, useHover, usePinch, useWheel } from '@vueuse/gesture';
 import { Icon } from '@iconify/vue/dist/iconify.js';
@@ -80,7 +73,7 @@ dark:border-dark-purple
 
 */
 
-/*const cancelEvent = (e: Event) => e.preventDefault()
+const cancelEvent = (e: Event) => e.preventDefault()
 useHover(({ hovering }) => {
     if (!hovering) {
         //@ts-ignore
@@ -95,7 +88,7 @@ useHover(({ hovering }) => {
     document.addEventListener('gesturechange', cancelEvent)
 }, {
     domTarget: canvasRef,
-});*/
+});
 
 const dragHandler = useDrag(({ delta: [x, y] }: { delta: number[] }) => { 
     dispX.value += x / zoom.value;
@@ -149,7 +142,7 @@ const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
             </div>
         </div>
         <div :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}" >
-            <CanvasRenderer :path="path" />
+            <CanvasRenderer :path="path"  />
         </div>
     </div>
 </template>

composables/useContent.ts

@@ -22,7 +22,7 @@ export function useContent(): ContentComposable {
 async function fetch(force: boolean) {
     const content = useContentState();
     if(content.value.length === 0 || force)
-        content.value = await $fetch('/api/file/overview');
+        content.value = await useRequestFetch()('/api/file/overview');
 }
 
 async function get(path: string) {
@@ -31,7 +31,7 @@ async function get(path: string) {
     const item = value.find(e => e.path === path);
     if(item)
     {
-        item.content = await $fetch(`/api/file/content/${encodeURIComponent(path)}`);
+        item.content = await useRequestFetch()(`/api/file/content/${encodeURIComponent(path)}`);
     }
 
     content.value = value;

composables/useUserSession.ts

@@ -1,7 +1,9 @@
 import type { UserSession, UserSessionComposable } from '~/types/auth'
+import { useContent } from './useContent'
 
 const useSessionState = () => useState<UserSession>('nuxt-session', () => ({}))
 const useAuthReadyState = () => useState('nuxt-auth-ready', () => false)
+const useContentFetch = (force: boolean) => useContent().fetch(force);
 
 /**
  * Composable to get back the user session and utils around it.
@@ -13,28 +15,27 @@ export function useUserSession(): UserSessionComposable {
   return {
     ready: computed(() => authReadyState.value),
     loggedIn: computed(() => Boolean(sessionState.value.user)),
-    user: computed(() => sessionState.value.user || null),
+    user: computed(() => sessionState.value.user ?? null),
     session: sessionState,
     fetch,
     clear,
   }
 }
 
-async function fetch() {
+async function fetch(): Promise<boolean> {
   const authReadyState = useAuthReadyState()
-  useSessionState().value = await useRequestFetch()('/api/auth/session', {
+  const sessionState = useSessionState()
-    headers: {
+  const loggedIn = Boolean(sessionState.value.user)
-      Accept: 'text/json',
+  sessionState.value = await useRequestFetch()('/api/auth/session').catch(() => ({}))
-    },
+  if (!authReadyState.value)
-    retry: false,
+  {
-  }).catch(() => ({}))
-  if (!authReadyState.value) {
     authReadyState.value = true
   }
+  return loggedIn !== Boolean(sessionState.value.user);
 }
 
 async function clear() {
-  await $fetch('/api/auth/session', { method: 'DELETE' })
+  await useRequestFetch()('/api/auth/session', { method: 'DELETE' })
   useSessionState().value = {}
-  useRouter().go(0);
+  useRouter().go(0)
 }

layouts/default.vue

@@ -106,6 +106,9 @@ const options = ref<DropdownOption[]>([{
 
 const open = ref(false);
 const { loggedIn, user, clear } = useUserSession();
+const { fetch } = useContent();
+
+await fetch(false);
 
 const route = useRouter().currentRoute;
 const path = computed(() => route.value.params.path ? Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path : undefined);

middleware/auth.global.ts

@@ -2,9 +2,13 @@ import { hasPermissions } from "#shared/auth.util";
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
     const { loggedIn, fetch, user } = useUserSession();
+    const { fetch: fetchContent } = useContent();
     const meta = to.meta;
 
-    await fetch();
+    if(await fetch())
+    {
+        fetchContent(true);
+    }
     
     if(!!meta.guestsGoesTo && !loggedIn.value)
     {
@@ -34,8 +38,5 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
         }
     }
 
-    const { fetch: fetchContent } = useContent();
-    await fetchContent(false);
-
     return;
 });

nuxt.config.ts

@@ -132,7 +132,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     session: {
-      password: '699c46bd-9aaa-4364-ad01-510ee4fe7013'
+      password: '699c46bd-9aaa-4364-ad01-510ee4fe7013',
     },
     database: 'db.sqlite',
     mail: {

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@iconify/vue": "^4.2.0",
+    "@iconify/vue": "^4.3.0",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/sitemap": "^7.0.1",
     "@nuxtjs/tailwindcss": "^6.12.2",
@@ -22,11 +22,11 @@
     "hast-util-heading": "^3.0.0",
     "hast-util-heading-rank": "^3.0.0",
     "lodash.capitalize": "^4.2.1",
-    "mdast-util-find-and-replace": "^3.0.1",
+    "mdast-util-find-and-replace": "^3.0.2",
     "nodemailer": "^6.9.16",
-    "nuxt": "^3.14.1592",
+    "nuxt": "^3.15.0",
     "nuxt-security": "^2.1.5",
-    "radix-vue": "^1.9.11",
+    "radix-vue": "^1.9.12",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-frontmatter": "^5.0.0",

server/api/file/overview/[path].get.ts

@@ -37,7 +37,8 @@ export default defineEventHandler(async (e) => {
             return;
         }
         
-        return { path: content.path,
+        return { 
+            path: content.path,
             owner: content.owner,
             title: content.title,
             type: content.type,

types/auth.d.ts

@@ -69,7 +69,7 @@ export interface UserSessionComposable {
   /**
    * Fetch the user session from the server.
    */
-  fetch: () => Promise<void>
+  fetch: () => Promise<boolean>
   /**
    * Clear the user session and remove the session cookie.
    */