Svelte入門：SvelteKitでの認証

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでの認証について解説しています。

背景
認証
セッションとトークン
1. 実務的な比較
ポイント
ガイド
おわりに

背景

SvelteKitでの認証について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

認証

Auth（認証）とは、Webアプリケーションを構築する際によく必要となる、認証(Authentication)と認可(Authorization)を指します。認証とは、ユーザーが提供した資格情報に基づいて、そのユーザーが主張する本人であることを確認することです。認可とは、そのユーザーがどのような操作を行うことを許可されているかを判断することです。

認証(Authentication)

よく「Auth」や「認証」と略されます
ユーザーの身元確認のプロセス
例：ユーザー名とパスワードでログインする
「あなたは誰ですか？」という質問に答えるプロセス

認可(Authorization)

アクセス制御を管理するプロセス
ユーザーの権限を定義する
例：管理者は全機能にアクセス可能、一般ユーザーは限定機能のみ
「あなたは何ができますか？」という質問に答えるプロセス

この2つの概念は密接に関連していますが、異なる役割を果たします。まず認証でユーザーを確認し、その後認可でそのユーザーの権限を確認する、という流れが一般的です。

セッションとトークン

ユーザーがユーザー名やパスワードなどの認証情報を提供した後、今後のリクエストの際に再度認証情報を提供する必要なく、アプリケーションを使用できるようにしたいと考えます。subsequent（後続の）リクエストでは、通常、セッションIDまたはJSON Web Token（JWT）などの署名付きトークンを使用してユーザーを認証します。

セッションIDは、最も一般的にデータベースに保存されます。これらは即座に無効化することができますが、リクエストごとにデータベースへの問い合わせが必要となります。

対照的に、JWTは一般的にデータストアでチェックされることがないため、即座に無効化することはできません。このメソッドの利点は、レイテンシーが改善され、データストアの負荷が軽減されることです。

セッションベースの認証

データベースにセッションIDを保存
特徴：
- 各リクエストでDBを確認
- 即座に無効化が可能
- サーバーサイドでの管理が必要
- メモリ/DBリソースを消費

トークンベースの認証（JWT）

トークン自体に情報を含む
特徴：
- DBチェック不要
- パフォーマンスが良い
- スケーラビリティが高い
- 即座の無効化が難しい

実務的な比較

セッション方式を選ぶケース：

セキュリティ要件が厳しい
即座のログアウト機能が必要
小規模なアプリケーション

JWTを選ぶケース：

マイクロサービスアーキテクチャ
高パフォーマンスが必要
分散システム
モバイルアプリのバックエンド

これらの選択は、アプリケーションの要件や規模によって適切な方式を選ぶ必要があります。

ポイント

認証用クッキーはサーバーフックの内部でチェックできます。提供された認証情報に一致するユーザーが見つかった場合、そのユーザー情報は`locals`に保存することができます。

認証クッキー（Auth cookies）

ブラウザに保存される認証情報
セッションIDやトークンを含む
各リクエストと共に自動的に送信される

サーバーフック（Server hooks）

リクエスト処理の過程で実行される関数
認証チェックなどの共通処理を実装する場所
リクエストの前処理として動作

locals

リクエスト処理中でデータを共有するための一時的なストレージ
そのリクエストのライフサイクル内でのみ有効
ユーザー情報など、リクエスト処理中に必要なデータを保持

実装例のイメージ：

// サーバーフックの例
app.use(async (req, res, next) => {
  const authCookie = req.cookies.auth;
  if (authCookie) {
    const user = await validateUser(authCookie);
    if (user) {
      // localsにユーザー情報を保存
      res.locals.user = user;
    }
  }
  next();
});

この仕組みにより：

各リクエストでユーザーの認証状態を確認
認証済みユーザーの情報を後続の処理で利用可能
セキュアなユーザー認証の実装が可能

ガイド

Luciaは、セッションベースのWebアプリケーション認証のリファレンスです。SvelteKitや他のJSプロジェクトでセッションベースの認証を実装するためのコードスニペットとプロジェクト例が含まれています。新規プロジェクトを作成する際は`npx sv create`で、既存のプロジェクトの場合は`npx sv add lucia`でLuciaガイドに従ったコードをプロジェクトに追加できます。

認証システムはWebフレームワークと密接に結合しています。これは、コードの大部分がユーザー入力の検証、エラー処理、ユーザーを適切な次のページへ誘導することにあるためです。その結果、多くの汎用JS認証ライブラリには、1つ以上のWebフレームワークが含まれています。このため、多くのユーザーは、プロジェクト内に複数のWebフレームワークを持つよりも、Luciaにあるような SvelteKit固有のガイドに従う方が望ましいと感じるでしょう。