scope upgrade works

Author: fatfingers23

app/components/Header/AuthModal.client.vue

@@ -1,37 +1,21 @@
 <script setup lang="ts">
+import { authRedirect } from '~/composables/useAtproto'
+
 const handleInput = shallowRef('')
 
 const { user, logout } = useAtproto()
 
 async function handleBlueskySignIn() {
-  await navigateTo(
-    {
-      path: '/api/auth/atproto',
-      query: { handle: 'https://bsky.social' },
-    },
-    { external: true },
-  )
+  await authRedirect('https://bsky.social')
 }
 
 async function handleCreateAccount() {
-  await navigateTo(
-    {
-      path: '/api/auth/atproto',
-      query: { handle: 'https://npmx.social', create: 'true' },
-    },
-    { external: true },
-  )
+  await authRedirect('https://npmx.social', true)
 }
 
 async function handleLogin() {
   if (handleInput.value) {
-    await navigateTo(
-      {
-        path: '/api/auth/atproto',
-        query: { handle: handleInput.value },
-      },
-      { external: true },
-    )
+    await authRedirect(handleInput.value)
   }
 }
 </script>

app/composables/useAtproto.ts

@@ -1,6 +1,31 @@
+import { ERROR_NEED_REAUTH } from '#imports'
+import type { FetchError } from 'ofetch'
 import type { UserSession } from '#shared/schemas/userSession'
 import type { PackageLikes } from '~~/server/utils/atproto/utils/likes'
 
+export async function authRedirect(identifier: string, create: boolean = false) {
+  let query = { handle: identifier } as {}
+  if (create) {
+    query = { ...query, create: 'true' }
+  }
+  await navigateTo(
+    {
+      path: '/api/auth/atproto',
+      query,
+    },
+    { external: true },
+  )
+}
+
+export async function handleAuthError(e: unknown, userHandle?: string | null): Promise<never> {
+  const fetchError = e as FetchError
+  const errorMessage = fetchError?.data?.message
+  if (errorMessage === ERROR_NEED_REAUTH && userHandle) {
+    await authRedirect(userHandle)
+  }
+  throw e
+}
+
 export function useAtproto() {
   const { data: user, pending, clear } = useFetch<UserSession | null>('/api/auth/session')
 
@@ -16,6 +41,7 @@ export function useAtproto() {
 }
 
 export function useLikePackage(packageName: string) {
+  const { user } = useAtproto()
   const data = ref<PackageLikes | null>(null)
   const error = ref<Error | null>(null)
   const pending = ref(false)
@@ -25,15 +51,16 @@ export function useLikePackage(packageName: string) {
     error.value = null
 
     try {
-      const result = await $fetch('/api/auth/social/like', {
+      const result = await $fetch<PackageLikes>('/api/auth/social/like', {
         method: 'POST',
         body: { packageName },
       })
+
       data.value = result
       return result
     } catch (e) {
-      error.value = e as Error
-      throw e
+      error.value = e as FetchError
+      await handleAuthError(e, user.value?.handle)
     } finally {
       pending.value = false
     }

app/pages/package/[...package].vue

@@ -12,6 +12,7 @@ import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
 import { NuxtLink } from '#components'
+import { useModal } from '~/composables/useModal'
 
 definePageMeta({
   name: 'package',
@@ -354,7 +355,8 @@ const canonicalUrl = computed(() => {
 
 //atproto
 const { user } = useAtproto()
-const showAuthModal = ref(false)
+
+const authModal = useModal('auth-modal')
 
 const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.value}`, {
   default: () => ({ totalLikes: 0, userHasLiked: false }),
@@ -364,7 +366,7 @@ const { mutate: likePackage } = useLikePackage(packageName.value)
 
 const likeAction = async () => {
   if (user.value?.handle == null) {
-    showAuthModal.value = true
+    authModal.open()
   } else {
     const result = await likePackage()
     if (result?.totalLikes) {
@@ -1111,7 +1113,6 @@ defineOgImageComponent('Package', {
       </p>
       <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
-    <AuthModal v-model:open="showAuthModal" />
   </main>
 </template>