fix: switch auth dependency

composables/useUserData.ts

@@ -1,26 +1,26 @@
 export function useUserData() {
-  const { status, data } = useAuth()
+  const { loggedIn, user } = useAuth()
 
   return {
     isPremium: computed(
       //
       () => {
-        if (status.value !== 'authenticated') {
+        if (!loggedIn) {
           return false
         }
 
-        return data.value.is_subscription_valid
+        return user.is_subscription_valid
       }
     ),
 
     email: computed(
       //
       () => {
-        if (status.value !== 'authenticated') {
+        if (!loggedIn) {
           return null
         }
 
-        return data.value.email
+        return user.email
       }
     )
   }

nuxt.config.js

@@ -73,7 +73,7 @@ export default defineNuxtConfig({
 
     '@headlessui-float/nuxt',
 
-    '@sidebase/nuxt-auth',
+    '@nuxt-alt/auth',
 
     '@formkit/auto-animate/nuxt',
 
@@ -98,50 +98,36 @@ export default defineNuxtConfig({
     ]
   },
 
-  /** @type {import('@sidebase/nuxt-auth')} */
+  /** @type {import('@nuxt-alt/auth').ModuleOptions} */
   auth: {
-    baseURL: process.env.API_URL + '/auth',
-
-    provider: {
-      type: 'refresh',
-
-      endpoints: {
-        signIn: { path: '/log-in', method: 'post' },
-        signUp: null,
-        signOut: null,
-
-        getSession: { path: '/profile', method: 'get' },
-        refresh: { path: '/refresh', method: 'post' }
-      },
-
-      pages: {
-        login: '/premium/sign-in'
-      },
-
-      token: {
-        signInResponseTokenPointer: '/access_token',
-
-        type: 'Bearer',
-
-        maxAgeInSeconds: 60 * 30, // 30 minutes
-
-        sameSiteAttribute: 'strict'
-      },
-
-      refreshToken: {
-        signInResponseRefreshTokenPointer: '/refresh_token',
-
-        maxAgeInSeconds: 60 * 60 * 24 * 30 // 30 days
-      },
-
-      sessionDataType: {
-        email: 'string',
-
-        is_subscription_valid: 'boolean',
-
-        license_uses: 'number',
+    redirect: {
+      login: '/premium/sign-in',
+      logout: '/premium',
+      home: '/premium/dashboard'
+    },
 
-        sale_timestamp: 'string'
+    strategies: {
+      local: {
+        scheme: 'refresh',
+        token: {
+          property: 'access_token',
+          maxAge: 60 * 30, // 30 minutes
+          global: false
+        },
+        refreshToken: {
+          property: 'refresh_token',
+          data: 'refresh_token',
+          maxAge: 60 * 60 * 24 * 30 // 30 days
+        },
+        user: {
+          property: false
+        },
+        endpoints: {
+          login: { url: process.env.API_URL + '/auth/log-in', method: 'post' },
+          refresh: { url: process.env.API_URL + '/auth/refresh', method: 'post' },
+          user: { url: process.env.API_URL + '/auth/profile', method: 'get' },
+          logout: false
+        }
       }
     }
   },

package.json

@@ -28,10 +28,11 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.17",
     "@heroicons/vue": "^2.1.1",
+    "@nuxt-alt/auth": "^3.1.4",
+    "@nuxt-alt/http": "^1.7.8",
     "@nuxt/image": "^1.2.0",
     "@nuxtjs/partytown": "^1.4.0",
     "@nuxtjs/sitemap": "^5.0.2",
-    "@sidebase/nuxt-auth": "0.6.4",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/vue-query": "^5.17.11",

pages/index.vue

@@ -7,7 +7,7 @@
   import { ArrowRightIcon } from '@heroicons/vue/24/solid'
 
   const config = useRuntimeConfig()
-  const { token: authToken } = useAuth()
+  const $authState = useState('auth-internal')
 
   const { pageHistory } = usePageHistory()
 
@@ -56,7 +56,7 @@
       },
 
       headers: {
-        Authorization: authToken.value
+        Authorization: $authState.value['_token.local'] ?? undefined
       },
 
       onResponseError(context) {

pages/posts/[domain].vue

@@ -15,7 +15,7 @@
   const router = useRouter()
   const route = useRoute()
   const config = useRuntimeConfig()
-  const { token: authToken } = useAuth()
+  const $authState = useState('auth-internal')
 
   const { toggle: toggleSearchMenu } = useSearchMenu()
   const userSettings = useUserSettings()
@@ -83,7 +83,7 @@
     if (options.pageParam) {
       return $fetch<IPostPage>(options.pageParam, {
         headers: {
-          Authorization: authToken.value
+          Authorization: $authState.value['_token.local'] ?? undefined
         },
 
         retry: false
@@ -111,7 +111,7 @@
       },
 
       headers: {
-        Authorization: authToken.value
+        Authorization: $authState.value['_token.local'] ?? undefined
       },
 
       retry: false
@@ -225,7 +225,7 @@
       },
 
       headers: {
-        Authorization: authToken.value
+        Authorization: $authState.value['_token.local'] ?? undefined
       },
 
       onResponseError(context) {

pages/premium/dashboard.vue

@@ -2,7 +2,7 @@
   import { ArrowLeftOnRectangleIcon } from '@heroicons/vue/24/solid'
   import { doesBrowserHaveOldVersionState } from '~/assets/js/BackupHelper'
 
-  const { data, signOut: _signOut } = useAuth()
+  const { user, logout: _signOut } = useAuth()
 
   const links = [
     {
@@ -37,9 +37,9 @@
     })
   }
 
-  function signOut() {
-    _signOut()
-    window.location.reload()
+  async function signOut() {
+    await _signOut()
+    // window.location.reload()
   }
 
   useSeoMeta({
@@ -78,7 +78,7 @@
           <span
             class="inline-flex items-center rounded-md bg-primary-400/10 px-2 py-1 text-sm font-medium text-primary-400 ring-1 ring-inset ring-primary-400/20"
           >
-            {{ data.email }}
+            {{ user.email }}
           </span>
         </p>
       </template>

pages/premium/index.vue

@@ -23,15 +23,6 @@
 
     description: 'Enhance your experience with additional features'
   })
-
-  definePageMeta({
-    middleware: 'auth',
-
-    auth: {
-      unauthenticatedOnly: true,
-      navigateAuthenticatedTo: '/premium/dashboard'
-    }
-  })
 </script>
 
 <template>