Svelte 5 Auth Basic（Cookie/Session 認証）

Svelte 5 と SvelteKit 2 で実装する Cookie/Session ベースの認証システムのサンプルです。 Form Actions・hooks.server.ts・Prisma・bcryptjs を組み合わせ、HTTPOnly Cookie によるセキュアなセッション管理を学べます。

本リポジトリは TypeScriptで学ぶ Svelte 5/SvelteKit 学習ガイド の教材サンプルです。 コードの解説は学習サイト側に集約されています。本リポジトリは「動くコード」と「解説との対応表」を提供します。

• 📖 学習サイト記事: Cookie/Sessionベース認証システム
• 🌐 デモサイト: https://svelte5-auth-basic.vercel.app/
• 🗺️ 対応表（記事 ⇔ ファイル）: docs/learning-map.md
• 📘 実装ガイド: docs/IMPLEMENTATION_GUIDE.md
• 🚀 Vercel デプロイガイド: docs/VERCEL_DEPLOYMENT.md

このサンプルの位置付け

SvelteKit の標準機能のみで認証システムを構築する最もベーシックなパターンです。外部認証ライブラリ（Lucia、Auth.js 等）を使わず、Form Actions + hooks + DB セッションだけで成立する構造を学べます。

学べること

• ✅ hooks.server.ts による全リクエストのセッション検証
• ✅ event.locals を介した認証情報のアプリ全体への共有
• ✅ Form Actions による登録・ログインの処理（Progressive Enhancement）
• ✅ HTTPOnly / Secure / SameSite 属性による安全な Cookie 設定
• ✅ bcryptjs によるパスワードハッシュ化（ソルト付き）
• ✅ サーバーサイドセッション のデータベース管理（即座の無効化が可能）
• ✅ 認証済み判定 を Load 関数で行い未認証を redirect
• ✅ Prisma による型安全な DB 操作（SQLite 開発・PostgreSQL 本番）
• ✅ Vercel へのデプロイ構成（adapter-vercel）

学べないこと（＝他サンプルの担当範囲）

技術スタック

データベースは開発時に SQLite、本番は PostgreSQL（Neon / Vercel Postgres など）を推奨。

セットアップ

# リポジトリを取得
git clone https://github.com/shuji-bonji/svelte5-auth-basic.git
cd svelte5-auth-basic

# 依存関係のインストール
# （postinstall で prisma generate が SQLite schema で実行される）
npm install

# 環境変数を用意
cp .env.example .env
# .env を編集（DATABASE_URL、JWT_SECRET など）

# 開発用 DB にスキーマを反映
npm run db:push

# 開発サーバー起動
npm run dev

# 型チェック
npm run check

Node.js 20.x LTS 以上を推奨します。

本番ビルドをローカルで preview する

npm run build は本番用の PostgreSQL スキーマで Prisma クライアントを生成します。 そのため、単純に npm run build && npm run preview するとローカルの SQLite 用 DATABASE_URL（file:./dev.db）で起動時エラーになります。

ローカル DB（SQLite）でそのまま preview したい場合は build:local を使います。

# SQLite schema で Prisma クライアントを生成してからビルド
npm run build:local

# ビルド成果物を preview
npm run preview

本番相当の動作確認をしたい場合は、.env の DATABASE_URL を PostgreSQL のもの（Neon / Vercel Postgres 等）に差し替えたうえで npm run build && npm run preview を実行してください。

プロジェクト構成

svelte5-auth-basic/
├── prisma/
│   ├── schema.prisma              # 開発用スキーマ（SQLite）
│   └── schema.production.prisma   # 本番用スキーマ（PostgreSQL）
├── src/
│   ├── app.d.ts                   # 型定義（App.Locals.user）
│   ├── hooks.server.ts            # 全リクエストのセッション検証
│   ├── lib/
│   │   ├── server/
│   │   │   └── auth.ts            # 認証ユーティリティ（Prisma + bcrypt）
│   │   └── components/
│   │       ├── Navigation.svelte
│   │       └── Footer.svelte
│   └── routes/
│       ├── +layout.svelte         # 全体レイアウト
│       ├── +layout.server.ts      # 認証状態を子ページへ流す
│       ├── +layout.ts
│       ├── +page.svelte           # ホームページ
│       ├── +error.svelte
│       ├── about/+page.svelte
│       ├── login/                 # ログイン
│       │   ├── +page.svelte
│       │   ├── +page.server.ts    # Form Action
│       │   └── +page.ts
│       ├── register/              # ユーザー登録
│       │   ├── +page.svelte
│       │   ├── +page.server.ts    # Form Action
│       │   └── +page.ts
│       ├── logout/
│       │   └── +server.ts         # POST でログアウト
│       └── dashboard/              # 保護ページ
│           ├── +page.svelte
│           ├── +page.server.ts    # 未認証を redirect
│           └── +page.ts
└── docs/
    ├── IMPLEMENTATION_GUIDE.md
    ├── VERCEL_DEPLOYMENT.md
    └── learning-map.md             # 記事 ⇔ ファイル対応表

各ファイルが学習サイトのどの章に対応するかは docs/learning-map.md を参照してください。

データベース管理

初期化とリセット

# スキーマ適用
npm run db:push

# 本番スキーマ適用（.env.local の DATABASE_URL を利用）
npm run db:push:prod

# 本番の完全リセット（テーブル全削除 → 再作成）
npm run db:reset:prod

# Prisma Studio（ローカル）
npm run db:studio

スキーマ変更の流れ

1. prisma/schema.prisma を編集
2. npm run db:push でローカル DB に反映（自動で prisma generate も実行）
3. prisma/schema.production.prisma にも同じ変更を反映（本番用）

開発は SQLite、本番は PostgreSQL の二本立てのため、両スキーマの整合を保つこと。

デプロイ

Vercel（推奨）

# 初回のみ
npm i -g vercel
vercel

# 以後は main ブランチへの push で自動デプロイ
# （db:push:prod は deploy:prod スクリプトで自動実行）
npm run deploy:prod

必要な環境変数（Vercel ダッシュボードで設定）:

DATABASE_URL=postgresql://...  # Neon / Vercel Postgres / Supabase
JWT_SECRET=<ランダムな文字列>    # 本番は必ず変更すること

詳細は docs/VERCEL_DEPLOYMENT.md を参照。

GitHub Pages は非対応

Form Actions・hooks・DB 接続を含むため、静的ホスティング（GitHub Pages）では動作しません。 Vercel、Netlify、Cloudflare Pages（Functions 有効）、Node.js ホストなどサーバー機能が動く環境を使ってください。

学習の進め方（推奨）

1. svelte5-blog-example で SvelteKit の基礎を押さえる
2. 学習サイトの Cookie/Sessionベース認証システム を読む（シーケンス図でフローを理解）
3. docs/learning-map.md で記事の章と本リポジトリのファイルを突き合わせる
4. npm run dev で動かしながらコードを読む
5. docs/IMPLEMENTATION_GUIDE.md で実装のディテールを確認
6. 発展版として svelte5-auth-jwt へ

注意事項

これは 学習用のサンプル実装です。本番運用では以下の追加対策が推奨されます。

• ログイン試行回数のレート制限（ブルートフォース対策）
• 2 要素認証（TOTP / WebAuthn）
• パスワードリセット（メール経由）
• メール検証
• セッション失効時の一括無効化 UI
• 監査ログ
• セッションキャッシュ（Redis など）

関連リンク

• TypeScriptで学ぶ Svelte 5/SvelteKit 学習ガイド
• Svelte 公式ドキュメント
• SvelteKit 公式ドキュメント
• SvelteKit Form Actions
• SvelteKit Hooks
• Prisma Documentation

ライセンス

MIT