From e5817b13922f4308ec6a996bf37022896d1bbbd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Mon, 5 Feb 2024 17:41:25 +0100
Subject: [PATCH] chore: leverage useHub().auth

---
 _demo/middleware/auth.ts |  4 ++--
 _demo/pages/index.vue    | 30 ++++--------------------------
 _demo/pages/todos.vue    |  4 ++--
 composables/hub.ts       | 12 +++++++++++-
 4 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/_demo/middleware/auth.ts b/_demo/middleware/auth.ts
index 16741a2b..96512331 100644
--- a/_demo/middleware/auth.ts
+++ b/_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('/')
   }
 })
diff --git a/_demo/pages/index.vue b/_demo/pages/index.vue
index f566424e..12a03d36 100644
--- a/_demo/pages/index.vue
+++ b/_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">
diff --git a/_demo/pages/todos.vue b/_demo/pages/todos.vue
index ecc89124..51be64ef 100644
--- a/_demo/pages/todos.vue
+++ b/_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>
 
diff --git a/composables/hub.ts b/composables/hub.ts
index 6d3991bc..1985910b 100644
--- a/composables/hub.ts
+++ b/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()
+      }
+    }
   }
 }