Horrible redirect kludge to fix login flow, tidy up and readme

README.md

@@ -1,4 +1,4 @@
-# Nuxt 3 Minimal Starter
+# Nuxt 3 Minimal Starter + Supabase + OAuth
 
 Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
@@ -41,8 +41,8 @@ npm run preview
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
 
-# GENESIS STEPS
+# Steps to Create
-This is what I did to create the boilerplate, it is here for your interest and for my memory, you don't need to repeat these.
+This is what I did to create the project including all the extra fiddly stuff.  Putting this here so I don't forget.
 
 Follow instructions from here https://nuxt.com/docs/getting-started/installation
 
@@ -69,3 +69,5 @@ modules: ['@nuxtjs/supabase']
 ```
 
 Follow these instructions to add google oath https://supabase.com/docs/guides/auth/social-login/auth-google
+
+Then I frigged around trying to get the nuxt-supabase module to work properly for the oauth flow.  It's a bit of a mess TBH.

middleware/auth.ts

@@ -1,13 +1,6 @@
 export default defineNuxtRouteMiddleware((to) => {
   const user = useSupabaseUser();
   if(!user.value && to.path === '/dashboard'){
-    console.log('auth - navigating to login (from dashboard)')
     navigateTo('login');
-  } else if(user.value && to.path === '/') {
+  } 
-    console.log('auth - navigating to dashboard (from root)')
-    navigateTo('dashboard');
-  } else if(user.value && to.path === '/login') {
-    console.log('auth - navigating to dashboard (from login)')
-    navigateTo('dashboard');
-  }
 })

pages/dashboard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-definePageMeta({
+  definePageMeta({
-  middleware: ['auth'],
+    middleware: ['auth'],
-  layout: "authenticated",
+    layout: "authenticated",
-});
+  });
 </script>
 <template>
   <div>

pages/index.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-definePageMeta({
+  definePageMeta({
-  middleware: ['auth'],
+    middleware: ['auth'],
-});
+  });
+
+  //horrible horrible kludge from https://github.com/nuxt-modules/supabase/issues/28#issuecomment-1353070523
+  const user = useSupabaseUser();
+  watchEffect(async () => {
+    if (user.value) await navigateTo("dashboard");
+  });  
 </script>
 <template>
   <div>

pages/login.vue

@@ -8,8 +8,9 @@
   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 login handshake completing and then the handshake lands on the index page and ignores the middleware.
+    // 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>