fix: sync composable usage + $fetch

Author: danielroe

app/components/AuthButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const showModal = ref(false)
-const { user } = await useAtproto()
+const { user } = useAtproto()
 </script>
 
 <template>

app/components/AuthModal.vue

@@ -3,7 +3,7 @@ const open = defineModel<boolean>('open', { default: false })
 
 const handleInput = ref('')
 
-const { user, logout } = await useAtproto()
+const { user, logout } = useAtproto()
 
 async function handleBlueskySignIn() {
   await navigateTo(

app/composables/useAtproto.ts

@@ -1,21 +1,12 @@
 import type { UserSession } from '#shared/schemas/userSession'
 
 /** @public */
-export async function useAtproto() {
-  const {
-    data: user,
-    pending,
-    clear,
-  } = await useAsyncData<UserSession | null>('user-state', async () => {
-    return await useRequestFetch()<UserSession>('/api/auth/session', {
-      headers: { accept: 'application/json' },
-    })
-  })
+export function useAtproto() {
+  const { data: user, pending, clear } = useFetch<UserSession | null>('/api/auth/session')
 
-  const logout = async () => {
-    await useRequestFetch()<UserSession>('/api/auth/session', {
+  async function logout() {
+    await $fetch('/api/auth/session', {
       method: 'delete',
-      headers: { accept: 'application/json' },
     })
 
     clear()