fix(demo): upgrade to 1.0.0

demo/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const client = useSupabaseAuthClient()
+const client = useSupabaseClient()
 const user = useSupabaseUser()
 const colorMode = useColorMode()
 

demo/nuxt.config.ts

@@ -7,10 +7,21 @@ export default defineNuxtConfig({
     // https://github.com/nuxt-modules/color-mode
     '@nuxtjs/color-mode'
   ],
+  runtimeConfig: {
+    public: {
+      baseUrl: process.env.BASE_URL || 'http://localhost:3000'
+    },
+  },
   ui: {
     colors: {
       primary: 'green'
     },
     icons: ['mdi', 'heroicons', 'heroicons-outline']
+  },
+  supabase: {
+    redirectOptions: {
+      login: '/',
+      callback: '/confirm'
+    },
   }
 })

demo/package.json

@@ -10,16 +10,16 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@iconify-json/heroicons": "^1.1.10",
+    "@iconify-json/heroicons": "^1.1.11",
     "@iconify-json/heroicons-outline": "^1.1.6",
-    "@iconify-json/mdi": "^1.1.52",
+    "@iconify-json/mdi": "^1.1.53",
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxthq/ui": "^1.2.10",
-    "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/supabase": "^0.3.6-0",
-    "eslint": "^8.41.0",
-    "nuxt": "^3.5.2",
-    "typescript": "^5.1.3"
+    "@nuxtjs/color-mode": "^3.3.0",
+    "@nuxtjs/supabase": "^1.0.0-0",
+    "eslint": "^8.46.0",
+    "nuxt": "^3.6.5",
+    "typescript": "^5.1.6"
   },
   "resolutions": {
     "consola": "^3.0.0"

demo/pages/confirm.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const user = useSupabaseUser()
+
+watch(user, () => {
+  if (user.value) {
+    return navigateTo('/tasks')
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div>
+    <p class="u-text-black">
+      Redirecting...
+    </p>
+  </div>
+</template>

demo/pages/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 const user = useSupabaseUser()
-const { auth } = useSupabaseAuthClient()
+const { auth } = useSupabaseClient()
+
+const redirectTo = `${useRuntimeConfig().public.baseUrl}/confirm`
 
 watchEffect(() => {
   if (user.value) {
@@ -21,7 +23,7 @@ watchEffect(() => {
         block
         label="Github"
         variant="black"
-        @click="auth.signInWithOAuth({ provider: 'github' })"
+        @click="auth.signInWithOAuth({ provider: 'github', options: { redirectTo } })"
       />
     </LoginCard>
   </div>

demo/pages/tasks.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { Database } from '~~/types/database.types'
 
-definePageMeta({
-  middleware: 'auth'
-})
-
 const client = useSupabaseClient<Database>()
 const user = useSupabaseUser()