feat(app): switch to better-auth

apps/shelve/.env.example

@@ -7,7 +7,7 @@ TURBO_TEAM=your_value
 NUXT_OAUTH_GITHUB_CLIENT_ID=your_value
 NUXT_PRIVATE_ENCRYPTION_KEY=your_value
 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/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,6 @@
 <script setup lang="ts">
 const loading = ref(false)
+const { signIn } = useUserSession()
 const props = defineProps({
   label: {
     type: String,
@@ -13,26 +14,21 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  redirectUrl: {
-    type: String,
-    default: '',
-  },
 })
 
 function open() {
   loading.value = true
-  const url = props.redirectUrl
-    ? `/auth/${props.provider}?redirect=${encodeURIComponent(props.redirectUrl)}`
-    : `/auth/${props.provider}`
-  window.location.href = url
+  signIn.social({ provider: props.provider })
+    .catch(() => {
+      loading.value = false
+    })
 }
 </script>
 
 <template>
   <UButton
     :loading
     :disabled="loading"
-    external
     :icon
     block
     class="rounded-none"

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

@@ -17,13 +17,14 @@ const state = reactive<Partial<Schema>>({
 })
 
 const loading = ref(false)
+const { client } = useUserSession()
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   loading.value = true
   try {
-    await $fetch('/api/auth/otp/send', {
-      method: 'POST',
-      body: { email: event.data.email }
+    await client.emailOtp.sendVerificationOtp({
+      email: event.data.email,
+      type: 'sign-in'
     })
 
     emit('emailSubmitted', event.data.email)

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

@@ -13,6 +13,7 @@ const emit = defineEmits<{
 const router = useRouter()
 const otp = ref<string[]>(props.prefilledOtp ? props.prefilledOtp.split('') : [])
 const loading = ref(false)
+const { signIn, client } = useUserSession()
 
 onMounted(async () => {
   if (props.prefilledOtp && props.prefilledOtp.length === 6) {
@@ -25,22 +26,20 @@ async function handleOtpComplete(value: string[]) {
 
   loading.value = true
   try {
-    await $fetch('/api/auth/otp/verify', {
-      method: 'POST',
-      body: {
-        email: props.email,
-        code: value.join('')
+    await signIn.emailOtp({
+      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')
     otp.value = []
@@ -51,9 +50,9 @@ async function handleOtpComplete(value: string[]) {
 
 async function resendCode() {
   try {
-    await $fetch('/api/auth/otp/send', {
-      method: 'POST',
-      body: { email: props.email }
+    await client.emailOtp.sendVerificationOtp({
+      email: props.email,
+      type: 'sign-in'
     })
     toast.success('New verification code sent')
   } catch (error: any) {

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

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

apps/shelve/app/middleware/auth.ts

@@ -1,5 +1,6 @@
-export default defineNuxtRouteMiddleware(() => {
-  const { loggedIn } = useUserSession()
+export default defineNuxtRouteMiddleware(async () => {
+  const { loggedIn, waitForSession } = useUserSession()
+  await waitForSession()
 
   if (!loggedIn.value) {
     toast.error('You need to be logged in to access this page.')

apps/shelve/app/middleware/guest.ts

@@ -1,5 +1,6 @@
-export default defineNuxtRouteMiddleware(() => {
-  const { loggedIn } = useUserSession()
+export default defineNuxtRouteMiddleware(async () => {
+  const { loggedIn, waitForSession } = useUserSession()
+  await waitForSession()
 
   if (loggedIn.value) {
     return navigateTo('/')

apps/shelve/app/middleware/onboarding.ts

@@ -1,5 +1,6 @@
-export default defineNuxtRouteMiddleware(() => {
-  const { user } = useUserSession()
+export default defineNuxtRouteMiddleware(async () => {
+  const { user, waitForSession } = useUserSession()
+  await waitForSession()
 
   if (user.value && !user.value.onboarding) {
     toast.error('You need to complete the onboarding process to access this page.')

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/index.vue

@@ -30,7 +30,7 @@ const deleteLoading = ref(false)
 const UButton = resolveComponent('UButton')
 
 
-async function changeUserRole(id: number, role: string) {
+async function changeUserRole(id: string, role: string) {
   try {
     updateLoading.value = true
     await $fetch(`/api/admin/users/${id}`, {
@@ -47,7 +47,7 @@ async function changeUserRole(id: number, role: string) {
   updateLoading.value = false
 }
 
-async function deleteUser(id: number) {
+async function deleteUser(id: string) {
   deleteLoading.value = true
   try {
     await $fetch(`/api/admin/users/${id}`, {
@@ -60,12 +60,12 @@ async function deleteUser(id: number) {
 
 const columns: TableColumn<User>[] = [
   {
-    accessorKey: 'avatar',
+    accessorKey: 'image',
     header: 'Avatar',
   },
   {
-    accessorKey: 'username',
-    header: 'Username',
+    accessorKey: 'name',
+    header: 'Name',
   },
   {
     accessorKey: 'email',
@@ -167,7 +167,7 @@ const items = (row: User) => [
         }
         modal.open({
           title: 'Are you sure?',
-          description: `You are about to delete ${row.username ? row.username : row.email}, this action cannot be undone.`,
+          description: `You are about to delete ${row.name ? row.name : row.email}, this action cannot be undone.`,
           danger: true,
           onSuccess() {
             toast.promise(deleteUser(row.id), {
@@ -234,16 +234,16 @@ useSeoMeta({
         td: 'border-b border-default'
       }"
     >
-      <template #avatar-cell="{ row }">
-        <UAvatar :src="row.original.avatar" :alt="row.original.username" size="sm" img-class="object-cover" />
+      <template #image-cell="{ row }">
+        <UAvatar :src="row.original.image" :alt="row.original.name" size="sm" img-class="object-cover" />
       </template>
-      <template #username-cell="{ row }">
-        <ULink v-if="row.original.authType === AuthType.GITHUB" :to="`https://github.com/${row.original.username}`" target="_blank">
+      <template #name-cell="{ row }">
+        <ULink v-if="row.original.authType === AuthType.GITHUB" :to="`https://github.com/${row.original.name}`" target="_blank">
           <span class="text-highlighted">
-            {{ row.original.username }}
+            {{ row.original.name }}
           </span>
         </ULink>
-        <span v-else>{{ row.original.username }}</span>
+        <span v-else>{{ row.original.name }}</span>
       </template>
       <template #role-cell="{ row }">
         <UBadge :label="row.original.role.toUpperCase()" :color="row.original.role === Role.ADMIN ? 'primary' : 'neutral'" variant="subtle" />

apps/shelve/app/pages/index.vue

@@ -47,7 +47,7 @@ async function navigateToTeam(team: Team) {
 }
 
 useSeoMeta({
-  title: () => `Home - ${user.value?.username}`,
+  title: () => `Home - ${user.value?.name}`,
   titleTemplate: '%s - Shelve'
 })
 </script>
@@ -72,10 +72,10 @@ useSeoMeta({
       <CrossedDiv line>
         <div class="bg-muted p-8 dark:shadow-lg border border-default w-full backdrop-blur-md">
           <div class="flex flex-col items-center gap-2">
-            <UAvatar :src="user?.avatar" class="size-18 avatar" />
+            <UAvatar :src="user?.image" class="size-18 avatar" />
             <div class="flex flex-col items-center">
               <h1 class="text-lg font-semibold">
-                Welcome back, {{ user?.username }}
+                Welcome back, {{ user?.name }}
               </h1>
               <p class="text-muted italic">
                 Select a team to get started