feat(app): switch to better-auth

.gitignore

@@ -144,4 +144,9 @@ dist
 .data
 
 apps/vault/.data
-apps/shelve/.data
+apps/shelve/.data
+.vercel
+.env*.local
+.tmp/
+.worktrees/
+.nuxtrc

apps/shelve/.env.e2e.example

@@ -0,0 +1,6 @@
+E2E_BASE_URL=""
+E2E_DATABASE_URL=""
+E2E_TEST_EMAIL=""
+E2E_ADMIN_EMAIL=""
+E2E_TEAM_SLUG=""
+E2E_VERCEL_BYPASS=""

apps/shelve/.env.example

@@ -6,8 +6,9 @@ NUXT_OAUTH_GOOGLE_CLIENT_ID=your_value
 TURBO_TEAM=your_value
 NUXT_OAUTH_GITHUB_CLIENT_ID=your_value
 NUXT_PRIVATE_ENCRYPTION_KEY=your_value
+NUXT_AUTH_ALLOW_LEGACY_CLI=true
 NUXT_OAUTH_GITHUB_CLIENT_SECRET=your_value
-NUXT_SESSION_PASSWORD=your_value
+BETTER_AUTH_SECRET=your_value
 TURBO_TOKEN=your_value
 NUXT_PRIVATE_RESEND_API_KEY=your_value
 NUXT_PRIVATE_RESEND_WEBHOOK_SECRET=your_value

apps/shelve/.gitignore

@@ -148,4 +148,9 @@ dist
 .turbo
 
 .data
-.wrangler
+.wrangler
+.vercel
+.env*.local
+.nuxtrc
+playwright-report/
+test-results/

apps/shelve/app/auth.config.ts

@@ -0,0 +1,6 @@
+import { defineClientAuth } from '@onmax/nuxt-better-auth/config'
+import { adminClient, emailOTPClient } from 'better-auth/client/plugins'
+
+export default defineClientAuth({
+  plugins: [emailOTPClient(), adminClient()],
+})

apps/shelve/app/components/CliInstall.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { user, fetch } = useUserSession()
+const { user, fetchSession } = useUserSession()
 
 const closed = ref(false)
 const loading = ref(false)
@@ -8,7 +8,7 @@ async function installCli() {
   await $fetch('/api/user/cli', {
     method: 'POST',
   })
-  await fetch()
+  await fetchSession()
   toast.success('Thank you for installing the Shelve CLI')
   loading.value = false
 }

apps/shelve/app/components/UserDropdown.vue

@@ -7,9 +7,9 @@ const colorMode = useColorMode()
 const items = computed<DropdownMenuItem[][]>(() => [
   [
     {
-      label: user.value?.username || '',
+      label: user.value?.name || '',
       avatar: {
-        src: user.value?.avatar || ''
+        src: user.value?.image || ''
       },
       type: 'label'
     }
@@ -63,6 +63,6 @@ const items = computed<DropdownMenuItem[][]>(() => [
       content: 'w-48'
     }"
   >
-    <UAvatar :src="user.avatar" :alt="user.username" size="sm" />
+    <UAvatar :src="user.image" :alt="user.name" size="sm" />
   </UDropdownMenu>
 </template>

apps/shelve/app/components/auth/Button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const loading = ref(false)
+const signInSocial = useSignIn('social')
 const props = defineProps({
   label: {
     type: String,
@@ -15,24 +15,29 @@ const props = defineProps({
   },
   redirectUrl: {
     type: String,
-    default: '',
+    required: false,
+    default: undefined,
   },
 })
 
-function open() {
-  loading.value = true
-  const url = props.redirectUrl
-    ? `/auth/${props.provider}?redirect=${encodeURIComponent(props.redirectUrl)}`
-    : `/auth/${props.provider}`
-  window.location.href = url
+const loading = computed(() => signInSocial.status.value === 'pending')
+
+async function open() {
+  await signInSocial.execute({
+    provider: props.provider,
+    callbackURL: props.redirectUrl || undefined,
+  })
+
+  if (signInSocial.status.value === 'error') {
+    toast.error(getAuthErrorMessage(signInSocial.error.value, `Failed to sign in with ${props.provider}`))
+  }
 }
 </script>
 
 <template>
   <UButton
     :loading
     :disabled="loading"
-    external
     :icon
     block
     class="rounded-none"

apps/shelve/app/components/auth/EmailForm.vue

@@ -16,22 +16,20 @@ const state = reactive<Partial<Schema>>({
   email: undefined
 })
 
-const loading = ref(false)
+const sendVerificationOtp = useAuthClientAction((authClient) => authClient.emailOtp.sendVerificationOtp)
+const loading = computed(() => sendVerificationOtp.status.value === 'pending')
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  loading.value = true
-  try {
-    await $fetch('/api/auth/otp/send', {
-      method: 'POST',
-      body: { email: event.data.email }
-    })
-
+  await sendVerificationOtp.execute({
+    email: event.data.email,
+    type: 'sign-in'
+  })
+
+  if (sendVerificationOtp.status.value === 'error') {
+    toast.error(getAuthErrorMessage(sendVerificationOtp.error.value, 'Failed to send verification code'))
+  } else {
     emit('emailSubmitted', event.data.email)
     toast.success('Check your email for the verification code')
-  } catch (error: any) {
-    toast.error(error.data?.message || 'Failed to send verification code')
-  } finally {
-    loading.value = false
   }
 }
 </script>

apps/shelve/app/components/auth/OtpForm.vue

@@ -12,7 +12,9 @@ const emit = defineEmits<{
 
 const router = useRouter()
 const otp = ref<string[]>(props.prefilledOtp ? props.prefilledOtp.split('') : [])
-const loading = ref(false)
+const signInEmailOtp = useSignIn('emailOtp')
+const sendVerificationOtp = useAuthClientAction((authClient) => authClient.emailOtp.sendVerificationOtp)
+const loading = computed(() => signInEmailOtp.status.value === 'pending' || sendVerificationOtp.status.value === 'pending')
 
 onMounted(async () => {
   if (props.prefilledOtp && props.prefilledOtp.length === 6) {
@@ -23,41 +25,37 @@ onMounted(async () => {
 async function handleOtpComplete(value: string[]) {
   if (value.length !== 6) return
 
-  loading.value = true
-  try {
-    await $fetch('/api/auth/otp/verify', {
-      method: 'POST',
-      body: {
-        email: props.email,
-        code: value.join('')
+  await signInEmailOtp.execute({
+    email: props.email,
+    otp: value.join('')
+  }, {
+    onSuccess: async () => {
+      emit('otpVerified')
+      toast.success('Login successful!')
+      if (props.redirectUrl) {
+        await router.push(props.redirectUrl)
+      } else {
+        await reloadNuxtApp()
       }
-    })
-
-    emit('otpVerified')
-    toast.success('Login successful!')
-
-    if (props.redirectUrl) {
-      await router.push(props.redirectUrl)
-    } else {
-      reloadNuxtApp()
     }
-  } catch (error: any) {
-    toast.error(error.data?.message || 'Invalid verification code')
+  })
+
+  if (signInEmailOtp.status.value === 'error') {
+    toast.error(getAuthErrorMessage(signInEmailOtp.error.value, 'Invalid verification code'))
     otp.value = []
-  } finally {
-    loading.value = false
   }
 }
 
 async function resendCode() {
-  try {
-    await $fetch('/api/auth/otp/send', {
-      method: 'POST',
-      body: { email: props.email }
-    })
+  await sendVerificationOtp.execute({
+    email: props.email,
+    type: 'sign-in'
+  })
+
+  if (sendVerificationOtp.status.value === 'error') {
+    toast.error(getAuthErrorMessage(sendVerificationOtp.error.value, 'Failed to resend code'))
+  } else {
     toast.success('New verification code sent')
-  } catch (error: any) {
-    toast.error('Failed to resend code')
   }
 }
 </script>

apps/shelve/app/composables/useLogout.ts

@@ -1,4 +1,7 @@
 export async function useLogout() {
-  await useUserSession().clear()
+  const { signOut } = useUserSession()
+  const defaultTeamSlug = useCookie<string | null>('defaultTeamSlug')
+  defaultTeamSlug.value = null
+  await signOut()
   navigateTo('/login')
 }

apps/shelve/app/error.vue

@@ -9,7 +9,7 @@ const { error } = defineProps<ErrorProps>()
 console.error(error)
 
 const router = useRouter()
-const { clear } = useUserSession()
+const { signOut } = useUserSession()
 
 const handleError = () => clearError({ redirect: '/' })
 const goBack = () => {
@@ -34,7 +34,7 @@ const clearCookies = async () => {
     const [name] = cookie.split('=')
     document.cookie = `${name?.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`
   })
-  await clear()
+  await signOut()
   navigateTo('/login')
 }
 

apps/shelve/app/layouts/app.vue

@@ -21,7 +21,7 @@ const routeTitle = computed(() => {
 })
 
 const title = computed(() => {
-  return route.path === `/${teamSlug.value}` ? `Welcome, ${user.value?.username}` : navigation.value?.title || routeTitle.value
+  return route.path === `/${teamSlug.value}` ? `Welcome, ${user.value?.name}` : navigation.value?.title || routeTitle.value
 })
 </script>
 

apps/shelve/app/middleware/admin.ts

@@ -2,6 +2,7 @@ import { Role } from '@types'
 
 export default defineNuxtRouteMiddleware(() => {
   const { user } = useUserSession()
+
   if (user.value && user.value.role !== Role.ADMIN) {
     toast.error('You are not authorized to access this page')
     return navigateTo('/')

apps/shelve/app/middleware/index-redirect.ts

@@ -5,9 +5,9 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   if (from.path && from.path !== '/' && !from.path.startsWith('/auth')) return
 
   try {
-    const teams = await $fetch('/api/teams')
-    if (teams.length === 1) {
-      return navigateTo(`/${teams[0].slug}`)
+    const teams = await $fetch<Array<{ slug: string }>>('/api/teams')
+    if (teams?.length === 1) {
+      return navigateTo(`/${teams[0]?.slug}`)
     }
   } catch (error) {
     console.error('Failed to fetch teams in index-redirect middleware:', error)

apps/shelve/app/pages/[teamSlug].vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'app',
-  middleware: ['auth', 'onboarding', 'default-team']
+  auth: 'user',
+  middleware: ['onboarding', 'default-team']
 })
 
 const route = useRoute()

apps/shelve/app/pages/[teamSlug]/team/members.vue

@@ -49,7 +49,7 @@ onMounted(() => {
 })
 
 // Members logic
-const members = computed(() => currentTeam.value?.members.filter((member) => member.user.username.toLowerCase().includes(search.value.toLowerCase())))
+const members = computed(() => currentTeam.value?.members.filter((member) => member.user.name.toLowerCase().includes(search.value.toLowerCase())))
 const canDelete = computed(() => hasAccess(teamRole.value, TeamRole.OWNER))
 const canUpdate = computed(() => hasAccess(teamRole.value, TeamRole.ADMIN))
 
@@ -75,12 +75,12 @@ const modal = overlay.create(ConfirmModal)
 
 const columns: TableColumn<Member>[] = [
   {
-    accessorKey: 'avatar',
+    accessorKey: 'image',
     header: 'Avatar',
   },
   {
-    accessorKey: 'username',
-    header: 'Username',
+    accessorKey: 'name',
+    header: 'Name',
   },
   {
     accessorKey: 'email',
@@ -182,7 +182,7 @@ const items = (row: Member) => [
         }
         modal.open({
           title: 'Are you sure?',
-          description: `You are about to remove ${row.user.username} from the team.`,
+          description: `You are about to remove ${row.user.name} from the team.`,
           danger: true,
           onSuccess() {
             toast.promise(removeMember(row.id), {
@@ -290,12 +290,12 @@ definePageMeta({
         td: 'border-b border-default'
       }"
     >
-      <template #avatar-cell="{ row }">
-        <UAvatar :src="row.original.user.avatar" :alt="row.original.user.username" size="sm" img-class="object-cover" />
+      <template #image-cell="{ row }">
+        <UAvatar :src="row.original.user.image" :alt="row.original.user.name" size="sm" img-class="object-cover" />
       </template>
-      <template #username-cell="{ row }">
+      <template #name-cell="{ row }">
         <span class="font-semibold">
-          {{ row.original.user.username }}
+          {{ row.original.user.name }}
         </span>
       </template>
       <template #email-cell="{ row }">

apps/shelve/app/pages/admin.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'app',
-  middleware: ['auth', 'admin']
+  auth: 'user',
+  middleware: ['admin']
 })
 
 useSeoMeta({
@@ -12,4 +13,3 @@ useSeoMeta({
 <template>
   <NuxtPage />
 </template>
-