npx nuxt module add auth-utils

NUXT_SESSION_PASSWORD=a-random-password-with-at-least-32-characters

import { z } from 'zod'

const bodySchema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export default defineEventHandler(async (event) => {
  const { email, password } = await readValidatedBody(event, bodySchema.parse)

  if (email === 'admin@admin.com' && password === 'iamtheadmin') {
    // クッキーにユーザーセッションを設定
    // このサーバーユーティリティはauth-utilsモジュールによって自動インポートされます
    await setUserSession(event, {
      user: {
        name: 'John Doe'
      }
    })
    return {}
  }
  throw createError({
    statusCode: 401,
    message: 'Bad credentials'
  })
})

<script setup lang="ts">
const { loggedIn, user, fetch: refreshSession } = useUserSession()
const credentials = reactive({
  email: '',
  password: '',
})
async function login() {
  $fetch('/api/login', {
    method: 'POST',
    body: credentials
  })
  .then(async () => {
    // クライアントサイドでセッションを更新し、ホームページにリダイレクト
    await refreshSession()
    await navigateTo('/')
  })
  .catch(() => alert('Bad credentials'))
}
</script>

<template>
  <form @submit.prevent="login">
    <input v-model="credentials.email" type="email" placeholder="Email" />
    <input v-model="credentials.password" type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</template>

export default defineEventHandler(async (event) => {
  // ユーザーがログインしていることを確認
  // 有効なユーザーセッションからのリクエストでない場合、401エラーをスローします
  const { user } = await requireUserSession(event)

  // TODO: ユーザーに基づいていくつかの統計を取得

  return {}
});

export default defineNuxtRouteMiddleware(() => {
  const { loggedIn } = useUserSession()

  // 認証されていない場合、ユーザーをログイン画面にリダイレクト
  if (!loggedIn.value) {
    return navigateTo('/login')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: ['authenticated'],
})
  
const { user, clear: clearSession } = useUserSession()

async function logout() {
  await clearSession()
  await navigateTo('/login')
}
</script>

<template>
  <div>
    <h1>Welcome {{ user.name }}</h1>
    <button @click="logout">Logout</button>
  </div>
</template>