fix: wait for auth to be ready to run queries

Author: sifferhans

frontend/app/composables/useAuth.ts

@@ -39,7 +39,13 @@ export function useAuth() {
   const token = useCookie('token')
   const isLoading = useState('isLoading', () => true)
   const me = useState<GetMeQuery['me'] | null | undefined>('me', () => null)
-  const { data } = useGetMeQuery()
+
+  // Only fetch user data if we have a token AND we're not on the callback page
+  const { isAuthReady } = useAuthReady()
+
+  const { data } = useGetMeQuery({
+    pause: computed(() => !isAuthReady.value),
+  })
 
   watch(
     () => data.value?.me,

frontend/app/composables/useAuthReady.ts

@@ -0,0 +1,14 @@
+/**
+ * Composable that provides a reactive flag indicating whether auth is ready for GraphQL queries.
+ * Use this to pause queries until we have a valid token and are not on the callback page.
+ */
+export function useAuthReady() {
+  const token = useCookie('token')
+  const route = useRoute()
+
+  const isAuthReady = computed(() => {
+    return !!token.value && route.path !== '/callback'
+  })
+
+  return { isAuthReady }
+}

frontend/app/layouts/admin.vue

@@ -21,7 +21,11 @@ gql(`
   }
 `)
 
-const { data } = useAdminSidebarQuery()
+const { isAuthReady } = useAuthReady()
+const { data } = useAdminSidebarQuery({
+  pause: computed(() => !isAuthReady.value),
+})
+
 const projectsLinks = computed(() => {
   return data.value?.projects.edges.map(({ node: project }) => ({
     label: project.name,

frontend/app/layouts/default.vue

@@ -49,7 +49,10 @@ onBeforeMount(() => {
   document.documentElement.classList.add('light')
 })
 
-const { data } = useCurrentProjectQuery()
+const { isAuthReady } = useAuthReady()
+const { data } = useCurrentProjectQuery({
+  pause: computed(() => !isAuthReady.value),
+})
 
 watch(data, (newData) => {
   if (!newData) return

frontend/app/pages/admin/index.vue

@@ -33,7 +33,10 @@ gql(`
   }
 `)
 
-const { data, fetching, error } = useAdminHomePageQuery()
+const { isAuthReady } = useAuthReady()
+const { data, fetching, error } = useAdminHomePageQuery({
+  pause: computed(() => !isAuthReady.value),
+})
 const { currentProjects } = useGroupedProjects(() =>
   data.value?.projects.edges.map((edge) => edge.node),
 )

frontend/app/pages/admin/projects/[projectId].vue

@@ -57,10 +57,12 @@ gql(`
   }
 `)
 
+const { isAuthReady } = useAuthReady()
 const { data, error, fetching } = useAdminProjectPageQuery({
   variables: {
     projectId: route.params.projectId,
   },
+  pause: computed(() => !isAuthReady.value),
 })
 
 const state = reactive({

frontend/app/pages/admin/projects/index.vue

@@ -26,7 +26,10 @@ gql(`
   }
 `)
 
-const { data, error, fetching } = useAdminProjectsPageQuery()
+const { isAuthReady } = useAuthReady()
+const { data, error, fetching } = useAdminProjectsPageQuery({
+  pause: computed(() => !isAuthReady.value),
+})
 
 const { currentProjects, futureProjects, pastProjects } = useGroupedProjects(
   () => data.value?.projects.edges.map((edge) => edge.node),

frontend/app/pages/admin/users/[userId].vue

@@ -33,10 +33,12 @@ gql(`
 
 const route = useRoute('admin-users-userId')
 
+const { isAuthReady } = useAuthReady()
 const { data, fetching, error } = useAdminUserPageQuery({
   variables: {
     id: route.params.userId,
   },
+  pause: computed(() => !isAuthReady.value),
 })
 </script>
 

frontend/app/pages/admin/users/index.vue

@@ -46,8 +46,10 @@ gql(`
 const pagination = usePagination({
   defaultPageSize: 15,
 })
+const { isAuthReady } = useAuthReady()
 const { data, fetching, error } = useAdminUsersPageQuery({
   variables: pagination.variables,
+  pause: computed(() => !isAuthReady.value),
 })
 
 // Update pagination state when data changes

frontend/app/pages/callback.vue

@@ -9,26 +9,43 @@ definePageMeta({
 const config = useRuntimeConfig()
 const { setAccessToken } = useAuth()
 
-onBeforeMount(async () => {
+// Use a global state to prevent multiple concurrent callbacks across component re-mounts
+const processing = useState('callback-processing', () => false)
+
+onMounted(async () => {
+  // Only process once globally
+  if (processing.value) {
+    return
+  }
+
+  processing.value = true
+
   const { token, redirect } = route.query
-  if (token) {
-    try {
-      const response = await $fetch<{ token: string }>(
-        `${config.public.callbackUrl}?token=${token}`,
-        { method: 'GET' },
-      )
-      if (response && response.token) {
-        setAccessToken(response.token)
-
-        if (redirect && typeof redirect === 'string') {
-          navigateTo(redirect)
-        } else {
-          navigateTo('/')
-        }
-      }
-    } catch (e) {
-      console.error(e)
+  if (!token || typeof token !== 'string') {
+    processing.value = false
+    return
+  }
+
+  try {
+    const response = await $fetch<{ token: string }>(
+      `${config.public.callbackUrl}?token=${token}`,
+      { method: 'GET' },
+    )
+
+    if (response && response.token) {
+      setAccessToken(response.token)
+
+      const redirectPath =
+        redirect && typeof redirect === 'string' ? redirect : '/'
+
+      // Use replace to prevent back button issues
+      await navigateTo(redirectPath, { replace: true })
+      processing.value = false
+    } else {
+      processing.value = false
     }
+  } catch {
+    processing.value = false
   }
 })
 </script>