SvelteKitにユーザー認証を導入してみる

SvelteでOAuth認証でのログインを簡単に実装する方法を紹介します。

認証ライブラリ「Svault」

Svaultは、SvelteKitのアプリにユーザー認証（OAuth、ネイティブ認証）を導入できるオープンソースのライブラリです。
https://github.com/oslabs-beta/Svault

OAuthについては、現状以下のサービスをサポートしています。

• Google
• Github
• Discord

導入手順

1. SvelteKitプロジェクトを作成する(Svelte 4でないとエラーになるので注意)
2. プロジェクトフォルダにて、コマンド「npm install svault」を実行する
3. srcフォルダにhooks.server.tsを作成する

hooks.server.ts

// Import if you would like to use Oauth login (necessary for all Oauth)
import { SvaultOauth } from 'svault';


// Import if you would like to use Github Oauth
import { github } from 'svault';
import { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } from '$env/static/private';


// Import if you would like to use Google Oauth
import { google } from 'svault';
import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET } from '$env/static/private';
// Google callback urls have to match the callback url you setup in your development app so paste it here to pass into the Oauth function
const googleCallback = 'http://localhost:5173/oauth/google/validate';


// Import if you would like to use Discord Oauth
import { discord } from 'svault';
import { DISCORD_CLIENT_ID, DISCORD_CLIENT_SECRET } from "$env/static/private";
// Discord callback urls have to match the callback url you setup in your development app so paste it here to pass into the Oauth function
const discordCallback = 'http://localhost:5173/oauth/discord/validate';


// Set redirect path to your desired endpoint upon user login
const redirectPath = '/redirectPage'; //ex. 'const redirectPath = '/redirectPage'


// Place the Oauth providers here
const providers = [
    github(GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, redirectPath),
    google(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, redirectPath, googleCallback),
    discord(DISCORD_CLIENT_ID, DISCORD_CLIENT_SECRET, redirectPath, discordCallback)
];

// Svault Oauth handler
export const handle = SvaultOauth({ providers });

4. .envファイルを作成し、利用対象のサービスのクライアントIDとシークレットを登録する

// Paste if using Discord Oauth
DISCORD_CLIENT_ID = YOURIDHERE
DISCORD_CLIENT_SECRET = YOURSECRETHERE

// Paste if using Github Oauth
GITHUB_CLIENT_ID = YOURIDHERE
GITHUB_CLIENT_SECRET = YOURSECRETHERE

// Paste if using Google Oauth
GOOGLE_CLIENT_ID = YOURIDHERE
GOOGLE_CLIENT_SECRET = YOURSECRETHERE

５. ログインページの+page.svelteファイルに対象プロバイダーのボタンを追加する

+page.svelte

<button>
    <a href="/oauth/discord/auth">Discord</a>
</button>

6. リダイレクト先のページを作成する（redirectPage/+page.svelte）

動作確認

1. npm run devでサービスを開始する
2. http://localhost:5173/にアクセスする
3. ログイン画面に追加したボタンをクリックする（今回はDiscord）
4. 認証確認画面が表示されたらOK
   

認証後に指定したリダイレクトURLが表示されるはずです。

まとめ

まだまだ発展途上中であるSvaultですが、欲しい機能などがあるので、開発に貢献してみようかと考えています😎