SvelteKitのhandleで認証を一元化する：Cookie・セッション・Form Actions実装

// src/routes/(shop)/mypage/+page.server.ts
export const load: PageServerLoad = async (event) => {
  // ページごとに同じ認証チェックを書く必要がある ← 問題
    const loggedIn = event.url.searchParams.get('loggedIn') === 'true';
    if (!loggedIn) redirect(303, '/login');
    return { user: { name: '山田 太郎', email: 'taro@example.com', memberSince: '2024-01' } };
};

import { randomUUID } from 'node:crypto';

export type SessionUser = {
  id: string;
  name: string;
  email: string;
};

// セッションIDとユーザー情報を紐づけるMap（サーバーメモリ上）
const sessionStore = new Map<string, SessionUser>();

// セッションを作成してIDを返す
export function createSession(user: SessionUser): string {
  const sessionId = randomUUID();
  sessionStore.set(sessionId, user);
  return sessionId;
}

// セッションIDからユーザー情報を取得。存在しなければ null
export function getSession(sessionId: string): SessionUser | null {
  return sessionStore.get(sessionId) ?? null;
}

// ログアウト時にセッションを削除
export function deleteSession(sessionId: string): void {
  sessionStore.delete(sessionId);
}

import type { SessionUser } from '$lib/server/session';

declare global {
  namespace App {
    interface Locals {
            user: SessionUser | null;
    }
  }
}
export {};

// Cookie を読む
const sessionId = event.cookies.get('session_id');

// Cookie を書く
event.cookies.set('session_id', sessionId, {
  path:     '/',        // Cookie が有効なパス
  httpOnly: true,       // JavaScript からアクセス不可（XSS対策）
  sameSite: 'lax',     // CSRF対策（'strict' / 'lax' / 'none'）
  secure:   true,       // HTTPS 環境のみ送信（本番では必ず true）
  maxAge:   60 * 60 * 24, // 有効期限（秒）。ここでは24時間
});

// Cookie を削除
event.cookies.delete('session_id', { path: '/' });

import type { Handle } from '@sveltejs/kit';
import { redirect } from '@sveltejs/kit';
import { getSession } from '$lib/server/session';

// 認証が必要なルートのプレフィックス
const PROTECTED_ROUTES = ['/mypage'];

export const handle: Handle = async ({ event, resolve }) => {
  // ① Cookie からセッションIDを取得
    const sessionId = event.cookies.get('session_id');

  // ② セッションIDがあればユーザー情報を取得して locals にセット
  event.locals.user = sessionId ? getSession(sessionId) : null;

  // ③ 保護ルートへの未認証アクセスをここで一括ガード
  const isProtected = PROTECTED_ROUTES.some(
    (route) => event.url.pathname.startsWith(route)
  );

    if (isProtected && !event.locals.user) {
      redirect(303, `/login?redirectTo=${event.url.pathname}`);
    }

  return resolve(event);
};

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
  // handle で認証済みが保証されているため、ここで redirect は不要
  // locals.user は必ず存在する（null チェックは型的な保険）
    const user = event.locals.user!;
  return { user };
};

import type { Actions } from './$types';

export const actions: Actions = {
  // <form method="POST" action="?/login"> に対応するハンドラ
    login: async (event) => {
    // フォームデータを取得
    const data = await event.request.formData();
    const email = String(data.get('email'));

    // 処理結果をページに返す（エラー表示などに使う）
    return { success: true };
  }
};

<!-- action="?/login" でこのページの login アクションを呼び出す -->
<form method="POST" action="?/login">
  <input type="email" name="email" required />
  <button type="submit">ログイン</button>
</form>

import { redirect, fail } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
import { createSession } from '$lib/server/session';

// 仮のユーザーデータ（シリーズCでDBに移行）
const MOCK_USER = {
  id: 'user-1',
  name: '山田 太郎',
  email: 'taro@example.com',
  password: 'password123', // 本番では絶対にこの形で保存しない
};

// すでにログイン済みなら /mypage へリダイレクト
export const load: PageServerLoad = async (event) => {
  if (event.locals.user) redirect(303, '/mypage');
  return {};
};

export const actions: Actions = {
  login: async (event) => {
    const data     = await event.request.formData();
    const email    = String(data.get('email'));
    const password = String(data.get('password'));

    // メール・パスワードを検証（本番ではDBとbcryptで照合）
    if (email !== MOCK_USER.email || password !== MOCK_USER.password) {
      // fail() でエラーコードとメッセージをページに返す
            return fail(401, { message: 'メールアドレスまたはパスワードが違います' });
    }

    // 認証成功 → セッション作成
    const sessionId = createSession({
      id:    MOCK_USER.id,
      name:  MOCK_USER.name,
      email: MOCK_USER.email,
    });

    // Cookie にセッションIDを発行
        event.cookies.set('session_id', sessionId, {
      path:     '/',
      httpOnly: true,
      sameSite: 'lax',
      secure:   false, // 開発環境。本番では true
      maxAge:   60 * 60 * 24,
        });

    // ログイン前にアクセスしようとしていたURLがあれば戻る
    const redirectTo = event.url.searchParams.get('redirectTo') ?? '/mypage';
    redirect(303, redirectTo);
  },
};

<script lang="ts">
  import { enhance } from '$app/forms';
  import type { ActionData } from './$types';

  // actions の戻り値（fail() の内容）が form に入る
  export let form: ActionData;
</script>

<h1>ログイン</h1>

<!-- use:enhance でページ全体リロードなしにフォームを送信 -->
<form method="POST" action="?/login" use:enhance>
  <!-- fail() で返ったエラーメッセージを表示 -->
  {#if form?.message}
    <p class="error">{form.message}</p>
  {/if}

  <label>
    メールアドレス
    <input type="email" name="email" required />
  </label>

  <label>
    パスワード
    <input type="password" name="password" required />
  </label>

  <button type="submit">ログイン</button>
</form>

import { redirect } from '@sveltejs/kit';
import type { Actions } from './$types';
import { deleteSession } from '$lib/server/session';

export const actions: Actions = {
  logout: async (event) => {
    const sessionId = event.cookies.get('session_id');

    if (sessionId) {
      // サーバー側のセッションを削除
            deleteSession(sessionId);
      // Cookie を削除（path は set 時と同じにする）
            event.cookies.delete('session_id', { path: '/' });
    }

    redirect(303, '/login');
  },
};

<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<h1>マイページ</h1>
<dl>
  <dt>お名前</dt>        <dd>{data.user.name}</dd>
  <dt>メールアドレス</dt> <dd>{data.user.email}</dd>
</dl>

<!-- ログアウトは POST で行う（GET でやると CSRF リスク） -->
<form method="POST" action="/logout?/logout">
  <button type="submit">ログアウト</button>
</form>

src/
 ├─ app.d.ts UPDATE
 ├─ hooks.server.ts UPDATE ← Cookie検証・保護ルートガード追加
 ├─ lib/server/
 └─ session.ts NEW ← セッションストア
 └─ routes/
        ├─ login/
        |   ├─ +page.server.ts NEW ← actions.login
        |   └─ +page.svelte NEW ← ログインフォーム
        ├─ logout/
        |    └─ +page.server.ts NEW ← actions.logout
        └─ (shop)/mypage/
                   ├─ +page.server.ts UPDATE ← 認証チェック削除・locals参照のみに
                   └─ +page.svelte UPDATE ← ログアウトボタン追加