Simplify everything to match supabase example and also downgrade supabase

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <AppHeader />
+    <NuxtPage />
+    <AppFooter />
+  </div>
+</template>

components/AppFooter.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h3>Nuxt 3 Boilerplate - AppFooter</h3>
+  </div>
+</template>

components/AppHeader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+console.log('AppHeader.vuew - setup script');
+const supabase = useSupabaseClient();
+const user = useSupabaseUser();
+
+async function signout() {
+  await supabase.auth.signOut();
+  navigateTo('/', {replace: true});
+}
+</script>
+
+<template>
+  <div>
+    <h3>Nuxt 3 Boilerplate - AppHeader</h3>
+    <div v-if="user">logged in as: {{ user.email }}: <button @click="signout()">Sign Out</button></div>
+    <div v-if="!user">Not Logged in</div>
+    <hr>
+  </div>
+</template>

layouts/authenticated.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-const supabase = useSupabaseAuthClient();
-const user = await useSupabaseUser();
-const email = (user.value)?user.value.email:null;
-
-async function signout() {
-  const { error } = await supabase.auth.signOut()
-  navigateTo('/');
-}
-</script>
-
-<template>
-  <div>
-    <h3>Authenticated Header</h3>
-    <div v-if="email">logged in as: {{ email }}: <button @click="signout()">Sign Out</button></div>
-    <div v-if="!email">Not Logged in</div>
-    <hr>
-    <slot />
-    <hr>
-    <h4>Authenticated Footer</h4>
-  </div>
-</template>

layouts/default.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>
-    <h3>Default Header</h3>
-    <hr>
-    <slot />
-    <hr>
-    <h4>Default Footer</h4>
-  </div>
-</template>

middleware/auth.ts

@@ -1,6 +1,7 @@
-export default defineNuxtRouteMiddleware((to) => {
+export default defineNuxtRouteMiddleware(() => {
-  const user = useSupabaseUser();
+  const user = useSupabaseUser()
-  if(!user.value && to.path === '/dashboard'){
+
-    navigateTo('login');
+  if (!user.value) {
-  } 
+    return navigateTo('/')
+  }
 })

package.json

@@ -8,9 +8,9 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "3.0.0"
+    "nuxt": "^3.1.1"
   },
   "dependencies": {
-    "@nuxtjs/supabase": "^0.3.0"
+    "@nuxtjs/supabase": "^0.2.0-7"
   }
 }

pages/dashboard.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+  const user = await useSupabaseUser();
   definePageMeta({
     middleware: ['auth'],
-    layout: "authenticated",
   });
 </script>
 <template>
   <div>
-    <h3>Dashboard</h3>
+    <h3>{{ user?.user_metadata.full_name }}'s Dashboard</h3>
+    <div>Stuff</div>
   </div>
 </template>

pages/index.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-  definePageMeta({
+  const user = useSupabaseUser()
-    middleware: ['auth'],
+  const supabase = useSupabaseClient();
-  });
+  watchEffect(() => {
-
+    if (user.value) {
-  //horrible horrible kludge from https://github.com/nuxt-modules/supabase/issues/28#issuecomment-1353070523
+      navigateTo('/dashboard', {replace: true})
-  const user = useSupabaseUser();
+    }
-  watchEffect(async () => {
+  })
-    if (user.value) await navigateTo("dashboard");
-  });  
 </script>
 <template>
   <div>
     <h3>Index</h3>
-    <NuxtLink to="/login">Login</NuxtLink>
+    <button @click="supabase.auth.signInWithOAuth({provider: 'google'})">Sign In with Google</button>
   </div>
 </template>

pages/login.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-  definePageMeta({
-    middleware: ['auth'],
-  });
-
-  const supabase = useSupabaseAuthClient();
-
-  async function signInWithGoogle() {
-    const { data, error } = await supabase.auth.signInWithOAuth({
-      provider: 'google',
-      // options: { redirectTo: 'dashboard'} // the redirectTo option doesn't work
-    })
-    // navigateTo('dashboard'); // This doesn't work, it navigates prior to the oauth handshake completing and then the handshake lands on the index page and ignores the middleware.
-  }
-</script>
-
-<template>
-  <div>
-    Login
-    <button @click="signInWithGoogle()">Sign In with Google</button>
-  </div>
-</template>