SvelteKitでパスワード認証を本番対応する：Prisma導入・ハッシュ化・サインアップ実装

# マイグレーションファイルを生成してDBに適用
$ npx prisma migrate dev --name init-user

✔ Generated Prisma Client (v6.x.x)

The following migration(s) have been created and applied:

migrations/
  └─ 20240101000000_init_user/
       └─ migration.sql

✔ Generated Prisma Client

# Prisma Studio でDBの中身をブラウザから確認できる（任意）
$ npx prisma studio

import { PrismaClient } from '@prisma/client';

// グローバル変数として保持してホットリロード時の多重生成を防ぐ
const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const db = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== 'production') {
  globalForPrisma.prisma = db;
}

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

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

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

    // ── バリデーション ──
    if (!email || !name || !password) {
      return fail(400, { message: 'すべての項目を入力してください' });
    }
    if (password.length < 8) {
      return fail(400, { message: 'パスワードは8文字以上で入力してください' });
    }

    // ── メールアドレスの重複チェック ──
        const existing = await db.user.findUnique({ where: { email } });
    if (existing) {
      return fail(409, { message: 'このメールアドレスはすでに登録されています' });
    }

    // ── パスワードをハッシュ化してDBに保存 ──
        const hashedPassword = await hashPassword(password);
        const user = await db.user.create({
      data: { email, name, hashedPassword },
        });

    // ── 登録完了後に自動ログイン ──
    const sessionId = createSession({
      id: user.id, name: user.name, email: user.email
    });
    event.cookies.set('session_id', sessionId, {
      path: '/', httpOnly: true, sameSite: 'lax', secure: false, maxAge: 60 * 60 * 24
    });

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

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

<h1>新規登録</h1>

<form method="POST" action="?/signup" use:enhance>
  {#if form?.message}
    <p class="error">{form.message}</p>
  {/if}

  <label>
    お名前
    <input type="text" name="name" required />
  </label>

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

  <label>
    パスワード（8文字以上）
    <input type="password" name="password" minlength="8" required />
  </label>

  <button type="submit">登録する</button>
</form>

<p>すでにアカウントをお持ちの方は <a href="/login">ログイン</a></p>

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

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')).trim().toLowerCase();
    const password = String(data.get('password'));

    // ── DBからユーザーを検索 ──
        const user = await db.user.findUnique({ where: { email } });

    // ── bcrypt でパスワード検証 ──
    // ユーザーが存在しない場合もダミーのハッシュと比較してタイミング攻撃を防ぐ
    const dummyHash = '$2b$12$dummy.hash.to.prevent.timing.attack.aaaa';
        const isValid = await verifyPassword(
          password,
          user?.hashedPassword ?? dummyHash
        );

    if (!user || !isValid) {
      // ユーザーが存在しない場合と、パスワードが違う場合で
      // 同じメッセージを返すことで、メールアドレスの存在有無を隠す
      return fail(401, { message: 'メールアドレスまたはパスワードが違います' });
    }

    // ── セッション作成・Cookie 発行 ──
    const sessionId = createSession({
      id: user.id, name: user.name, email: user.email
    });
    event.cookies.set('session_id', sessionId, {
      path: '/', httpOnly: true, sameSite: 'lax', secure: false, maxAge: 60 * 60 * 24
    });

    const redirectTo = event.url.searchParams.get('redirectTo') ?? '/mypage';
    redirect(303, redirectTo);
  },
};

prisma/
 └─ schema.prisma NEW ← User モデル

src/ 
 ├ lib/server/
 │     ├─ db.ts UPDATE ← Prisma Client シングルトン
 │     └─ password.ts NEW ← hashPassword / verifyPassword
 │
 └ routes/
      ├─ signup/
      │     ├─ +page.server.ts NEW ← actions.signup
      │     └─ +page.svelte NEW ← サインアップフォーム
      └─ login/
            └─ +page.server.ts UPDATE ← DB照合・bcrypt検証に差し替え