SvelteKit認証ベストプラクティス

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { getSession } from '$lib/server/auth';

// handleハンドラーは全てのHTTPリクエストで実行される
// eventオブジェクトにはリクエスト情報が含まれ、resolveは次の処理への橋渡し
export const handle: Handle = async ({ event, resolve }) => {
  // クッキーからセッションIDを取得（HTTPOnlyで安全）
  const sessionId = event.cookies.get('session');
  
  if (sessionId) {
    // データベースまたはRedisからセッション情報を取得
    const session = await getSession(sessionId);
    
    // セッションが有効期限内の場合のみユーザー情報を設定
    if (session && session.expiresAt > new Date()) {
      // event.localsはリクエスト全体で共有される
      // TypeScriptの型定義はapp.d.tsで行う
      event.locals.user = {
        id: session.userId,
        email: session.user.email,
        roles: session.user.roles // ロールベースアクセス制御用
      };
      event.locals.session = session;
    }
  }
  
  // 次のハンドラーまたはページに処理を委譲
  const response = await resolve(event);
  
  // レスポンスにセキュリティヘッダーを追加（XSS、クリックジャッキング対策）
  response.headers.set('X-Frame-Options', 'DENY'); // iframe埋め込み禁止
  response.headers.set('X-Content-Type-Options', 'nosniff'); // MIMEタイプ推測防止
  response.headers.set('X-XSS-Protection', '1; mode=block'); // XSS対策
  
  return response;
};

// src/routes/(auth)/+layout.server.ts
// このファイルは(auth)グループ内のすべてのページで実行される
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals, url }) => {
  // hooks.server.tsで設定されたlocals.userをチェック
  if (!locals.user) {
    // 303 See Otherステータスで適切にリダイレクト
    // fromパラメータで元のURLを保存（ログイン後に戻るため）
    throw redirect(303, `/login?from=${encodeURIComponent(url.pathname)}`);
  }
  
  return {
    user: locals.user
  };
};

// src/routes/(admin)/+layout.server.ts
// 管理者専用セクションのレイアウト
import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals, parent }) => {
  // parent()を呼ぶことで、親レイアウトのload関数を実行
  // これにより、認証チェックの重複を避ける
  await parent();
  
  // ロールベースアクセス制御（RBAC）の実装
  // rolesは配列として管理し、複数ロールに対応
  if (!locals.user?.roles?.includes('admin')) {
    // 403 Forbiddenエラーを返す（認証済みだが権限不足）
    throw error(403, 'Administrator access required');
  }
  
  return {
    isAdmin: true
  };
};

// src/lib/server/auth-helpers.ts
import { error, redirect } from '@sveltejs/kit';
import type { RequestEvent } from '@sveltejs/kit';

/**
 * 認証を要求するヘルパー関数
 * @param event - SvelteKitのRequestEventオブジェクト
 * @returns 認証済みユーザー情報
 * @throws リダイレクト（未認証の場合）
 */
export function requireAuth(event: RequestEvent) {
  if (!event.locals.user) {
    // ログインページにリダイレクトし、元のパスを保存
    throw redirect(303, `/login?from=${encodeURIComponent(event.url.pathname)}`);
  }
  return event.locals.user;
}

/**
 * 特定のロールを要求するヘルパー関数
 * @param event - SvelteKitのRequestEventオブジェクト
 * @param role - 必要なロール名（'admin', 'editor'等）
 * @returns 認証済みユーザー情報
 * @throws エラー（権限不足の場合）
 */
export function requireRole(event: RequestEvent, role: string) {
  // まず認証チェックを行う（関数の合成）
  const user = requireAuth(event);
  
  if (!user.roles?.includes(role)) {
    // 403 Forbidden - 認証済みだが権限不足
    throw error(403, `Role '${role}' required`);
  }
  
  return user;
}

/**
 * リソースの所有者確認
 * @param event - SvelteKitのRequestEventオブジェクト
 * @param resourceOwnerId - リソースの所有者ID
 * @returns 認証済みユーザー情報
 * @throws エラー（所有者でない場合）
 * @description 自分のリソースのみ操作可能にする（管理者は例外）
 */
export function requireOwnership(
  event: RequestEvent,
  resourceOwnerId: string
) {
  const user = requireAuth(event);
  
  // 所有者本人または管理者のみアクセス可能
  if (user.id !== resourceOwnerId && !user.roles?.includes('admin')) {
    throw error(403, 'Access denied');
  }
  
  return user;
}

// src/routes/api/posts/[id]/+server.ts
import { requireOwnership } from '$lib/server/auth-helpers';
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const DELETE: RequestHandler = async ({ params, locals, url }) => {
  // まず対象の投稿を取得
  const post = await getPost(params.id);
  
  if (!post) {
    throw error(404, 'Post not found');
  }
  
  // 所有者チェック - ヘルパー関数を使用
  // 投稿の作者または管理者のみ削除可能
  requireOwnership({ locals, url }, post.authorId);
  
  // 実際の削除処理
  await deletePost(params.id);
  
  // 成功レスポンス
  return json({ success: true, message: 'Post deleted successfully' });
};

// Angular風のガード実装（SvelteKit版）
// src/lib/server/guards.ts
import type { RequestEvent } from '@sveltejs/kit';
import { error } from '@sveltejs/kit';

// ガード関数の型定義（AngularのCanActivateに相当）
type GuardFunction = (event: RequestEvent) => boolean | Promise<boolean>;

/**
 * ガードファクトリー関数
 * Angularのガードシステムを模倣した実装
 */
export function createGuard(guardFn: GuardFunction) {
  return async (event: RequestEvent) => {
    const canActivate = await guardFn(event);
    if (!canActivate) {
      // Angularと同様、false返却時はアクセス拒否
      throw error(403, 'Access denied');
    }
  };
}

// 使用例：Angularスタイルのガード定義
// CanActivateに相当
const isAuthenticated = createGuard((event) => !!event.locals.user);

// CanActivateChildに相当
const isAdmin = createGuard((event) => 
  event.locals.user?.roles?.includes('admin') ?? false
);

// 複数条件の組み合わせも可能
const isEditorOrAdmin = createGuard((event) => {
  const roles = event.locals.user?.roles ?? [];
  return roles.includes('editor') || roles.includes('admin');
});

// +page.server.ts内で使用
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  // Angularのroute configでguardsを設定するのと同等
  await isAuthenticated(event); // 認証チェック
  await isAdmin(event); // 権限チェック
  
  // ガードを通過した後のページロジック
  const data = await fetchAdminData();
  return { data };
};

// NestJS風のガード合成（SvelteKit版）
// src/lib/server/guards.ts

/**
 * 複数のガードを順番に実行するヘルパー
 * NestJSの@UseGuardsデコレータと同等の機能
 */
export function useGuards(...guards: GuardFunction[]) {
  return async (event: RequestEvent) => {
    // 各ガードを順番に実行（一つでも失敗すればエラー）
    for (const guard of guards) {
      await guard(event);
    }
  };
}

// 使用例：NestJSスタイルのガード適用
// 認証チェックと権限チェックを連鎖
const protectedRoute = useGuards(isAuthenticated, isAdmin);

export const load: PageServerLoad = async (event) => {
  // NestJSの@UseGuards(AuthGuard, RolesGuard)と同等
  await protectedRoute(event);
  
  // ガード通過後のビジネスロジック
  const data = await fetchProtectedData();
  return { data };
};

// 各+page.server.tsで直接チェック
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ locals }) => {
  // シンプルな認証チェック
  if (!locals.user) {
    throw redirect(303, '/login');
  }
  
  // 認証後のデータ取得
  const data = await fetchUserData(locals.user.id);
  return { data };
};

routes/
├── (public)/       # 認証不要（ランディングページ、ドキュメント等）
│   ├── +layout.svelte
│   ├── about/
│   └── docs/
├── (auth)/         # 認証必須（一般ユーザー向け）
│   ├── +layout.server.ts  # 認証チェック
│   ├── dashboard/
│   └── profile/
└── (admin)/        # 管理者のみ
    ├── +layout.server.ts  # 権限チェック
    ├── users/
    └── settings/

// src/lib/server/auth/policies.ts
// ポリシーベースの認可システム

/**
 * 認可ポリシークラス
 * ビジネスルールを中央集権的に管理
 */
export class AuthPolicy {
  /**
   * 投稿の閲覧権限チェック
   */
  static async canViewPost(user: User, post: Post): Promise<boolean> {
    // 公開投稿、作者本人、またはモデレーターは閲覧可能
    return post.isPublic || 
           post.authorId === user.id || 
           user.roles.includes('moderator');
  }
  
  /**
   * 投稿の編集権限チェック
   */
  static async canEditPost(user: User, post: Post): Promise<boolean> {
    // 作者本人または管理者のみ編集可能
    return post.authorId === user.id || 
           user.roles.includes('admin');
  }
  
  /**
   * ユーザー管理権限チェック
   */
  static async canManageUsers(user: User): Promise<boolean> {
    return user.roles.includes('admin') || 
           user.roles.includes('user-manager');
  }
}

// 使用例：ポリシーベースの認可
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, locals, url }) => {
  // 認証チェック
  const user = requireAuth({ locals, url });
  
  // データ取得
  const post = await getPost(params.id);
  if (!post) {
    throw error(404, 'Post not found');
  }
  
  // ポリシーベースの権限チェック
  if (!await AuthPolicy.canViewPost(user, post)) {
    throw error(403, 'Cannot view this post');
  }
  
  // 編集権限も同時にチェックしてUIで活用
  const canEdit = await AuthPolicy.canEditPost(user, post);
  
  return { 
    post,
    canEdit // UIで編集ボタンの表示/非表示に使用
  };
};

// ❌ 悪い例：クライアントサイドのみ
// +page.svelte
<script>
  import { user } from '$lib/stores';
  import { goto } from '$app/navigation';
  
  // ブラウザのDevToolsで簡単に回避可能
  if (!$user) goto('/login');
</script>

// ❌ 悪い例：認証チェック忘れ
// src/routes/admin/users/+page.server.ts
export const load: PageServerLoad = async ({ locals }) => {
  // 認証チェックなしで機密データを返している！
  const users = await getAllUsers();
  const secrets = await getSystemSecrets();
  return { users, secrets };
};

// ❌ 悪い例：読みにくく、テストしにくい条件分岐
// src/routes/posts/[id]/edit/+page.server.ts
export const load: PageServerLoad = async ({ params, locals }) => {
  const post = await getPost(params.id);
  
  // 複雑すぎる条件分岐（何をチェックしているか不明瞭）
  if (user && user.roles && (user.roles.includes('admin') || 
      (user.roles.includes('moderator') && post.status === 'draft') ||
      (user.id === post.authorId && post.status !== 'deleted'))) {
    return { post };
  }
  throw error(403);
}

// ✅ 良い例：サーバーサイドでの検証
// src/routes/admin/+page.server.ts
import type { PageServerLoad } from './$types';
import { requireRole } from '$lib/server/auth-helpers';

export const load: PageServerLoad = async (event) => {
  // サーバーサイドで確実に検証
  requireRole(event, 'admin');
  
  const data = await getAdminData();
  return { data };
};

// ✅ 良い例：ロジックをヘルパー関数に抽出
// src/lib/server/auth/post-permissions.ts
export function canEditPost(user: User, post: Post): boolean {
  // 複雑なロジックをわかりやすい関数に
  if (user.roles.includes('admin')) return true;
  if (user.id === post.authorId && post.status !== 'deleted') return true;
  if (user.roles.includes('moderator') && post.status === 'draft') return true;
  return false;
}

// ✅ 良い例：各層の責任を明確に
// hooks.server.ts - セッション管理
// (auth)/+layout.server.ts - 認証チェック
// +page.server.ts - ビジネスロジック