fix(stage-ui, stage-web): oauth loading state

apps/stage-web/src/pages/auth/login.vue

@@ -1,27 +1,34 @@
 <script setup lang="ts">
+import type { OAuthProvider } from '@proj-airi/stage-ui/libs/auth'
+
 import { LoginDrawer } from '@proj-airi/stage-ui/components/auth'
 import { fetchSession, signIn } from '@proj-airi/stage-ui/libs/auth'
-import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
 import { Button } from '@proj-airi/ui'
 import { useMediaQuery } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
 const router = useRouter()
-const authStore = useAuthStore()
-const { isLoggingIn } = storeToRefs(authStore)
 
 const isDesktop = useMediaQuery('(min-width: 768px)')
 
-async function handleSignIn(provider: 'google' | 'github') {
+const loading = ref<Record<OAuthProvider, boolean>>({
+  google: false,
+  github: false,
+})
+
+async function handleSignIn(provider: OAuthProvider) {
+  loading.value[provider] = true
   try {
     await signIn(provider)
   }
   catch (error) {
     toast.error(error instanceof Error ? error.message : 'An unknown error occurred')
   }
+  finally {
+    loading.value[provider] = false
+  }
 }
 
 onMounted(() => {
@@ -52,18 +59,18 @@ watch(isDesktop, (val) => {
     <div class="max-w-xs w-full flex flex-col gap-3">
       <Button
         :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
-        :loading="isLoggingIn"
+        :loading="loading.google"
         @click="handleSignIn('google')"
       >
-        <div class="i-simple-icons-google" />
+        <div v-if="!loading.google" class="i-simple-icons-google" />
         <span>Google</span>
       </Button>
       <Button
         :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
-        :loading="isLoggingIn"
+        :loading="loading.github"
         @click="handleSignIn('github')"
       >
-        <div class="i-simple-icons-github" />
+        <div v-if="!loading.github" class="i-simple-icons-github" />
         <span>GitHub</span>
       </Button>
     </div>

packages/stage-ui/src/components/auth/LoginDrawer.vue

@@ -1,25 +1,35 @@
 <script setup lang="ts">
+import type { OAuthProvider } from '../../libs/auth'
+
 import { Button } from '@proj-airi/ui'
 import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
+import { ref } from 'vue'
 import { toast } from 'vue-sonner'
 
 import { signIn } from '../../libs/auth'
-import { useAuthStore } from '../../stores/auth'
 
-const authStore = useAuthStore()
 const open = defineModel<boolean>('open', { required: true })
 
 const screenSafeArea = useScreenSafeArea()
 useResizeObserver(document.documentElement, () => screenSafeArea.update())
 
-async function handleSignIn(provider: 'google' | 'github') {
+const loading = ref<Record<OAuthProvider, boolean>>({
+  google: false,
+  github: false,
+})
+
+async function handleSignIn(provider: OAuthProvider) {
+  loading.value[provider] = true
   try {
     await signIn(provider)
   }
   catch (error) {
     toast.error(error instanceof Error ? error.message : 'An unknown error occurred')
   }
+  finally {
+    loading.value[provider] = false
+  }
 }
 </script>
 
@@ -39,18 +49,18 @@ async function handleSignIn(provider: 'google' | 'github') {
           <div class="flex flex-col gap-4">
             <Button
               :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']"
-              :loading="authStore.isLoggingIn"
+              :loading="loading.google"
               @click="handleSignIn('google')"
             >
-              <div class="i-simple-icons-google text-xl" />
+              <div v-if="!loading.google" class="i-simple-icons-google text-xl" />
               <span>Sign in with Google</span>
             </Button>
             <Button
               :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']"
-              :loading="authStore.isLoggingIn"
+              :loading="loading.github"
               @click="handleSignIn('github')"
             >
-              <div class="i-simple-icons-github text-xl" />
+              <div v-if="!loading.github" class="i-simple-icons-github text-xl" />
               <span>Sign in with GitHub</span>
             </Button>
           </div>

packages/stage-ui/src/libs/auth.ts

@@ -2,6 +2,8 @@ import { createAuthClient } from 'better-auth/vue'
 
 import { useAuthStore } from '../stores/auth'
 
+export type OAuthProvider = 'google' | 'github'
+
 export const SERVER_URL = import.meta.env.VITE_SERVER_URL || 'https://airi-api.moeru.ai'
 
 export const authClient = createAuthClient({
@@ -34,16 +36,9 @@ export async function signOut() {
   authStore.session = undefined
 }
 
-export async function signIn(provider: 'google' | 'github') {
-  const authStore = useAuthStore()
-  authStore.isLoggingIn = true
-  try {
-    return await authClient.signIn.social({
-      provider,
-      callbackURL: window.location.origin,
-    })
-  }
-  finally {
-    authStore.isLoggingIn = false
-  }
+export async function signIn(provider: OAuthProvider) {
+  return await authClient.signIn.social({
+    provider,
+    callbackURL: window.location.origin,
+  })
 }

packages/stage-ui/src/stores/auth.ts

@@ -9,7 +9,6 @@ export const useAuthStore = defineStore('auth', () => {
   const isAuthenticated = computed(() => !!user.value && !!session.value)
 
   const isLoginOpen = ref(false)
-  const isLoggingIn = ref(false)
 
   // TODO: include fetchSession here for pulling and updating better-auth session with initialize(...) action
 
@@ -18,6 +17,5 @@ export const useAuthStore = defineStore('auth', () => {
     session,
     isAuthenticated,
     isLoginOpen,
-    isLoggingIn,
   }
 })