Cookie/Sessionベース認証システム

src/
├── lib/
│   └── server/
│       ├── auth.ts                 # 認証ユーティリティ
│       ├── database.ts             # Prismaクライアント
│       └── session.ts              # セッション管理
├── routes/
│   ├── +layout.server.ts           # 認証状態の共有
│   ├── (public)/                   # 公開ルート
│   │   ├── login/
│   │   │   ├── +page.svelte        # ログインフォーム
│   │   │   └── +page.server.ts     # ログイン処理
│   │   └── register/
│   │       ├── +page.svelte        # 登録フォーム
│   │       └── +page.server.ts     # 登録処理
│   └── (protected)/                # 保護ルート
│       ├── +layout.server.ts       # 認証チェック
│       └── dashboard/
│           └── +page.svelte        # ダッシュボード
├── hooks.server.ts                 # グローバル認証フック
└── app.d.ts                        # 型定義

# SvelteKit 2.x + Svelte 5のプロジェクトを作成
# TypeScript、ESLint、Prettierを選択することを推奨
npm create svelte@latest svelte5-auth-basic
cd svelte5-auth-basic

# 認証システムに必要なパッケージをインストール
npm install bcryptjs @prisma/client
# 開発用の型定義とツール
npm install -D prisma @types/bcryptjs @sveltejs/adapter-vercel

// prisma/schema.prisma
// ※ Prismaスキーマの@記号がSvelteのテンプレート構文と衝突するため、
// コメントアウトして記載しています。実際の実装時はコメントを外してください。

// model User {
//   id        String    @id @default(uuid())      // 一意のユーザーID（UUID v4）
//   email     String    @unique                   // メールアドレス（重複不可）
//   password  String                              // ハッシュ化されたパスワード
//   name      String?                             // ユーザー名（オプション）
//   createdAt DateTime  @default(now())           // 作成日時
//   updatedAt DateTime  @updatedAt                // 更新日時（自動更新）
//   sessions  Session[]                           // このユーザーのセッション一覧
// }

// model Session {
//   id        String   @id @default(uuid())       // セッションID
//   token     String   @unique                    // セッショントークン（Cookie値）
//   userId    String                              // 所有者のユーザーID
//   user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
//                                                 // ユーザーとのリレーション（カスケード削除）
//   expiresAt DateTime                           // セッション有効期限
//   createdAt DateTime @default(now())           // セッション作成日時
// }

// src/lib/server/auth.ts
// 認証システムのコア機能を提供するユーティリティモジュール
// このファイルは/lib/serverディレクトリに配置することで、
// クライアントサイドからのアクセスを防ぎ、セキュリティを保ちます
import { PrismaClient } from '@prisma/client';
import bcrypt from 'bcryptjs';
import crypto from 'crypto';
import type { Cookies } from '@sveltejs/kit';

// Prismaクライアントのインスタンスを作成
// これにより、データベースとの通信が可能になります
const prisma = new PrismaClient();

// セッションCookieの名前と有効期間を定数として定義
// これらの値を変更することで、システム全体の設定を一括変更できます
const SESSION_COOKIE_NAME = 'session';
const SESSION_EXPIRY_DAYS = 7;  // 7日間が一般的な推奨値

// パスワードハッシュ化関数
// bcryptを使用してパスワードを安全にハッシュ化します
// 第2引数の10はソルトラウンド数で、値が大きいほど安全ですが処理が遅くなります
export async function hashPassword(password: string): Promise<string> {
  return bcrypt.hash(password, 10);
}

// パスワード検証関数
// ユーザーが入力したパスワードとデータベースに保存されたハッシュ値を比較します
// bcrypt.compareはハッシュ化時のソルトを自動的に抽出して検証します
export async function verifyPassword(
  password: string,           // ユーザーが入力した平文パスワード
  hashedPassword: string      // データベースに保存されたハッシュ値
): Promise<boolean> {
  return bcrypt.compare(password, hashedPassword);
}

// セッション作成関数
// 新しいセッションを作成し、データベースに保存します
// UUIDを使用することで、予測不可能でユニークなセッションIDを生成します
export async function createSession(userId: string): Promise<string> {
  // ランダムなUUIDをセッショントークンとして生成
  // crypto.randomUUID()は暗号学的に安全なランダム値を生成
  const token = crypto.randomUUID();
  
  // 現在日時からSESSION_EXPIRY_DAYS日後を有効期限として設定
  const expiresAt = new Date();
  expiresAt.setDate(expiresAt.getDate() + SESSION_EXPIRY_DAYS);
  
  // データベースにセッション情報を保存
  await prisma.session.create({
    data: {
      token,      // セッショントークン
      userId,     // このセッションを所有するユーザーのID
      expiresAt   // セッションの有効期限
    }
  });
  
  return token;
}

// セッション検証関数
// セッショントークンを検証し、有効な場合はユーザー情報を返します
// 期限切れのセッションは自動的に削除されます
export async function validateSession(token: string): Promise<User | null> {
  // トークンでセッションを検索し、関連するユーザー情報も取得
  const session = await prisma.session.findUnique({
    where: { token },
    include: { user: true }  // ユーザー情報をJOINして取得
  });
  
  // セッションが存在しない場合
  if (!session) {
    return null;
  }
  
  // セッションの有効期限チェック
  if (session.expiresAt < new Date()) {
    // 期限切れのセッションをデータベースから削除（クリーンアップ）
    await prisma.session.delete({
      where: { id: session.id }
    });
    return null;
  }
  
  // 有効なセッションの場合、ユーザー情報を返す
  return {
    id: session.user.id,
    email: session.user.email,
    name: session.user.name
  };
}

// Cookie設定関数
// セッショントークンを安全なCookieとして設定します
// HTTPOnlyやSecure属性を設定することで、XSSや中間者攻撃から保護します
export function setSessionCookie(cookies: Cookies, token: string): void {
  cookies.set(SESSION_COOKIE_NAME, token, {
    path: '/',                                      // サイト全体でCookieを有効化
    httpOnly: true,                                 // JavaScriptからのアクセスを禁止（XSS対策）
    secure: process.env.NODE_ENV === 'production',  // 本番環境ではHTTPSでのみ送信
    sameSite: 'strict',                            // より厳格なCSRF保護
    maxAge: 60 * 60 * 24 * SESSION_EXPIRY_DAYS     // Cookieの有効期間（秒単位）
  });
}

// Cookie削除関数
// ログアウト時にセッションCookieを削除します
export function deleteSessionCookie(cookies: Cookies): void {
  cookies.delete('session', { path: '/' });
}

// src/hooks.server.ts
// すべてのリクエストをインターセプトし、セッション検証を行うミドルウェア
// このファイルはSvelteKitアプリケーションのエントリーポイントとして機能します
import type { Handle } from '@sveltejs/kit';
import { validateSession } from '$lib/server/auth';

export const handle: Handle = async ({ event, resolve }) => {
  // Cookieからセッショントークンを取得
  const sessionToken = event.cookies.get('session');
  
  if (sessionToken) {
    // セッショントークンが存在する場合、検証を実行
    const user = await validateSession(sessionToken);
    if (user) {
      // 有効なセッションの場合、localsにユーザー情報を保存
      // localsはリクエスト全体でアクセス可能なオブジェクトです
      event.locals.user = user;
    }
  }
  
  // ユーザーが未設定の場合はnullを設定（TypeScriptの型チェックのため）
  event.locals.user = event.locals.user || null;
  
  // リクエストの処理を継続
  return resolve(event);
};

// src/routes/login/+page.server.ts
// ログインページのサーバーサイド処理
// Form Actionsを使用してフォーム送信を処理し、認証を実行します
import { fail, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';
import { 
  getUserByEmail, 
  verifyPassword, 
  createSession, 
  setSessionCookie 
} from '$lib/server/auth';

export const actions: Actions = {
  // defaultアクションは、フォームのaction属性が指定されていない場合に実行されます
  default: async ({ request, cookies, url }) => {
    // フォームデータを取得
    const data = await request.formData();
    const email = data.get('email') as string;
    const password = data.get('password') as string;
    
    // 入力値のバリデーション
    // 必須項目が入力されているか確認します
    if (!email || !password) {
      // fail関数を使用してエラーを返します
      // フォームの値とエラーメッセージをクライアントに返します
      return fail(400, {
        email,  // 入力されたメールアドレスを保持
        error: 'すべての項目を入力してください'
      });
    }
    
    try {
      // データベースからユーザーを検索
      const user = await getUserByEmail(email);
      
      // ユーザーが存在しない、またはパスワードが一致しない場合
      if (!user || !(await verifyPassword(password, user.password))) {
        // 401 Unauthorizedエラーを返します
        // セキュリティ上、「ユーザーが存在しない」と「パスワードが間違っている」を
        // 区別しないメッセージにしています
        return fail(401, {
          email,
          error: 'メールアドレスまたはパスワードが正しくありません'
        });
      }
      
      // 認証成功：新しいセッションを作成
      const sessionToken = await createSession(user.id);
      
      // セッショントークンをCookieに設定
      setSessionCookie(cookies, sessionToken);
      
      // ログイン後のリダイレクト先を決定
      // fromパラメータがあればそこへ、なければダッシュボードへ
      const redirectTo = url.searchParams.get('from') || '/dashboard';
      
      // 303 See Otherステータスでリダイレクト
      // throwを使用することで、SvelteKitが適切にリダイレクトを処理します
      throw redirect(303, redirectTo);
    } catch (error) {
      // redirectのエラーは正常な処理なので、再スローします
      // これにより、SvelteKitがリダイレクトを実行します
      if (error?.status === 303) throw error;
      
      // その他のエラーの場合は、500エラーを返します
      return fail(500, {
        email,
        error: 'ログイン中にエラーが発生しました'
      });
    }
  }
};

// src/routes/dashboard/+page.server.ts
// ダッシュボードページのサーバーサイド処理
// 認証チェックを行い、未認証ユーザーをリダイレクトします
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ locals }) => {
  // hooks.server.tsで設定されたlocals.userを確認
  // 未認証の場合はログインページへリダイレクト
  if (!locals.user) {
    // fromパラメータを付与して、ログイン後に戻れるようにする
    throw redirect(303, '/login?from=/dashboard');
  }
  
  // 認証済みユーザーの情報をクライアントに渡す
  return {
    user: locals.user
  };
};

// セキュアなCookie設定の例
cookies.set('session', token, {
  httpOnly: true,     // document.cookieやその他のJavaScript APIからアクセス不可
  secure: true,        // HTTPS接続でのみCookieを送信（中間者攻撃対策）
  sameSite: 'strict'   // 最も厳格なクロスサイトリクエスト制限（CSRF対策）
});

// bcryptでソルト付きハッシュを生成
// ソルトラウンド10は、セキュリティとパフォーマンスのバランスが良い値です
// 値を増やすとより安全になりますが、処理時間が増加します
const hashedPassword = await bcrypt.hash(password, 10);

// 期限切れセッションのクリーンアップ関数
// cronジョブやタイマーで定期実行することを推奨します
async function cleanupExpiredSessions() {
  // 現在日時より古いexpiresAtを持つセッションをすべて削除
  await prisma.session.deleteMany({
    where: {
      expiresAt: { lt: new Date() }  // lt = less than（より小さい）
    }
  });
}

// Redisを使用したセッションキャッシュの実装例
// 高トラフィックなアプリケーションで特に効果的です

import { redis } from '$lib/server/redis';

export async function validateSessionCached(token: string) {
  // まずRedisキャッシュを確認
  const cached = await redis.get(`session:${token}`);
  if (cached) {
    // キャッシュヒット：高速にレスポンス
    return JSON.parse(cached);
  }
  
  // キャッシュミス：データベースから取得
  const session = await validateSession(token);
  
  // 取得したデータをRedisにキャッシュ（1時間有効）
  await redis.setex(
    `session:${token}`,  // キー
    3600,                // TTL（秒）
    JSON.stringify(session)
  );
  
  return session;
}

// Prismaスキーマでのインデックス定義
// @db.Indexアノテーションを使用してインデックスを作成
// model Session {
//   token     String   @unique @db.Index  // tokenでの高速検索を可能に
//   userId    String   @db.Index          // ユーザー別セッション一覧の取得を高速化
//   expiresAt DateTime @db.Index          // 期限切れセッションのクリーンアップを高速化
// }