🙆

Clerkで超簡単に!SvelteKitアプリのユーザー認証を導入する方法

2025/01/30に公開

はじめに

Clerkは、モダンな認証とユーザー管理を提供するサービスです。サインイン、サインアップ、セッション管理、さらには多要素認証(MFA)など、開発者が面倒な認証ロジックを簡単に実装できるように設計されています。また、カスタマイズ性も高く、UIコンポーネントやAPIを利用して柔軟に組み込むことが可能です。
ただし、2025/01/29現在、Reactをベースとするフレームワークでの使用が前提となっていて、SvelteKitでの使用は公式のサポートはありませんでした。
有志のコミュニティでSvelteKit(svelte5)でClerkを使用できるパッケージがあったので、そちらの紹介・導入方法を解説します。

前提条件

この記事を始める前に、以下が完了している必要があります:

  • SvelteKitのセットアップが完了していること
  • Svelte 5を使用していること

Clerkのセットアップ

  1. Clerkのウェブサイトでアカウントを作成します。
  2. プロジェクトを作成し、プロジェクト設定ページに移動します。
  3. Configure > API keys から以下の情報を確認します:
    • Publishable Key
    • Secret Keys

SvelteKitにClerkを統合する

基本的な流れは、こちらのプロジェクトに記載の通り進めます。

  1. パッケージのインストール

    npm install svelte-clerk
    
  2. 環境変数にClerk APIを設定

    プロジェクトの.envファイルにClerkのセットアップに確認した、Publishable KeyとSecret Keysを定義する

    PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxx
    CLERK_SECRET_KEY=sk_test_xxxxxxx
    
  3. server handlerの設定

    src/hooks.server.tsに以下のコードを追加します。

    import { withClerkHandler } from 'svelte-clerk/server';
    
    export const handle = withClerkHandler();
    
  4. app.d.tsの修正

    src/app.d.tsの先頭にトリプルスラッシュの参照ディレクティブを追記します。

    /// <reference types="svelte-clerk/env" />
    
  5. <ClerkProvider>をルートレイアウトに追加

    ドキュメントにはsrc/+layout.server.tsとありますが、src/routes/+layout.server.tsに下記を追加するのが正しいと思います。

    import { buildClerkProps } from 'svelte-clerk/server';
    
    export const load = ({ locals }) => {
     return {
       ...buildClerkProps(locals.auth)
     };
    };
    

    src/routes/+layout.svelteに下記を追加します。

    <script lang="ts">
    import type { Snippet } from 'svelte';
    import { ClerkProvider } from 'svelte-clerk';
    
    const { children }: { children: Snippet } = $props();
    </script>
    
    <ClerkProvider>
     {@render children()}
    </ClerkProvider>
    

認証の実装

  1. サインインコンポーネント

    Clerkが提供するサインインコンポーネントを使います。

    src/routes/sign-in/+page.svelteを作成し、以下を追加します。
    (tailwind cssを使用している部分はお好みで調節してください)

    <script>
    import { SignIn } from "svelte-clerk";
    </script>
    
    <div class="flex justify-center items-center h-screen">
     <SignIn />
    </div>
    

    こんな感じでClerkの提供するコンポーネントが表示されました!
    Clerk側の設定で認証方法を設定できます。

    ※日本語化する方法は記事の終わりにおまけを書いているのでそちらを参照してください。

  2. サインイン後のプロフィール設定用コンポーネント

    配置先は任意ですが、例としてトップページ(src/routes/+page.svelte)にサインインしていたら、プロフィールアイコンと、アカウント設定が可能なコンポーネントを配置します。

    <script>
        import {
            SignedIn,
            UserButton,
        } from "svelte-clerk";
    </script>
    
    <div>
        <h1>Index Route</h1>
        <SignedIn>
         <UserButton />
        </SignedIn>
    </div>
    

    これだけで、プロフィールアイコンからユーザー名の変更やパスワード変更といった基本操作が可能になります!(すごい!!)


おまけ(日本語化)

Clerkが提供するコンポーネントを日本語化するには、公式ドキュメントに記載の通り設定すればうまくできました。

npm install @clerk/localizations
// src/routes/+layout.svelte
<script lang="ts">
	import { ClerkProvider } from "svelte-clerk";
	import { jaJP } from "@clerk/localizations";

	const { children }: { children: Snippet } = $props();
</script>

<ClerkProvider localization={jaJP}>
	{@render children()}
</ClerkProvider>

まとめ

これで、SvelteKitアプリケーションにClerkを使用した認証機能を追加できました。Clerkを活用することで、モダンでセキュアな認証を簡単に実装できます。
Auth0 なんかも試してみて、あまりしっくりこなかったのですがClerkはすごく開発者体験が良いと感じました。

参考

Discussion