SvelteKitでBasic認証する

2023-10-01

概要

SvelteKitを使ったWebページにBasic認証を導入するだけ。Hooks機能を使う。

Basic認証ってなんぞな人はこちら: https://wa3.i-3-i.info/word164.html

導入手順

環境変数の追加

わかりやすい名前(ここではADMIN_BASE_LOGINとする)の環境変数に[username]:[password]の形で値を設定する。username、passwordは任意。

ローカルなら.envファイル、本番環境ならホスティング先に環境変数を追加する。

src/hooks.server.tsの追加

srcディレクトリ直下に以下の内容のファイルを作成する。

import type { Handle } from '@sveltejs/kit';
import { ADMIN_BASE_LOGIN } from '$env/static/private';

export const handle: Handle = async ({ event, resolve }) => {
	const auth = event.request.headers.get('Authorization');

	if (auth !== `Basic ${btoa(ADMIN_BASE_LOGIN)}`)
		return new Response('Unauthorized', {
			status: 401,
			headers: {
				'WWW-Authenticate': 'Basic realm="User Visible Realm", charset="UTF-8'
			}
		});

	return await resolve(event);
};

リクエストヘッダのAuthorizationフィールドにBasic ~~~の形(~~~には[username]:[password]をBase64エンコードした値が入る)で値がセットされるので、環境変数をBase64エンコードしたのと照合する。認証に成功したらリダイレクトされる。