cobraprojects · cobraprojects · May 6, 2026 · May 6, 2026 · May 6, 2026 · May 6, 2026
diff --git a/apps/blog-next/app/auth-nav.tsx b/apps/blog-next/app/auth-nav.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useAuth } from '@holo-js/adapter-next/client'
+
+const linkStyle = {
+  color: '#cbd5e1',
+  textDecoration: 'none',
+} as const
+
+const logoutButtonStyle = {
+  background: 'transparent',
+  border: 0,
+  color: '#cbd5e1',
+  cursor: 'pointer',
+  font: 'inherit',
+  padding: 0,
+} as const
+
+export function AuthNav() {
+  const auth = useAuth()
+  const [isLoggingOut, setIsLoggingOut] = useState(false)
+  const displayName = auth.user?.name ?? auth.user?.email ?? 'Account'
+
+  async function logout() {
+    if (isLoggingOut) {
+      return
+    }
+
+    setIsLoggingOut(true)
+    try {
+      const response = await fetch('/api/logout', { method: 'POST' })
+      if (!response.ok) {
+        console.warn('Logout failed.', { status: response.status })
+        return
+      }
+
+      await auth.refreshUser()
+    } catch (error) {
+      console.warn('Logout failed.', error)
+    } finally {
+      setIsLoggingOut(false)
+    }
+  }
+
+  if (!auth.authenticated) {
+    return (
+      <>
+        <Link href="/login" style={linkStyle}>Login</Link>
+        <Link href="/register" style={linkStyle}>Register</Link>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <span style={{ color: '#e5eef8' }}>{displayName}</span>
+      <button type="button" disabled={isLoggingOut} onClick={logout} style={logoutButtonStyle}>Logout</button>
+    </>
+  )
+}
diff --git a/apps/blog-next/app/layout.tsx b/apps/blog-next/app/layout.tsx
@@ -1,24 +1,33 @@
 import type { ReactNode } from 'react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
+import { AuthProvider } from '@holo-js/adapter-next/client'
+import { auth } from '@holo-js/adapter-next/server'
+
+import { AuthNav } from './auth-nav'
 
 export const metadata: Metadata = {
   title: 'blog-next',
   description: 'A reference Holo blog built on Next.js',
 }
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+export const dynamic = 'force-dynamic'
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const currentAuth = await auth()
+
   return (
     <html lang="en">
       <body style={{ margin: 0, fontFamily: 'Inter, Arial, sans-serif', background: '#0b1020', color: '#e5eef8' }}>
         <div style={{ minHeight: '100vh' }}>
           <header style={{ borderBottom: '1px solid rgba(148, 163, 184, 0.2)', background: 'rgba(11, 16, 32, 0.92)' }}>
-            <nav style={{ maxWidth: '72rem', margin: '0 auto', display: 'flex', gap: '1rem', alignItems: 'center', padding: '1rem 1.5rem' }}>
+            <nav style={{ maxWidth: '72rem', margin: '0 auto', display: 'flex', gap: '1rem', alignItems: 'center', padding: '1rem 1.5rem', flexWrap: 'wrap' }}>
               <Link href="/" style={{ color: '#fff', textDecoration: 'none', fontWeight: 700 }}>blog-next</Link>
               <Link href="/posts" style={{ color: '#cbd5e1', textDecoration: 'none' }}>Posts</Link>
               <Link href="/admin" style={{ color: '#cbd5e1', textDecoration: 'none' }}>Admin</Link>
-              <Link href="/login" style={{ color: '#cbd5e1', textDecoration: 'none' }}>Login</Link>
-              <Link href="/register" style={{ color: '#cbd5e1', textDecoration: 'none' }}>Register</Link>
+              <AuthProvider initialUser={currentAuth.user}>
+                <AuthNav />
+              </AuthProvider>
             </nav>
           </header>
           <main style={{ maxWidth: '72rem', margin: '0 auto', padding: '2rem 1.5rem 4rem' }}>{children}</main>

diff --git a/apps/blog-next/tests/run.mjs b/apps/blog-next/tests/run.mjs
@@ -6,6 +6,7 @@ import { get } from 'node:http'
 import { createServer } from 'node:net'
 import { join } from 'node:path'
 import { pathToFileURL } from 'node:url'
+import { DEFAULT_SESSION_COOKIE_NAME } from '@holo-js/config'
 import { assertExampleAppAuthFlow } from '../../../tests/example-app-auth-flow.mjs'
 
 const cwd = process.cwd()
@@ -212,6 +213,7 @@ try {
     baseUrl: `http://localhost:${port}`,
     getOutput: () => capturedOutput,
     appName: 'blog-next',
+    sessionCookieName: DEFAULT_SESSION_COOKIE_NAME,
   })
 
   await writeFile(configPath, originalConfig.replace("name: env('APP_NAME', 'blog-next')", "name: env('APP_NAME', 'blog-next-updated')"))

diff --git a/apps/blog-nuxt/app.vue b/apps/blog-nuxt/app.vue
@@ -1,12 +1,29 @@
+<script setup lang="ts">
+const { authenticated, refreshUser, user } = await useAuth()
+const displayName = computed(() => user.value?.name ?? user.value?.email ?? 'Account')
+
+async function logout() {
+  await $fetch('/api/logout', { method: 'POST' })
+  await refreshUser()
+  await navigateTo('/')
+}
+</script>
+
 <template>
   <div class="shell">
     <header class="header">
       <nav class="nav">
         <NuxtLink to="/" class="brand">blog-nuxt</NuxtLink>
         <NuxtLink to="/posts">Posts</NuxtLink>
         <NuxtLink to="/admin">Admin</NuxtLink>
-        <NuxtLink to="/login">Login</NuxtLink>
-        <NuxtLink to="/register">Register</NuxtLink>
+        <template v-if="authenticated">
+          <span class="user-name">{{ displayName }}</span>
+          <button type="button" class="logout-button" @click="logout">Logout</button>
+        </template>
+        <template v-else>
+          <NuxtLink to="/login">Login</NuxtLink>
+          <NuxtLink to="/register">Register</NuxtLink>
+        </template>
       </nav>
     </header>
     <main class="content">
@@ -34,10 +51,23 @@
 .nav {
   display: flex;
   gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
 }
 .brand {
   font-weight: 700;
 }
+.user-name {
+  color: #e5eef8;
+}
+.logout-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #cbd5e1;
+  cursor: pointer;
+  font: inherit;
+}
 a {
   color: #cbd5e1;
   text-decoration: none;

diff --git a/apps/blog-nuxt/tests/run.mjs b/apps/blog-nuxt/tests/run.mjs
@@ -6,6 +6,7 @@ import { get } from 'node:http'
 import { createServer } from 'node:net'
 import { join } from 'node:path'
 import { pathToFileURL } from 'node:url'
+import { DEFAULT_SESSION_COOKIE_NAME } from '@holo-js/config'
 import { assertExampleAppAuthFlow } from '../../../tests/example-app-auth-flow.mjs'
 
 const cwd = process.cwd()
@@ -218,6 +219,7 @@ try {
     baseUrl: `http://localhost:${port}`,
     getOutput: () => capturedOutput,
     appName: 'blog-nuxt',
+    sessionCookieName: DEFAULT_SESSION_COOKIE_NAME,
   })
 
   await writeFile(configPath, originalConfig.replace("name: env('APP_NAME', 'blog-nuxt')", "name: env('APP_NAME', 'blog-nuxt-updated')"))

diff --git a/apps/blog-sveltekit/src/routes/+layout.server.ts b/apps/blog-sveltekit/src/routes/+layout.server.ts
@@ -0,0 +1,9 @@
+import { auth } from '@holo-js/adapter-sveltekit/server'
+
+export async function load() {
+  const currentAuth = await auth()
+
+  return {
+    auth: currentAuth,
+  }
+}
diff --git a/apps/blog-sveltekit/src/routes/+layout.svelte b/apps/blog-sveltekit/src/routes/+layout.svelte
@@ -1,15 +1,55 @@
+<script lang="ts">
+  import { invalidateAll } from '$app/navigation'
+  import { untrack } from 'svelte'
+  import { useAuth } from '@holo-js/adapter-sveltekit/client'
+  import type { LayoutProps } from './$types'
+
+  let { data, children }: LayoutProps = $props()
+  let isLoggingOut = $state(false)
+
+  const auth = useAuth({ initialUser: untrack(() => data?.auth?.user ?? null) })
+  const displayName = $derived(auth.user?.name ?? auth.user?.email ?? 'Account')
+
+  async function logout() {
+    if (isLoggingOut) {
+      return
+    }
+
+    isLoggingOut = true
+    try {
+      const response = await fetch('/api/logout', { method: 'POST' })
+      if (!response.ok) {
+        console.warn('Logout failed.', { status: response.status })
+        return
+      }
+
+      await auth.refreshUser()
+      await invalidateAll()
+    } catch (error) {
+      console.warn('Logout failed.', error)
+    } finally {
+      isLoggingOut = false
+    }
+  }
+</script>
+
 <div class="shell">
   <header class="header">
     <nav class="nav">
       <a href="/" class="brand">blog-sveltekit</a>
       <a href="/posts">Posts</a>
       <a href="/admin">Admin</a>
-      <a href="/login">Login</a>
-      <a href="/register">Register</a>
+      {#if auth.authenticated}
+        <span class="user-name">{displayName}</span>
+        <button type="button" class="logout-button" disabled={isLoggingOut} aria-busy={isLoggingOut} onclick={logout}>Logout</button>
+      {:else}
+        <a href="/login">Login</a>
+        <a href="/register">Register</a>
+      {/if}
     </nav>
   </header>
   <main class="content">
-    <slot />
+    {@render children()}
   </main>
 </div>
 
@@ -32,10 +72,28 @@
   .nav {
     display: flex;
     gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
   }
   .brand {
     font-weight: 700;
   }
+  .user-name {
+    color: #e5eef8;
+  }
+  .logout-button {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: #cbd5e1;
+    cursor: pointer;
+    font: inherit;
+  }
+  .logout-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
   a {
     color: #cbd5e1;
     text-decoration: none;

diff --git a/apps/blog-sveltekit/tests/run.mjs b/apps/blog-sveltekit/tests/run.mjs
@@ -6,6 +6,7 @@ import { get } from 'node:http'
 import { createServer } from 'node:net'
 import { join } from 'node:path'
 import { pathToFileURL } from 'node:url'
+import { DEFAULT_SESSION_COOKIE_NAME } from '@holo-js/config'
 import { assertExampleAppAuthFlow } from '../../../tests/example-app-auth-flow.mjs'
 
 const cwd = process.cwd()
@@ -267,6 +268,7 @@ try {
     baseUrl: devUrl,
     getOutput: () => capturedOutput,
     appName: 'blog-sveltekit',
+    sessionCookieName: DEFAULT_SESSION_COOKIE_NAME,
   })
 
   await writeFile(configPath, originalConfig.replace("name: env('APP_NAME', 'blog-sveltekit')", "name: env('APP_NAME', 'blog-sveltekit-updated')"))