Basic user details are pulled into the template now

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <NuxtLayout>
     <NuxtPage />
-  </main>
+  </NuxtLayout>   
 </template>

assets/main.scss

@@ -605,6 +605,20 @@ button.blue,
     }
 }
 
+button.clear,
+.button.clear {
+    border: 1px solid rgba($white, 0.3);
+    background-color: rgba($blue, 0.05);
+    color: $white;
+    outline-color: rgba($white, 0.4);
+
+    &:hover {
+        border: 1px solid rgba($white, 1);
+        background-color: rgba($blue, 0.1);
+        outline: 4px solid rgba($white, 0.2);
+    }
+}
+
 button.green,
 .button.green {
     border: 1px solid rgba($mint-dark, 0.3);

components/Navigation.vue

@@ -0,0 +1,41 @@
+<template>
+  <nav class="max-width lg">
+    <section>
+      <span class="logo">Supabase Auth Example</span>
+    </section>
+    <section>
+      <button type="button" class="clear" @click="signOut">Log Out</button>
+    </section>
+  </nav>
+</template>
+
+<script setup>
+
+const supabase = useSupabaseClient()
+const user = useSupabaseUser()
+
+const signOut = async () => {
+  const { error } = await supabase.auth.signOut()
+  if (error) console.log(error)
+  navigateTo('/login')
+}
+
+</script>
+
+<style scoped lang="scss">
+
+@use 'assets/variables' as *;
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-sm $spacing-md;
+  background: rgba($brand, 1);
+  border-radius: $br-xxl;
+  color: $white;
+  position: sticky;
+  top: $spacing-md;
+}
+
+</style>

layouts/auth.vue

@@ -0,0 +1,9 @@
+<template>
+  <main>
+    <slot />
+  </main>
+</template>
+
+<script setup>
+
+</script>

layouts/default.vue

@@ -0,0 +1,14 @@
+<template>
+  <main>
+    <Navigation />
+    <main>
+      <slot />
+    </main>
+  </main>
+</template>
+
+<script setup>
+
+import Navigation from '~/components/Navigation.vue'
+
+</script>

middleware/auth.js

@@ -9,7 +9,7 @@ export default defineNuxtRouteMiddleware(() => {
   if (magiclink === true) {
     return navigateTo("/confirm");
   } else if (user.value) {
-    return navigateTo("/secure")
+    return navigateTo("/app")
   }
 
 })

pages/app/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <main class="max-width lg">
+    <section id="UserDetails">
+      <h1>Hello!</h1>
+      <p>You are logged in with the email address, <i>{{ user.email }}</i>.</p>
+      <table>
+        <tr v-if="user.user_metadata.full_name">
+          <td>Display Name:</td>
+          <td>{{ user.user_metadata.full_name }}</td>
+        </tr>
+        <tr v-if="user.app_metadata.provider == 'github'">
+          <td>Github Avatar:</td>
+          <td><img :src="user.user_metadata.avatar_url" class="github-avatar" alt="Avatar" /></td>
+        </tr>
+      </table>
+    </section>
+  </main>
+</template>
+
+<script setup>
+
+definePageMeta({
+  layout: 'default'
+});
+
+const user = useSupabaseUser()
+
+</script>
+
+<style scoped lang="scss">
+
+@use 'assets/variables' as *;
+
+#UserDetails {
+  padding: $spacing-lg;
+
+  .github-avatar {
+    width: 72px;
+    border-radius: $br-md;
+    border: $border;
+  }
+}
+
+
+</style>

pages/confirm/index.vue

@@ -15,7 +15,7 @@ watch(user, () => {
       // Clear cookie
       useCookie(`${cookieName}-redirect-path`).value = null
       // Redirect to path
-      return navigateTo(redirectPath || '/secure'); 
+      return navigateTo(redirectPath || '/app'); 
   }
 }, { immediate: true })
 </script>

pages/login/index.vue

@@ -43,8 +43,11 @@
 
 definePageMeta({
   middleware: ["auth"],
+  layout: "auth",
 })
 
+
+
 const loading = ref(false);
 const notification = ref('');
 const errorbox = ref('');