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,48 @@
+'use client'
+
+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 displayName = auth.user?.name ?? auth.user?.email ?? 'Account'
+
+  async function logout() {
+    const response = await fetch('/api/logout', { method: 'POST' })
+    if (!response.ok) {
+      return
+    }
+
+    await auth.refreshUser()
+  }
+
+  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" 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-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-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,42 @@
+<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()
+
+  const auth = useAuth({ initialUser: untrack(() => data.auth.user) })
+  const displayName = $derived(auth.user?.name ?? auth.user?.email ?? 'Account')
+
+  async function logout() {
+    const response = await fetch('/api/logout', { method: 'POST' })
+    if (!response.ok) {
+      return
+    }
+
+    await auth.refreshUser()
+    await invalidateAll()
+  }
+</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" 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 +59,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;