chore: leverage useHub().auth

Author: atinux

_demo/middleware/auth.ts

@@ -1,7 +1,7 @@
 export default defineNuxtRouteMiddleware(() => {
-  const { loggedIn } = useUserSession()
+  const { user } = useHub().auth
 
-  if (!loggedIn.value) {
+  if (!user.value) {
     return navigateTo('/')
   }
 })

_demo/pages/index.vue

@@ -1,17 +1,5 @@
 <script setup lang="ts">
-const host = useRequestURL().host
-let hosting = { url: 'https://pages.cloudflare.com', title: 'CloudFlare Pages' }
-if (host.includes('.netlify.app')) {
-  hosting = { url: 'https://www.netlify.com/products/#netlify-edge-functions', title: 'Netlify Edge Functions' }
-} else if (host.includes('.vercel.app')) {
-  hosting = { url: 'https://vercel.com/features/edge-functions', title: 'Vercel Edge Functions' }
-} else if (host.includes('.lagon.dev')) {
-  hosting = { url: 'https://lagon.app', title: 'Lagon' }
-} else if (host.includes('.deno.dev')) {
-  hosting = { url: 'https://deno.com/deploy', title: 'Deno Deploy' }
-}
-const isD1 = host.includes('nuxt-todos-edge.pages.dev')
-const { loggedIn } = useUserSession()
+const { auth } = useHub()
 </script>
 
 <template>
@@ -21,8 +9,8 @@ const { loggedIn } = useUserSession()
         Todo List
       </h3>
       <UButton
-        v-if="!loggedIn"
-        to="/api/auth/providers/github"
+        v-if="!auth.user"
+        @click="auth.loginWith('github')"
         icon="i-simple-icons-github"
         label="Login with GitHub"
         color="black"
@@ -50,17 +38,7 @@ const { loggedIn } = useUserSession()
       </div>
     </template>
     <p class="font-medium">
-      Welcome to Nuxt Todos Edge.
-    </p>
-    <p>
-      A <a href="https://nuxt.com" target="_blank" class="text-primary-500" rel="noopener">Nuxt</a> demo hosted on <a :href="hosting.url" target="_blank" rel="noopener" class="text-primary-500">{{ hosting.title }}</a> with server-side rendering on the edge and using <NuxtLink
-        :href="isD1 ? 'https://developers.cloudflare.com/d1/' : 'https://turso.tech'"
-        target="_blank"
-        rel="noopener"
-        class="text-primary-500"
-      >
-        {{ isD1 ? 'D1' : 'Turso' }} database
-      </NuxtLink>.
+      Welcome to NuxtHub Demo
     </p>
     <hr class="dark:border-gray-700">
     <p class="text-sm text-gray-700 dark:text-gray-300 italic">

_demo/pages/todos.vue

@@ -7,7 +7,7 @@ const newTodo = ref('')
 const newTodoInput = ref(null)
 
 const toast = useToast()
-const { user, clear } = useUserSession()
+const { user, logout } = useHub().auth
 const { data: todos } = await useFetch('/api/todos')
 
 async function addTodo () {
@@ -55,7 +55,7 @@ async function deleteTodo (todo) {
 const items = [[{
   label: 'Logout',
   icon: 'i-heroicons-arrow-left-on-rectangle',
-  click: clear
+  click: logout
 }]]
 </script>
 

composables/hub.ts

@@ -1,7 +1,17 @@
 export function useHub() {
   const config = useState<HubConfig['public']>('hub_config')
+  const session = useUserSession()
 
   return {
-    config
+    config,
+    auth: {
+      ...session,
+      loginWith(provider: string) {
+        window.location.href = `/api/auth/providers/${provider}`
+      },
+      logout() {
+        return session.clear()
+      }
+    }
   }
 }