fix: bootstrap-gate auth before mount (krypto-kuns pattern); never call API unauthenticated

Root cause: the router-guard adapter let index.vue mount and call the API before
auth resolved, so auth.fetch returned a synthetic 401 (the banner) and the package's
redirect-loop guard could strand the user. Now use the core ZitadelAuth and gate in an
async plugin (Nuxt awaits it before mount), mirroring the working krypto-kuns app.

app/pages/auth/callback.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-// The Zitadel client processes the OIDC redirect during init(); once authenticated,
-// move back to the app root.
-const { auth } = useAuth();
-watchEffect(() => {
-  if (!auth.isLoading.value && auth.isAuthenticated.value) {
-    navigateTo("/", { replace: true });
-  }
+// The auth plugin completes the OIDC code exchange during init() before mount.
+// This page just returns to the app root.
+onMounted(() => {
+  navigateTo("/", { replace: true });
 });
 </script>
 

app/pages/index.vue

@@ -86,15 +86,20 @@ async function addTask() {
   }
 }
 
-onMounted(refreshLists);
+onMounted(() => {
+  // The auth plugin gates before mount, so this is normally authenticated.
+  // Safety net: if not, drive login instead of calling the API (no 401 banner).
+  if (auth.isAuthenticated) refreshLists();
+  else auth.login();
+});
 </script>
 
 <template>
   <div class="app">
     <header class="topbar">
       <h1>Inbox</h1>
-      <div class="who" v-if="auth.user.value">
-        <span class="email">{{ auth.user.value.email || auth.user.value.name }}</span>
+      <div class="who" v-if="auth.user">
+        <span class="email">{{ auth.user.email || auth.user.name }}</span>
         <button class="link" @click="auth.logout()">Sign out</button>
       </div>
     </header>