refactor(stage-*): login drawer in mobile (#948)

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

@@ -1,46 +1,43 @@
 <script setup lang="ts">
-import { authClient, fetchSession } from '@proj-airi/stage-ui/libs/auth'
-import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
+import { LoginDrawer } from '@proj-airi/stage-ui/components/auth'
+import { fetchSession, signIn } from '@proj-airi/stage-ui/libs/auth'
 import { Button } from '@proj-airi/ui'
-import { useMediaQuery, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
-import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
-import { onMounted } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import { onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
 const router = useRouter()
 
 const isDesktop = useMediaQuery('(min-width: 768px)')
-const screenSafeArea = useScreenSafeArea()
 
-useResizeObserver(document.documentElement, () => screenSafeArea.update())
-
-function signIn(provider: 'google' | 'github') {
-  authClient.signIn.social({
-    provider,
-    callbackURL: window.location.origin,
-  }, {
-    onSuccess: (ctx) => {
-      const authToken = ctx.response.headers.get('set-auth-token') // get the token from the response headers
-      if (authToken) {
-        useAuthStore().authToken = authToken
-      }
-    },
-  }).catch((error) => {
+async function handleSignIn(provider: 'google' | 'github') {
+  try {
+    await signIn(provider)
+  }
+  catch (error) {
     toast.error(error instanceof Error ? error.message : 'An unknown error occurred')
-  })
+  }
 }
 
 onMounted(() => {
-  screenSafeArea.update()
   fetchSession()
     .then((authenticated) => {
       if (authenticated) {
         router.replace('/')
       }
+      else if (!isDesktop.value) {
+        router.replace('/')
+      }
     })
     .catch(() => {})
 })
+
+watch(isDesktop, (val) => {
+  if (!val) {
+    router.replace('/')
+  }
+})
 </script>
 
 <template>
@@ -49,11 +46,11 @@ onMounted(() => {
       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="signIn('google')">
+      <Button :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']" @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="signIn('github')">
+      <Button :class="['w-full', 'py-2', 'flex', 'items-center', 'justify-center']" @click="handleSignIn('github')">
         <div class="i-simple-icons-github" />
         <span>GitHub</span>
       </Button>
@@ -71,34 +68,6 @@ onMounted(() => {
       </div>
     </div>
 
-    <DrawerRoot :open="true" :dismissible="false">
-      <DrawerPortal>
-        <DrawerOverlay class="fixed inset-0 bg-black/40" />
-        <DrawerContent
-          class="fixed bottom-0 left-0 right-0 z-1000 flex flex-col rounded-t-3xl bg-white outline-none dark:bg-neutral-900"
-          :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
-        >
-          <div class="px-6 pt-2">
-            <DrawerHandle class="mb-6" />
-            <div class="mb-6 text-2xl font-bold">
-              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="signIn('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="signIn('github')">
-                <div class="i-simple-icons-github text-xl" />
-                <span>Sign in with GitHub</span>
-              </Button>
-            </div>
-            <div class="mt-10 pb-2 text-center text-xs text-gray-400">
-              By continuing, you agree to our <a href="#" class="underline">Terms</a> and <a href="#" class="underline">Privacy Policy</a>.
-            </div>
-          </div>
-        </DrawerContent>
-      </DrawerPortal>
-    </DrawerRoot>
+    <LoginDrawer :open="true" />
   </div>
 </template>

packages/stage-layouts/src/components/Layouts/HeaderAvatar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { listSessions, signOut } from '@proj-airi/stage-ui/libs/auth'
 import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useMediaQuery } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { RouterLink } from 'vue-router'
@@ -10,6 +10,8 @@ import { toast } from 'vue-sonner'
 const authStore = useAuthStore()
 const { isAuthenticated, user } = storeToRefs(authStore)
 
+const isMobile = useMediaQuery('(max-width: 768px)')
+
 const userName = computed(() => user.value?.name)
 const userAvatar = computed(() => user.value?.image)
 const showDropdown = ref(false)
@@ -51,15 +53,29 @@ async function handleListSessions() {
         <div i-solar:settings-minimalistic-bold-duotone size-5 text="neutral-500 dark:neutral-400" />
       </RouterLink>
 
-      <RouterLink
-        border="2 solid neutral-100/60 dark:neutral-800/30"
-        bg="neutral-50/70 dark:neutral-800/70"
-        w-fit flex items-center justify-center rounded-xl p-2 backdrop-blur-md
-        :title="isAuthenticated ? `Logged in as ${userName}` : 'Login'"
-        to="/auth/login"
-      >
-        <div i-solar:user-bold-duotone />
-      </RouterLink>
+      <template v-if="isMobile">
+        <button
+          border="2 solid neutral-100/60 dark:neutral-800/30"
+          bg="neutral-50/70 dark:neutral-800/70"
+          w-fit flex items-center justify-center rounded-xl p-2 backdrop-blur-md
+          title="Login"
+          type="button"
+          @click="authStore.isLoginOpen = true"
+        >
+          <div i-solar:user-bold-duotone />
+        </button>
+      </template>
+      <template v-else>
+        <RouterLink
+          border="2 solid neutral-100/60 dark:neutral-800/30"
+          bg="neutral-50/70 dark:neutral-800/70"
+          w-fit flex items-center justify-center rounded-xl p-2 backdrop-blur-md
+          :title="isAuthenticated ? `Logged in as ${userName}` : 'Login'"
+          to="/auth/login"
+        >
+          <div i-solar:user-bold-duotone />
+        </RouterLink>
+      </template>
     </template>
 
     <!-- Authenticated: Avatar Dropdown -->

packages/stage-layouts/src/layouts/stage.vue

@@ -1,9 +1,28 @@
 <script setup lang="ts">
+import { LoginDrawer } from '@proj-airi/stage-ui/components/auth/index'
+import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
+import { useMediaQuery } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { watch } from 'vue'
 import { RouterView } from 'vue-router'
+
+const authStore = useAuthStore()
+const { isLoginOpen, isAuthenticated } = storeToRefs(authStore)
+const isMobile = useMediaQuery('(max-width: 768px)')
+
+watch([isAuthenticated, isMobile], ([auth, mobile]) => {
+  if (!auth && mobile) {
+    isLoginOpen.value = true
+  }
+  else {
+    isLoginOpen.value = false
+  }
+})
 </script>
 
 <template>
   <main h-full font-cute>
     <RouterView />
+    <LoginDrawer v-model:open="isLoginOpen" />
   </main>
 </template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Button } from '@proj-airi/ui'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
+import { toast } from 'vue-sonner'
+
+import { signIn } from '../../libs/auth'
+
+const open = defineModel<boolean>('open', { required: true })
+
+const screenSafeArea = useScreenSafeArea()
+useResizeObserver(document.documentElement, () => screenSafeArea.update())
+
+async function handleSignIn(provider: 'google' | 'github') {
+  try {
+    await signIn(provider)
+  }
+  catch (error) {
+    toast.error(error instanceof Error ? error.message : 'An unknown error occurred')
+  }
+}
+</script>
+
+<template>
+  <DrawerRoot v-model:open="open" should-scale-background>
+    <DrawerPortal>
+      <DrawerOverlay class="fixed inset-0 z-1000 bg-black/40" />
+      <DrawerContent
+        class="fixed bottom-0 left-0 right-0 z-1001 flex flex-col rounded-t-3xl bg-white outline-none dark:bg-neutral-900"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
+        <div class="px-6 pt-2">
+          <DrawerHandle class="mb-6" />
+          <div class="mb-6 text-2xl font-bold">
+            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')">
+              <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')">
+              <div class="i-simple-icons-github text-xl" />
+              <span>Sign in with GitHub</span>
+            </Button>
+          </div>
+          <div class="mt-10 pb-2 text-center text-xs text-gray-400">
+            By continuing, you agree to our <a href="#" class="underline">Terms</a> and <a href="#" class="underline">Privacy Policy</a>.
+          </div>
+        </div>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>

packages/stage-ui/src/components/auth/index.ts

@@ -0,0 +1 @@
+export { default as LoginDrawer } from './LoginDrawer.vue'

packages/stage-ui/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './auth'
 export * from './data-pane'
 export * from './gadgets'
 export * from './graphics'

packages/stage-ui/src/composables/api.ts

@@ -3,15 +3,10 @@ import type { AppType } from '../../../../apps/server/src/app'
 import { hc } from 'hono/client'
 
 import { SERVER_URL } from '../libs/auth'
-import { useAuthStore } from '../stores/auth'
 
 export const client = hc<AppType>(SERVER_URL, {
   fetch: (input: RequestInfo | URL, init?: RequestInit) => {
-    const authStore = useAuthStore()
     const headers = new Headers(init?.headers)
-    if (authStore.authToken) {
-      headers.set('Authorization', `Bearer ${authStore.authToken}`)
-    }
     return fetch(input, {
       ...init,
       headers,

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

@@ -4,29 +4,16 @@ import { useAuthStore } from '../stores/auth'
 
 export const SERVER_URL = import.meta.env.VITE_SERVER_URL || 'https://airi-api.moeru.ai'
 
-const authStore = useAuthStore()
-
 export const authClient = createAuthClient({
   baseURL: SERVER_URL,
-
   credentials: 'include',
-  fetchOptions: {
-    auth: {
-      type: 'Bearer',
-      token: () => authStore.authToken,
-    },
-    onSuccess: (ctx) => {
-      const newToken = ctx.response.headers.get('set-auth-token')
-      if (newToken) {
-        authStore.authToken = newToken
-      }
-    },
-  },
 })
 
 export async function fetchSession() {
   const { data } = await authClient.getSession()
   if (data) {
+    const authStore = useAuthStore()
+
     authStore.user = data.user
     authStore.session = data.session
     return true
@@ -42,7 +29,14 @@ export async function listSessions() {
 export async function signOut() {
   await authClient.signOut()
 
+  const authStore = useAuthStore()
   authStore.user = undefined
   authStore.session = undefined
-  authStore.authToken = ''
+}
+
+export async function signIn(provider: 'google' | 'github') {
+  return await authClient.signIn.social({
+    provider,
+    callbackURL: window.location.origin,
+  })
 }

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

@@ -1,21 +1,21 @@
 import type { Session, User } from 'better-auth'
 
-import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
 export const useAuthStore = defineStore('auth', () => {
-  const authToken = useLocalStorage('auth/token', '')
   const user = ref<User>()
   const session = ref<Session>()
   const isAuthenticated = computed(() => !!user.value && !!session.value)
 
+  const isLoginOpen = ref(false)
+
   // TODO: include fetchSession here for pulling and updating better-auth session with initialize(...) action
 
   return {
-    authToken,
     user,
     session,
     isAuthenticated,
+    isLoginOpen,
   }
 })