SvelteKitでOAuthログインを実装する：GitHub連携と本番運用チェックリスト

import { redirect } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { randomBytes } from 'node:crypto';

export const GET: RequestHandler = async (event) => {
  // CSRF 対策用の state をランダム生成してCookieに保存
    const state = randomBytes(16).toString('hex');
  event.cookies.set('oauth_state', state, {
    path: '/', httpOnly: true, sameSite: 'lax',
    maxAge: 60 * 10, // 10分で失効
  });

  // GitHub の認可ページへリダイレクトする URL を組み立てる
  const params = new URLSearchParams({
    client_id:    process.env.GITHUB_CLIENT_ID!,
    redirect_uri: process.env.GITHUB_REDIRECT_URI!,
    scope:        'read:user user:email', // 取得するスコープ
        state,
  });

    redirect(302, `https://github.com/login/oauth/authorize?${params}`);
};

import { redirect, error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { db } from '$lib/server/db';
import { createSession } from '$lib/server/session';
import { SESSION_COOKIE_OPTIONS } from '$lib/server/cookie';

export const GET: RequestHandler = async (event) => {
  const code  = event.url.searchParams.get('code');
  const state = event.url.searchParams.get('state');
  const savedState = event.cookies.get('oauth_state');

  // ── state 検証（CSRF 対策） ──
    if (!state || state !== savedState) error(400, 'Invalid state');
  event.cookies.delete('oauth_state', { path: '/' });
  if (!code) error(400, 'Missing code');

  // ── code → access token に交換 ──
    const tokenRes = await fetch('https://github.com/login/oauth/access_token', {
    method: 'POST',
    headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
    body: JSON.stringify({
      client_id:     process.env.GITHUB_CLIENT_ID,
      client_secret: process.env.GITHUB_CLIENT_SECRET,
      code,
    }),
    });
  const { access_token } = await tokenRes.json();
  if (!access_token) error(400, 'Failed to get access token');

  // ── GitHub API でユーザー情報を取得 ──
    const ghUser = await fetch('https://api.github.com/user', {
    headers: { 'Authorization': `Bearer ${access_token}`, 'User-Agent': 'svelte-shop' },
    }).then((r) => r.json());

  // メールは別エンドポイントで取得（非公開設定のユーザーに対応）
  const emails: { email: string; primary: boolean }[] = await fetch(
    'https://api.github.com/user/emails',
    { headers: { 'Authorization': `Bearer ${access_token}`, 'User-Agent': 'svelte-shop' } }
  ).then((r) => r.json());
  const primaryEmail = emails.find((e) => e.primary)?.email ?? ghUser.email;
  if (!primaryEmail) error(400, 'Email not found');

  // ── DB でユーザーを検索 or 作成 ──
    let user = await findOrCreateOAuthUser({
    provider:       'github',
    providerUserId: String(ghUser.id),
    email:          primaryEmail,
    name:           ghUser.name || ghUser.login,
    });

  // ── セッション作成・Cookie 発行 ──
  const sessionId = await createSession({
    id: user.id, name: user.name, email: user.email
  });
  event.cookies.set('session_id', sessionId, SESSION_COOKIE_OPTIONS);
  redirect(303, '/mypage');
};

// OAuthAccount を使ったユーザー検索 or 作成（既存アカウント連携を含む）
async function findOrCreateOAuthUser(params: {
  provider: string; providerUserId: string;
  email: string;     name: string;
}) {
  // ① OAuthAccount から既存ユーザーを検索
    const existing = await db.oAuthAccount.findUnique({
    where: { provider_providerUserId: { provider: params.provider, providerUserId: params.providerUserId } },
    include: { user: true },
    });
  if (existing) return existing.user;

  // ② 同じメールアドレスの既存ユーザーがいれば紐づける（アカウント連携）
    const userByEmail = await db.user.findUnique({ where: { email: params.email } });
  if (userByEmail) {
    await db.oAuthAccount.create({
      data: { userId: userByEmail.id, provider: params.provider, providerUserId: params.providerUserId },
    });
    return userByEmail;
  }

  // ③ まったく新しいユーザーを作成
    const newUser = await db.user.create({
    data: {
      email: params.email,
      name:  params.name,
      // OAuth ユーザーはパスワードなし（nullable にしたので省略可）
      oauthAccounts: {
        create: { provider: params.provider, providerUserId: params.providerUserId },
      },
    },
    });
  return newUser;
}

<!-- 既存のメール・パスワードフォームの下に追加 -->
<div class="divider">または</div>

<!-- href で GET リクエストを送るだけ。フォームは不要 -->
<a href="/auth/github" class="btn-github">
  GitHub でログイン
</a>