はじめに

SvelteKitでのセッション管理のライブラリを探してみると、どうやらCookieにセッション情報を保存するようなものや、ストアがRedisに固定化されているものしかないようだった（探し方が悪いのかもしれないが…）。

個人的にはExpressでの開発経験があり、その時に利用していたexpress-sessionのように自由にストアを選べ、セッション情報はストアに保存するようなセッション管理のモジュールで、SvelteKitでのセッション管理も実現されると望ましいのではと考えていた。

そこで、svelte-kit-sessionsというストアの利用を前提としたセッション管理モジュールを開発・公開してみたので、今回はそれを利用してどのようにセッション管理を実装できるか？を取り上げたいと思う。

svelte-kit-sessionsの概要

svelte-kit-sessionsは、CookieにセッションID（+署名）を焼き、そのCookieのセッションIDをストアのキーにしてセッション情報を保存し、セッションがあればストアから保存されているセッション情報を取りだし、SvelteKitのActionsやAPI routes、Server hooks(handle)で利用できるようにするモジュール。

つまりは、以下のような図に描かれていることを、SvelteKitで簡単に実現することができるモジュール。

具体的な利用方法はREADMEのUsageセクションに記載しているが、それぞれ以下のような使用感になる。

Actions

ユーザーの認証を行い、セッションを作成する。

src/routes/login/+page.server.ts

import type { ServerLoad, Actions } from '@sveltejs/kit';
import db from '$lib/server/db.ts';

export const load: ServerLoad = async ({ locals }) => {
	const { session } = locals; // you can access `locals.session`
	const user = await db.getUserFromId(session.data.userId);
	return { user };
};

export const actions: Actions = {
	login: async ({ request, locals }) => {
		const { session } = locals; // you can access `locals.session`

		const data = await request.formData();
		const email = data.get('email');
		const password = data.get('password');
		const user = await db.getUser(email, password);

		await session.setData({ userId: user.id, name: user.name }); // set data to session
		await session.save(); // session saveand session create(session data is stored and set-cookie)

		return { success: true };
	},
	...
};

API route

セッションを持っているユーザーでTODOを作成する際に、TODOの作成者をセッションのuserIdにして作成する。

src/routes/api/todo/+server.ts

import { json, type RequestEvent, type RequestHandler } from '@sveltejs/kit';
import db from '$lib/server/db.ts';

interface TodoBody {
	title: string;
	memo: string;
}

export const POST: RequestHandler = async (event: RequestEvent) => {
	const { session } = event.locals; // you can access `event.locals.session`

	const { title, memo } = (await event.request.json()) as TodoBody;
	const todoId = await db.createTodo({ title, memo, userId: session.data.userId });

	return json({ id: todoId }, { status: 200 });
};

Server hooks(handle)

認証後のセッションを持っていないアクセスの場合、ログイン画面にリダイレクトする。

src/hooks.server.ts

import { redirect, type Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { sveltekitSessionHandle } from 'svelte-kit-sessions';
import RedisStore from 'svelte-kit-connect-redis';
import { Redis } from 'ioredis';

const client = new Redis({
	host: '{your redis host}',
	port: 6379
});

const checkAuthorizationHandle: Handle = async ({ event, resolve }) => {
	// `event.locals.session` is available
	if (!event.locals.session.data.userId) redirect(307, '/login');

	const result = await resolve(event);
	return result;
};

export const handle: Handle = sequence(
	sveltekitSessionHandle({ secret: 'secret', store: new RedisStore({ client }) }),
	checkAuthorizationHandle
);

参考：https://kit.svelte.jp/docs/load#redirects

svelte-kit-sessionsの機能・ポイント

svelte-kit-sessionsには、以下のような機能・ポイントがある（どれもないと困る当たり前といえば当たり前の機能なのだが…）。

自由にストアを選択できる
セッションの設定が柔軟にできる
- 初期化せずセッションを作成できる
- セッションのexpire（期限）を自動で更新できる
- セッションハイジャック防止のためのセッションの再生成ができる
- Cookieの署名シークレットを複数指定でき、シークレットローテーションができる

自由にストアを選択できる

Compatible Session Storesというセクションに複数のストアが列挙されているように、セッションのストアは自由に選択できる。

Compatible Session Storesに載っていないストアでも、Session Store Implementationのセクションに書かれているインターフェースを満たすクラスを実装すれば、独自のストアを利用することも可能になっている。

セッションの設定が柔軟にできる

初期化せずセッションを作成できる

saveUninitializedというオプションをtrueにすると、svelte-kit-sessionsの方で自動的にセッションを作成するように設定できる。

ログインを行い、初めてセッションを払い出すようなパターンではこのオプションはfalseにすべきだが、そうでなくアクセスがあったら即セッションを払い出す場合には便利なオプション。

セッションのexpire（期限）を自動で更新できる

rollingというオプションをtrueにすると、自動的にcookieのオプションであるmaxAgeの時間だけセッションの有効期限を延ばすように設定できる。

セッションハイジャック防止のためのセッションの再生成ができる

セッションハイジャックの防止のために、ログイン前とログイン後のセッションは別のものにする必要があるが、session.regenerate()というメソッドにより簡単に実装できる。

例えば、OpenID Connectによる認証を行う際のstateやcodeVerifierなどを保存するセッションと、callback後のログイン後のセッションは別ものにすべきだが、その場合には以下のような実装ができるだろう（ここで言うOpenID ConnectのフローはAuthorization Code Flowで、scopeにopenid, profileなど指定してIDトークン＋ユーザー情報をもらうような想定）。

src/hooks.server.ts

import { redirect, type Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { sveltekitSessionHandle } from 'svelte-kit-sessions';
import RedisStore from 'svelte-kit-connect-redis';
import { Redis } from 'ioredis';
import oauthClient from '$lib/server/oauth-client.js'; // OpenID Connect(OAuth2.0)のためのライブラリとする

const client = new Redis({
	host: '{your redis host}',
	port: 6379
});

const checkAuthHandle: Handle = async ({ event, resolve }) => {
    // callbackのエンドポイント、一時トークンを利用してIDトークンなどを取得する
	if (event.url.pathname === '/oauth/callback' && event.request.method === 'GET') {
        // `event.locals.session` is available
		if (event.locals.session.data.state !== event.params.state) throw Error('Invalid state.');

		const data = await oauthClient.callback({
			request: event.request,
			state: event.locals.session.data.state,
			codeVerifier: event.locals.session.data.codeVerifier
		});

		const newSession = await session.regenerate();
		await newSession.setData({ userId: data.sub, email: data.email, name: data.name });
		await newSession.save();
		throw redirect(302, '/');
	}

	// セッションがないのでAuthorization Code Flowを開始する
	if (!event.locals.session.data.userId) { 
		const { authUri, state, codeVerifier } = oauthClient.start();
		await event.locals.session.setData({ state, codeVerifier });
		await event.locals.session.save();
		throw redirect(302, authUri);
	}

	const result = await resolve(event);
	return result;
};

export const handle: Handle = sequence(
	sveltekitSessionHandle({ secret: 'secret', store: new RedisStore({ client }) }),
	checkAuthHandle
);

※上記はサンプルコードとしてhooks.server.tsにAuthorization Code Flowの実装をしているが、実際にはちゃんとAPI Rotesなどに切り出すべきだろう。

Cookieの署名シークレットを複数指定でき、シークレットローテーションができる

secretというオプションには文字列の他に、文字列の配列を設定できるようになっており、Cookieの署名シークレットを定期的に更新しつつ、既存のCookieが無効にならないようにできる。

具体的には、secretに["secret2", "secret1"]のように設定することで、もともと利用していた"secret1"を無効にせずに新しい"secret2"というシークレットを追加できるようになっている。複数シークレットが設定されている場合、Cookieの署名で使用されるシークレットは配列の1番目のシークレットになる。

まとめとして

svelte-kit-sessionsというSvelteKitでストアの利用を前提としたセッション管理モジュールについて、その機能・ポイントについてまとめてみた。

SvelteKitの開発でセッション管理の仕組みを組み込みたいときには、svelte-kit-sessionsが便利だと思うので、利用頂いてどなたかの役に立てば幸いです。