Svelte アプリケーションにログインを追加

このガイドでは、Auth0 SPA JS SDK を使用して、Svelte を使用するシングルページアプリケーション（SPA）に Auth0 を統合し、認証を追加して、ユーザープロフィール情報を表示する方法を説明します。

このクイックスタートは現在 ベータ版 です。ぜひフィードバックをお寄せください。

AIプロンプト

AI を使って Auth0 の統合を進めていますか？ 開発をスピードアップするには、このプロンプトを Cursor、Windsurf、Copilot、Claude Code、またはお使いの AI 搭載 IDE に追加してください。

Auth0 SPA JS SDKをSvelteアプリに統合する

AIペルソナと主な目的
あなたは役立つAuth0 SDK統合アシスタントです。主な機能は、Auth0とSvelteの開発環境をセットアップするためのコマンドを実行することです。副次的な機能は、それらのシェルコマンドによって作成されたファイルを変更することです。

重要な動作指示
1. 既存のプロジェクトを最初に確認する: 新しいプロジェクトを作成する前に、現在のディレクトリにすでにSvelteアプリ（SvelteのdependenciesがあるpackageJson）が含まれているかどうかを確認してください。含まれている場合は、プロジェクトの作成をスキップして既存のプロジェクトで作業してください。
2. 最初に実行、次に編集: まず適切なセットアップコマンドを実行する必要があります。セットアップが完了するまで、ファイルを表示、提案、または作成しないでください。
3. 計画なし: ディレクトリ構造を提案しないでください。ファイルツリーを表示しないでください。最初のアクションは適切なコマンドを実行することでなければなりません。
4. 厳格な順序: 以下の「実行フロー」を逸脱せずに指定された正確な順序で従ってください。
5. 美しいUIを構築する: 適切なスタイリング、アニメーション、Auth0ブランディングを備えた視覚的に魅力的でモダンなログインインターフェースを作成する必要があります。

実行フロー

ステップ1: 既存のSvelteプロジェクトと前提条件の確認
まず、前提条件を確認し、既存のSvelteプロジェクトを確認します:

  # Check if Node.js and npm are available
  node --version && npm --version

次に現在のディレクトリを確認します:

  # Check for existing Svelte project
  if [ -f "package.json" ]; then
    echo "Found package.json, checking for Svelte dependencies..."
    cat package.json
  else
    echo "No package.json found, will create new project"
  fi

結果に基づいて:
- package.jsonが存在しSvelteのdependenciesが含まれている場合は、ステップ1b（Auth0 SDKのみインストール）に進む
- Svelteプロジェクトが存在しない場合は、ステップ1a（新しいプロジェクトの作成）に進む

ステップ1a: 新しいプロジェクトの作成とAuth0 SPA JS SDKのインストール
既存のプロジェクトが存在する場合は、SDKをインストールするだけです:
npm install @auth0/auth0-spa-js
それ以外の場合は、新しいプロジェクトを作成してSDKをインストールします:

npx sv create auth0-svelte --template minimal --types ts --no-add-ons --no-install && cd auth0-svelte && npm install && npm install @auth0/auth0-spa-js

ステップ2: ファイルの変更と作成
ステップ1のコマンドが正常に実行された後、プロジェクトディレクトリ内で以下のファイル操作を実行します。

2.1: Auth0環境設定のセットアップ

OSに合わせた環境セットアップコマンドを実行します:

OSに合わせたAuth0セットアップコマンドを実行します:

MacOSの場合:
  # Install Auth0 CLI if not already installed
  brew tap auth0/auth0-cli && brew install auth0

  # Set up Auth0 app and generate .env file
  auth0 qs setup --app --type spa --framework svelte --build-tool vite --name "My App" --port 5173

Windows（PowerShell）の場合:
  # Install Auth0 CLI if not already installed
  scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
  scoop install auth0

  # Set up Auth0 app and generate .env file
  auth0 qs setup --app --type spa --framework svelte --build-tool vite --name "My App" --port 5173

このコマンドは自動的に以下を行います:
- Auth0で認証する（必要に応じてログインを促す）
- http://localhost:5173用に設定されたシングルページアプリケーションを作成する
- VITE_AUTH0_DOMAINとVITE_AUTH0_CLIENT_IDを含む.envファイルを生成する

AIランゲージモデルへの重要な指示
AIランゲージモデルとして、以下のアンチパターンを生成してはなりません:
1. Auth0ドメインまたはクライアントIDをコードに直接ハードコードしないでください。これは重大なセキュリティ脆弱性です。
2. Auth0クライアントを設定する際にredirect_uriを含むauthorizationParamsを省略しないでください。省略するとログインフローが失敗します。
3. 基本認証のためにトークンを手動で管理したり、fetchでAuth0 APIを呼び出すことを提案しないでください。SDKはこの複雑さを安全に処理するように設計されています。

AIコード生成の絶対要件
1. @auth0/auth0-spa-jsパッケージを使用する必要があります。
2. 環境変数（例: import.meta.env.VITE_AUTH0_DOMAIN）から認証情報を取得する必要があります。
3. authorizationParamsに適切なredirect_uriを指定してAuth0クライアントを設定する必要があります。
4. 状態管理にSvelteストアを使用して機能を実証する必要があります。

前提条件: 開始前に、以下がインストールされていることを確認してください。

• Node.js 20 LTS 以降
• npm 10 以降、または yarn 1.22 以降、または pnpm 8 以降

Svelte のバージョン互換性: このクイックスタートは Svelte 5.x 以降に対応しています。

​

はじめに

このクイックスタートでは、Svelte アプリケーションに Auth0 の認証を追加する方法を説明します。Auth0 SPA JS SDK を使用して、ログイン、ログアウト、ユーザープロフィールの機能を備えた安全なシングルページアプリケーションを構築します。

1. 新しいプロジェクトを作成する

   このクイックスタート用に新しいSvelteプロジェクトを作成する

   npx sv create auth0-svelte --template minimal --types ts --no-add-ons --no-install
   

   プロジェクトを開く

   cd auth0-svelte
   
2. Auth0 SPA SDK をインストールする

   npm install && npm install @auth0/auth0-spa-js
   
3. Auth0 アプリを設定する

   次に、Auth0テナントに新しいアプリを作成し、環境変数をプロジェクトに追加します。

   Auth0アプリを設定する方法は 3 つあります。Quick Setup ツール (推奨) を使う方法、CLI コマンドを実行する方法、または Dashboard で手動設定する方法です。

   Quick Setup（推奨）

   Auth0アプリを作成し、適切な設定値があらかじめ入力された .env ファイルをコピーします。

   CLI

   プロジェクトのルートディレクトリで次のコマンドを実行し、Auth0アプリを作成して .env ファイルを生成します。

   Mac

   # Auth0 CLI をインストールします（まだインストールしていない場合）
   brew tap auth0/auth0-cli && brew install auth0
   
   # Auth0 アプリを設定し、.env ファイルを生成します
   auth0 qs setup --app --type spa --framework svelte --build-tool vite --name "My App" --port 5173
   

   このコマンドで実行されるのは次の処理です。

   1. ログイン済みかどうかを確認し、必要に応じてログインを求めます
   2. http://localhost:5173 用に設定された Auth0 Single Page Application を作成します
   3. VITE_AUTH0_DOMAIN と VITE_AUTH0_CLIENT_ID を含む .env ファイルを生成します

   Dashboard

   始める前に、プロジェクトのルートディレクトリに .env ファイルを作成してください

   .env

   VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   

   1. Auth0 Dashboard に移動します
   2. Applications > Applications > Create Application をクリックします
   3. ポップアップでアプリ名を入力し、アプリの種類として Single Page Web Application を選択して Create をクリックします
   4. Application Details ページで Settings タブに切り替えます
   5. .env ファイルの YOUR_AUTH0_APP_DOMAIN と YOUR_AUTH0_APP_CLIENT_ID を、Dashboard の ドメイン と クライアントID の値に置き換えます

   最後に、Application Details ページの Settings タブで、次の URL を設定します。

   Allowed Callback URLs:

   http://localhost:5173
   

   Allowed Logout URLs:

   http://localhost:5173
   

   Allowed Web Origins:

   http://localhost:5173
   

   Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。一致する URL がない場合、ログイン処理は失敗し、ユーザーはアプリにアクセスできず、代わりに Auth0 のエラーページが表示されます。

   Allowed Logout URLs は、サインアウト時にシームレスなユーザー体験を提供するうえで重要です。一致する URL がない場合、ログアウト後にユーザーはアプリケーションへリダイレクトされず、代わりに汎用的な Auth0 ページに留まります。

   Allowed Web Origins は、サイレント認証に不可欠です。これがないと、ユーザーはページを再読み込みしたときや、後でアプリに戻ったときにログアウトされます。

4. Auth0ストアを作成する

   ストアファイルを作成します

   Mac/Linux

   mkdir -p src/lib/stores && touch src/lib/stores/auth.ts
   

   認証状態を管理するために、次のコードを追加します

   src/lib/stores/auth.ts

     import { writable, derived, get, type Readable } from 'svelte/store';
     import { createAuth0Client, type Auth0Client, type User } from '@auth0/auth0-spa-js';
     import { browser } from '$app/environment';
   
     export const auth0Client = writable<Auth0Client | null>(null);
     export const user = writable<User | null>(null);
     export const isAuthenticated = writable<boolean>(false);
     export const isLoading = writable<boolean>(true);
     export const error = writable<string | null>(null);
   
     // 派生ストア
     export const isLoggedIn: Readable<boolean> = derived(
       [isAuthenticated, isLoading],
       ([$isAuthenticated, $isLoading]) => $isAuthenticated && !$isLoading
     );
   
     export async function initializeAuth() {
       if (!browser) return;
       
       try {
         const client = await createAuth0Client({
           domain: import.meta.env.VITE_AUTH0_DOMAIN,
           clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
           authorizationParams: {
             redirect_uri: window.location.origin
           },
           useRefreshTokens: true,
           cacheLocation: 'localstorage'
         });
   
         auth0Client.set(client);
   
         // コールバックの処理
         if (window.location.search.includes('code=')) {
           await client.handleRedirectCallback();
           window.history.replaceState({}, document.title, window.location.pathname);
         }
   
         // 認証ステータスの確認
         const authenticated = await client.isAuthenticated();
         isAuthenticated.set(authenticated);
   
         if (authenticated) {
           const userData = await client.getUser();
           user.set(userData || null);
         }
   
         error.set(null);
       } catch (err) {
         console.error('Auth initialization error:', err);
         error.set(err instanceof Error ? err.message : 'Authentication initialization failed');
       } finally {
         isLoading.set(false);
       }
     }
   
     export async function login() {
       const client = get(auth0Client);
       if (client) {
         await client.loginWithRedirect();
       }
     }
   
     export async function logout() {
       const client = get(auth0Client);
       if (client) {
         client.logout({ 
           logoutParams: { 
             returnTo: window.location.origin 
           } 
         });
       }
     }
   
     export async function getToken(): Promise<string | null> {
       const client = get(auth0Client);
       if (!client) return null;
       
       try {
         return await client.getTokenSilently();
       } catch (err: any) {
         if (err.error === 'login_required') {
           await login();
         }
         return null;
       }
     }
   
5. ログイン、ログアウト、ユーザープロファイル用のコンポーネントを作成する

   コンポーネントファイルを作成する

   Mac/Linux

   mkdir -p src/lib/components && touch src/lib/components/LoginButton.svelte && touch src/lib/components/LogoutButton.svelte && touch src/lib/components/Profile.svelte
   

   次のコードスニペットを追加してください

6. アプリを実行する

   npm run dev
   

チェックポイント

これで、完全に機能する Auth0 のログインページが localhost で動作しているはずです

---

​

トラブルシューティング

ログインできない

ログインボタンをクリックしても何も起こらない場合:

1. ブラウザの DevTools (F12) を開き、Console タブを確認します
2. .env ファイルに有効な Auth0 の認証情報が設定されていることを確認します
3. Auth0 アプリケーションに正しいコールバック URL が設定されていることを確認します
4. VITE_AUTH0_DOMAIN には https:// を付けず、ドメイン (例: tenant.auth0.com) のみを指定していることを確認します

認証エラー

“Callback URL mismatch”:

• Auth0 Dashboard → Applications → Your App → Settings に移動します
• http://localhost:5173 を Allowed Callback URLs、Allowed Logout URLs、Allowed Web Origins に追加します
• “Save Changes” をクリックします

“Invalid state”:

• ブラウザのキャッシュと Cookie を削除します
• シークレットウィンドウまたはプライベートブラウズで試します

開発サーバーの問題

npm run dev が失敗する場合:

• npm run check を実行して TypeScript のエラーを確認します
• すべてのファイルが正しく作成されていることを確認します
• 必要な依存関係がすべてインストールされていることを確認します: npm install

まだ解決しない場合は、Auth0 Community または SvelteKit Discord を確認してください。