feat(stage-ui, stage-web): add loading state for authing

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

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 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 { 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)')
 
@@ -46,11 +50,19 @@ watch(isDesktop, (val) => {
       Sign in to AIRI Stage
     </div>
     <div class="max-w-xs w-full flex flex-col gap-3">
-      <Button :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']" @click="handleSignIn('google')">
+      <Button
+        :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
+        :loading="isLoggingIn"
+        @click="handleSignIn('google')"
+      >
         <div class="i-simple-icons-google" />
         <span>Google</span>
       </Button>
-      <Button :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']" @click="handleSignIn('github')">
+      <Button
+        :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']"
+        :loading="isLoggingIn"
+        @click="handleSignIn('github')"
+      >
         <div class="i-simple-icons-github" />
         <span>GitHub</span>
       </Button>

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

@@ -5,7 +5,9 @@ import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot }
 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()
@@ -35,11 +37,19 @@ async function handleSignIn(provider: 'google' | 'github') {
             Sign in
           </div>
           <div class="flex flex-col gap-4">
-            <Button :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']" @click="handleSignIn('google')">
+            <Button
+              :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']"
+              :loading="authStore.isLoggingIn"
+              @click="handleSignIn('google')"
+            >
               <div 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']" @click="handleSignIn('github')">
+            <Button
+              :class="['w-full', 'py-4', 'flex', 'items-center', 'justify-center', 'gap-3', 'text-lg', 'rounded-2xl']"
+              :loading="authStore.isLoggingIn"
+              @click="handleSignIn('github')"
+            >
               <div class="i-simple-icons-github text-xl" />
               <span>Sign in with GitHub</span>
             </Button>

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

@@ -35,8 +35,15 @@ export async function signOut() {
 }
 
 export async function signIn(provider: 'google' | 'github') {
-  return await authClient.signIn.social({
-    provider,
-    callbackURL: window.location.origin,
-  })
+  const authStore = useAuthStore()
+  authStore.isLoggingIn = true
+  try {
+    return await authClient.signIn.social({
+      provider,
+      callbackURL: window.location.origin,
+    })
+  }
+  finally {
+    authStore.isLoggingIn = false
+  }
 }

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

@@ -9,6 +9,7 @@ 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
 
@@ -17,5 +18,6 @@ export const useAuthStore = defineStore('auth', () => {
     session,
     isAuthenticated,
     isLoginOpen,
+    isLoggingIn,
   }
 })