add token based authantication

apps/blog-next/app/api-token-posts/page.tsx

@@ -0,0 +1,7 @@
+import { TokenPostsClient } from './token-posts-client'
+
+export const dynamic = 'force-dynamic'
+
+export default function ApiTokenPostsPage() {
+  return <TokenPostsClient />
+}

apps/blog-next/app/api-token-posts/token-posts-client.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { type FormEvent, useState } from 'react'
+
+type JsonResult = {
+  readonly status: number
+  readonly payload: unknown
+}
+
+function isRecord(value: unknown): value is Readonly<Record<string, unknown>> {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+function getStringField(value: unknown, field: string): string {
+  if (!isRecord(value)) {
+    return ''
+  }
+
+  const fieldValue = value[field]
+  return typeof fieldValue === 'string' ? fieldValue : ''
+}
+
+async function readJson(response: Response): Promise<unknown> {
+  try {
+    return await response.json()
+  } catch {
+    return {
+      ok: false,
+      message: 'Response was not valid JSON.',
+    }
+  }
+}
+
+export function TokenPostsClient() {
+  const [tokenResult, setTokenResult] = useState<JsonResult | null>(null)
+  const [postsResult, setPostsResult] = useState<JsonResult | null>(null)
+  const [creatingToken, setCreatingToken] = useState(false)
+  const [fetchingPosts, setFetchingPosts] = useState(false)
+  const generatedToken = getStringField(tokenResult?.payload, 'token')
+
+  async function createToken(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setCreatingToken(true)
+    setPostsResult(null)
+
+    try {
+      const response = await fetch('/api/v1/tokens', {
+        method: 'POST',
+        body: new FormData(event.currentTarget),
+      })
+
+      setTokenResult({
+        status: response.status,
+        payload: await readJson(response),
+      })
+    } finally {
+      setCreatingToken(false)
+    }
+  }
+
+  async function fetchPosts(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setFetchingPosts(true)
+
+    const formData = new FormData(event.currentTarget)
+    const token = String(formData.get('token') ?? '').trim()
+
+    try {
+      const response = await fetch('/api/v1/posts', {
+        headers: token ? { authorization: `Bearer ${token}` } : undefined,
+      })
+
+      setPostsResult({
+        status: response.status,
+        payload: await readJson(response),
+      })
+    } finally {
+      setFetchingPosts(false)
+    }
+  }
+
+  return (
+    <section style={{ display: 'grid', gap: '1rem', maxWidth: '44rem' }}>
+      <div>
+        <h1 style={{ margin: '0 0 0.5rem 0' }}>API token posts</h1>
+        <p style={{ margin: 0, color: '#94a3b8' }}>Generate a bearer token from credentials, then use it to fetch protected posts.</p>
+      </div>
+
+      <form onSubmit={createToken} style={{ display: 'grid', gap: '0.9rem', padding: '1.25rem', borderRadius: '1rem', background: '#111827', border: '1px solid rgba(148, 163, 184, 0.16)' }}>
+        <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Create token</h2>
+        <label style={{ display: 'grid', gap: '0.35rem' }}>
+          <span>Email</span>
+          <input name="email" type="email" placeholder="editor@example.com" required />
+        </label>
+        <label style={{ display: 'grid', gap: '0.35rem' }}>
+          <span>Password</span>
+          <input name="password" type="password" placeholder="secret" required />
+        </label>
+        <button type="submit" disabled={creatingToken}>{creatingToken ? 'Creating...' : 'Create token'}</button>
+      </form>
+
+      {tokenResult ? (
+        <section style={{ display: 'grid', gap: '0.65rem', padding: '1.25rem', borderRadius: '1rem', background: '#111827', border: '1px solid rgba(148, 163, 184, 0.16)' }}>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Token response ({tokenResult.status})</h2>
+          {generatedToken ? (
+            <textarea readOnly value={generatedToken} rows={3} style={{ width: '100%', boxSizing: 'border-box' }} />
+          ) : null}
+          <pre style={{ margin: 0, overflowX: 'auto' }}>{JSON.stringify(tokenResult.payload, null, 2)}</pre>
+        </section>
+      ) : null}
+
+      <form onSubmit={fetchPosts} style={{ display: 'grid', gap: '0.9rem', padding: '1.25rem', borderRadius: '1rem', background: '#111827', border: '1px solid rgba(148, 163, 184, 0.16)' }}>
+        <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Fetch posts</h2>
+        <label style={{ display: 'grid', gap: '0.35rem' }}>
+          <span>Bearer token</span>
+          <textarea name="token" rows={3} required />
+        </label>
+        <button type="submit" disabled={fetchingPosts}>{fetchingPosts ? 'Fetching...' : 'Fetch posts'}</button>
+      </form>
+
+      {postsResult ? (
+        <section style={{ display: 'grid', gap: '0.65rem', padding: '1.25rem', borderRadius: '1rem', background: '#111827', border: '1px solid rgba(148, 163, 184, 0.16)' }}>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Posts response ({postsResult.status})</h2>
+          <pre style={{ margin: 0, overflowX: 'auto' }}>{JSON.stringify(postsResult.payload, null, 2)}</pre>
+        </section>
+      ) : null}
+    </section>
+  )
+}

apps/blog-next/app/api/v1/posts/route.ts

@@ -0,0 +1,26 @@
+import auth from '@holo-js/auth'
+
+import Post from '@/server/models/Post'
+
+export async function GET() {
+  const currentUser = await auth.guard('api').user()
+  const userId = currentUser?.id
+
+  if (typeof userId === 'undefined') {
+    return Response.json({
+      ok: false,
+      message: 'Unauthenticated.',
+    }, { status: 401 })
+  }
+
+  const posts = await Post
+    .with('category', 'tags')
+    .where('user_id', Number(userId))
+    .orderBy('published_at', 'desc')
+    .get()
+
+  return Response.json({
+    ok: true,
+    posts,
+  })
+}

apps/blog-next/app/api/v1/tokens/route.ts

@@ -0,0 +1,42 @@
+import auth, { verifyPassword } from '@holo-js/auth'
+
+import User from '@/server/models/User'
+
+export async function POST(request: Request) {
+  const formData = await request.formData()
+  const email = String(formData.get('email') ?? '').trim()
+  const password = String(formData.get('password') ?? '')
+
+  if (!email || !password) {
+    return Response.json({
+      ok: false,
+      message: 'Email and password are required.',
+    }, { status: 422 })
+  }
+
+  const currentUser = await User.where('email', email).first()
+  const passwordHash = currentUser?.get('password')
+  const passwordMatches = typeof passwordHash === 'string'
+    ? await verifyPassword(password, passwordHash)
+    : false
+
+  if (!currentUser || !passwordMatches) {
+    return Response.json({
+      ok: false,
+      message: 'Invalid credentials.',
+    }, { status: 401 })
+  }
+
+  const token = await auth.tokens.create(currentUser, {
+    guard: 'api',
+    name: 'browser-posts-api',
+    abilities: ['posts.read'],
+  })
+
+  return Response.json({
+    ok: true,
+    token: token.plainTextToken,
+    tokenId: token.id,
+    abilities: token.abilities,
+  })
+}

apps/blog-next/app/layout.tsx

@@ -24,6 +24,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
             <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="/api-token-posts" style={{ color: '#cbd5e1', textDecoration: 'none' }}>API Token</Link>
               <Link href="/admin" style={{ color: '#cbd5e1', textDecoration: 'none' }}>Admin</Link>
               <Link href="/super-admin" style={{ color: '#cbd5e1', textDecoration: 'none' }}>Super Admin</Link>
               <AuthProvider initialProvider={currentAuth.provider} initialUser={currentAuth.user}>

apps/blog-next/config/auth.ts

@@ -14,6 +14,10 @@ export default defineAuthConfig({
       driver: 'session',
       provider: 'admins',
     },
+    api: {
+      driver: 'token',
+      provider: 'users',
+    },
   },
   providers: {
     users: {

apps/blog-next/tests/run.mjs

@@ -8,6 +8,7 @@ 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'
+import { assertExampleAppTokenAuthFlow } from '../../../tests/example-app-token-auth-flow.mjs'
 
 const cwd = process.cwd()
 const configPath = join(cwd, 'config/app.ts')
@@ -252,6 +253,10 @@ try {
     appName: 'blog-next',
     sessionCookieName: DEFAULT_SESSION_COOKIE_NAME,
   })
+  await assertExampleAppTokenAuthFlow({
+    baseUrl: `http://localhost:${port}`,
+    expectedTitle: 'Shipping a Real Holo Blog on Next',
+  })
 
   await writeFile(configPath, originalConfig.replace("name: env('APP_NAME', 'blog-next')", "name: env('APP_NAME', 'blog-next-updated')"))
   const updated = await waitForJson(healthUrl, payload => payload.app === 'blog-next-updated')

apps/blog-nuxt/app/app.vue

@@ -20,6 +20,7 @@ async function logout() {
       <nav class="nav">
         <NuxtLink to="/" class="brand">blog-nuxt</NuxtLink>
         <NuxtLink to="/posts">Posts</NuxtLink>
+        <NuxtLink to="/api-token-posts">API Token</NuxtLink>
         <NuxtLink to="/admin">Admin</NuxtLink>
         <NuxtLink to="/super-admin">Super Admin</NuxtLink>
         <template v-if="authenticated">