> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript アプリケーションにログイン機能を追加する

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              processedNode = processedNode.replace(new RegExp(key, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

<Accordion title="AI プロンプト" defaultOpen icon="microchip-ai" iconType="sharp-solid">
  **AIを使ってAuth0を統合しますか?** このプロンプトをCursor、Windsurf、Copilot、Claude Code、またはお好みのAI搭載IDEに追加して、開発を高速化しましょう。

  ```markdown expandable theme={null}
  Auth0 SPA JS SDKをVanilla JavaScriptアプリに統合する

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

  重要な動作指示
  1.  既存プロジェクトを最初に確認: 新しいプロジェクトを作成する前に、現在のディレクトリにすでにVanilla JavaScriptアプリ(基本的な依存関係を含むpackage.json)が含まれているかどうかを確認してください。含まれている場合は、プロジェクトの作成をスキップして既存のプロジェクトで作業してください。
  2.  最初に実行、次に編集: 最初に適切なセットアップコマンドを実行する必要があります。セットアップが完了するまで、ファイルを表示、提案、または作成しないでください。
  3.  計画なし: ディレクトリ構造を提案しないでください。ファイルツリーを表示しないでください。最初のアクションは、適切なコマンドを実行することでなければなりません。
  4.  厳密な順序: 以下の「実行フロー」を指定された正確な順序で逸脱せずに従ってください。
  5.  美しいUIを構築: 適切なスタイリング、アニメーション、Auth0ブランディングを備えた、視覚的に魅力的でモダンなログインインターフェースを作成する必要があります。
  6.  🚨 ディレクトリナビゲーションルール: `cd auth0-vanillajs`やその他の`cd`コマンドを自動的に実行しないでください。常に最初に`pwd`で現在のディレクトリを確認してください。ユーザーがナビゲートする必要がある場合は、手動で行うように依頼するか、ディレクトリ変更コマンドを実行する前に確認してください。

  実行フロー

  ⚠️ 重要: コマンドを実行する前に、`pwd`を実行して現在のディレクトリを確認し、明示的なユーザーの許可なしにディレクトリを変更しないでください。

  Step 1: 既存のVanilla JSプロジェクトと前提条件を確認
  最初に、前提条件を確認し、既存のプロジェクトをチェックします:

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

  Then examine the current directory:

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

  結果に基づいて:
  - package.jsonが存在し、基本的な依存関係が含まれている場合は、Step 1b(Auth0 SDKのみをインストール)に進みます
  - プロジェクトが存在しない場合は、Step 1a(新しいプロジェクトを作成)に進みます

  Step 1a: 新しいプロジェクトを作成してAuth0 SPA JS SDKをインストール
  既存のプロジェクトが存在する場合は、単にSDKをインストールします:
  npm install @auth0/auth0-spa-js

  ⚠️ CDN代替: ビルドツールを使用したくない場合は、npmの代わりにCDN経由でSDKを含めることができます:
  <script src="https://cdn.auth0.com/js/auth0-spa-js/2.4/auth0-spa-js.production.js"></script>
  その後、グローバルauth0オブジェクトを使用します: インポートの代わりにauth0.createAuth0Client({...})を使用します。

  それ以外の場合は、新しいプロジェクトを作成してSDKをインストールします:

  ⚠️ 重要: プロジェクトの作成により、サブディレクトリではなく現在のディレクトリにプロジェクトファイルが作成される場合があります。このコマンドを実行した後、続行する前に現在のディレクトリの内容を確認して、実際のプロジェクト構造を判断してください。

  mkdir auth0-vanillajs && cd auth0-vanillajs && npm init -y && npm install --save-dev vite && npm install @auth0/auth0-spa-js && touch index.html app.js style.css


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

  🚨 ディレクトリナビゲーションルール:
  1. 明示的なユーザーの確認なしに`cd`コマンドを自動的に実行しないでください
  2. 続行する前に常に`pwd`で現在のディレクトリを確認してください
  3. 既存のプロジェクトで作業している場合: 現在のディレクトリに留まります
  4. 新しいプロジェクトを作成した場合: ユーザーは最初にauth0-vanillajsディレクトリに手動でナビゲートする必要があります

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

  ⚠️ 重要: 続行する前に、現在のディレクトリを確認してください:
  - 新しいプロジェクトを作成したばかりの場合: auth0-vanillajsディレクトリ内にいる必要があります
  - 既存のプロジェクトで作業している場合: プロジェクトのルートディレクトリにいる必要があります
  - `cd auth0-vanillajs`コマンドを実行しないでください - 最初に正しいディレクトリにナビゲートしてください

  Step 2.1a: プロジェクトディレクトリにナビゲート(必要な場合)してAuth0をセットアップ:

  # Only run this if you created a new project and are NOT already in auth0-vanillajs:
  cd auth0-vanillajs

  次に、OSに応じた環境セットアップコマンドを実行します:

  ⚠️ 重要なディレクトリ確認ステップ:
  Auth0 CLIセットアップコマンドを実行する前に、以下を実行する必要があります:

  pwd && ls -la

  これにより、メインディレクトリまたはサブディレクトリのどちらにいるか、プロジェクトが現在のディレクトリまたは新しいサブディレクトリに作成されたかどうかを理解できます。

  MacOSの場合、以下のコマンドを実行します:
  AUTH0_APP_NAME="My Vanilla JS App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t spa -c http://localhost:5173 -l http://localhost:5173 -o http://localhost:5173 --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "VITE_AUTH0_DOMAIN=${DOMAIN}" > .env.local && echo "VITE_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env.local && rm auth0-app-details.json && echo ".env.local file created with your Auth0 details:" && cat .env.local

  Windowsの場合、以下のコマンドを実行します:
  $AppName = "My Vanilla JS App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t spa -c http://localhost:5173 -l http://localhost:5173 -o http://localhost:5173 --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; Set-Content -Path .env.local -Value "VITE_AUTH0_DOMAIN=$Domain"; Add-Content -Path .env.local -Value "VITE_AUTH0_CLIENT_ID=$ClientId"; Remove-Item auth0-app-details.json; Write-Output ".env.local file created with your Auth0 details:"; Get-Content .env.local


  Step 2.1b: 手動の.env.localテンプレートを作成(自動セットアップが失敗した場合)

  cat > .env.local << 'EOF'
  # Auth0 Configuration - UPDATE THESE VALUES
  VITE_AUTH0_DOMAIN=your-auth0-domain.auth0.com
  VITE_AUTH0_CLIENT_ID=your-auth0-client-id
  EOF

  Step 2.1c: 手動セットアップ手順を表示

  echo "📋 MANUAL SETUP REQUIRED:"
  echo "1. Go to https://manage.auth0.com/dashboard/"
  echo "2. Click 'Create Application' → Single Page Application"
  echo "3. Configure Application URLs:"
  echo "   - Allowed Callback URLs: http://localhost:5173"
  echo "   - Allowed Logout URLs: http://localhost:5173"
  echo "   - Allowed Web Origins: http://localhost:5173 (CRITICAL for silent auth)"
  echo "4. Update .env.local file with your Domain and Client ID"
  echo ""
  echo "⚠️  CRITICAL: Allowed Web Origins is required for silent authentication."
  echo "   Without it, users will be logged out when they refresh the page."
  echo ""
  echo "📝 NOTE: Ensure your Auth0 application is configured as 'Single Page Application'"
  echo "   type in the Auth0 Dashboard. Other application types won't work with this SDK."

  2.2: HTML構造を作成
  index.htmlの内容全体を置き換えます(存在しない場合は作成します):

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Auth0 Vanilla JS</title>
      <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div class="app-container">
        <!-- 読み込み状態 -->
        <div id="loading" class="loading-state">
          <div class="loading-text">読み込み中...</div>
        </div>

        <!-- エラー状態 -->
        <div id="error" class="error-state" style="display: none;">
          <div class="error-title">エラーが発生しました</div>
          <div class="error-message">問題が発生しました</div>
          <div id="error-details" class="error-sub-message"></div>
        </div>

        <!-- Main Content -->
        <div id="app" class="main-card-wrapper" style="display: none;">
          <img 
            src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-ondark.png" 
            alt="Auth0 Logo" 
            class="auth0-logo"
          />
          <h1 class="main-title">Sample0へようこそ</h1>
          
          <!-- Logged Out State -->
          <div id="logged-out" class="action-card">
            <p class="action-text">アカウントにサインインして開始</p>
            <button id="login-btn" class="button login">ログイン</button>
          </div>

          <!-- Logged In State -->
          <div id="logged-in" class="logged-in-section" style="display: none;">
            <div class="logged-in-message">✅ 認証に成功しました</div>
            <h2 class="profile-section-title">プロファイル</h2>
            <div id="profile" class="profile-card"></div>
            <button id="logout-btn" class="button logout">ログアウト</button>
          </div>
        </div>
      </div>

      <script type="module" src="app.js"></script>
    </body>
  </html>

  2.3: アプリケーションロジックを作成する
  app.jsの内容全体を、適切なエラー処理とAuth0統合を含む以下のコードに置き換えます:

  ⚠️ JavaScriptモジュールのガイドライン:
  - 適切なES6モジュールインポートを使用する
  - Auth0初期化の包括的なエラー処理を含める
  - 環境変数を使用する前に検証する
  - すべての認証状態(読み込み中、エラー、認証済み、未認証)を処理する

  import { createAuth0Client } from '@auth0/auth0-spa-js';

  // DOM要素
  const loading = document.getElementById('loading');
  const error = document.getElementById('error');
  const errorDetails = document.getElementById('error-details');
  const app = document.getElementById('app');
  const loggedOutSection = document.getElementById('logged-out');
  const loggedInSection = document.getElementById('logged-in');
  const loginBtn = document.getElementById('login-btn');
  const logoutBtn = document.getElementById('logout-btn');
  const profileContainer = document.getElementById('profile');

  let auth0Client;

  // Auth0クライアントを初期化
  async function initAuth0() {
    try {
      // 環境変数を検証
      const domain = import.meta.env.VITE_AUTH0_DOMAIN;
      const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

      if (!domain || !clientId) {
        throw new Error('Auth0設定が見つかりません。.env.localファイルでVITE_AUTH0_DOMAINとVITE_AUTH0_CLIENT_IDを確認してください');
      }

      // ドメイン形式を検証
      if (!domain.includes('.auth0.com') && !domain.includes('.us.auth0.com') && !domain.includes('.eu.auth0.com') && !domain.includes('.au.auth0.com')) {
        console.warn('Auth0ドメイン形式が正しくない可能性があります。期待される形式: your-domain.auth0.com');
      }

      auth0Client = await createAuth0Client({
        domain: domain,
        clientId: clientId,
        authorizationParams: {
          redirect_uri: window.location.origin
        }
      });

      // ユーザーがログインから戻ってきたかを確認
      if (window.location.search.includes('code=') && window.location.search.includes('state=')) {
        await handleRedirectCallback();
      }

      // 認証状態に基づいてUIを更新
      await updateUI();
    } catch (err) {
      console.error('Auth0初期化エラー:', err);
      showError(err.message);
    }
  }

  // リダイレクトコールバックを処理
  async function handleRedirectCallback() {
    try {
      await auth0Client.handleRedirectCallback();
      // クエリパラメータを削除するためURLをクリーンアップ
      window.history.replaceState({}, document.title, window.location.pathname);
    } catch (err) {
      console.error('リダイレクトコールバックエラー:', err);
      showError(err.message);
    }
  }

  // 認証状態に基づいてUIを更新
  async function updateUI() {
    try {
      const isAuthenticated = await auth0Client.isAuthenticated();
      
      if (isAuthenticated) {
        showLoggedIn();
        await displayProfile();
      } else {
        showLoggedOut();
      }
      
      hideLoading();
    } catch (err) {
      console.error('UI更新エラー:', err);
      showError(err.message);
    }
  }

  // ユーザープロファイルを表示
  async function displayProfile() {
    try {
      const user = await auth0Client.getUser();
      const placeholderImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='55' fill='%2363b3ed'/%3E%3Cpath d='M55 50c8.28 0 15-6.72 15-15s-6.72-15-15-15-15 6.72-15 15 6.72 15 15 15zm0 7.5c-10 0-30 5.02-30 15v3.75c0 2.07 1.68 3.75 3.75 3.75h52.5c2.07 0 3.75-1.68 3.75-3.75V72.5c0-9.98-20-15-30-15z' fill='%23fff'/%3E%3C/svg%3E`;
      
      profileContainer.innerHTML = `
        <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
          <img 
            src="${user.picture || placeholderImage}" 
            alt="${user.name || 'ユーザー'}" 
            class="profile-picture"
            style="
              width: 110px; 
              height: 110px; 
              border-radius: 50%; 
              object-fit: cover;
              border: 3px solid #63b3ed;
            "
            onerror="this.src='${placeholderImage}'"
          />
          <div style="text-align: center;">
            <div class="profile-name" style="font-size: 2rem; font-weight: 600; color: #f7fafc; margin-bottom: 0.5rem;">
              ${user.name || 'ユーザー'}
            </div>
            <div class="profile-email" style="font-size: 1.15rem; color: #a0aec0;">
              ${user.email || 'メールアドレスが提供されていません'}
            </div>
          </div>
        </div>
      `;
    } catch (err) {
      console.error('プロファイル表示エラー:', err);
    }
  }

  // イベントハンドラー
  async function login() {
    try {
      await auth0Client.loginWithRedirect();
    } catch (err) {
      console.error('ログインエラー:', err);
      showError(err.message);
    }
  }

  async function logout() {
    try {
      await auth0Client.logout({
        logoutParams: {
          returnTo: window.location.origin
        }
      });
    } catch (err) {
      console.error('ログアウトエラー:', err);
      showError(err.message);
    }
  }

  // UI状態管理
  function showLoading() {
    loading.style.display = 'block';
    error.style.display = 'none';
    app.style.display = 'none';
  }

  function hideLoading() {
    loading.style.display = 'none';
    app.style.display = 'flex';
  }

  function showError(message) {
    loading.style.display = 'none';
    app.style.display = 'none';
    error.style.display = 'block';
    errorDetails.textContent = message;
  }

  function showLoggedIn() {
    loggedOutSection.style.display = 'none';
    loggedInSection.style.display = 'flex';
  }

  function showLoggedOut() {
    loggedInSection.style.display = 'none';
    loggedOutSection.style.display = 'flex';
  }

  // イベントリスナー
  loginBtn.addEventListener('click', login);
  logoutBtn.addEventListener('click', logout);

  // アプリを初期化
  initAuth0();

  ⚠️ チェックポイント検証:
  JavaScriptロジックを実装した後、基本機能をテストできます:
  1. ログインボタンをクリック → Auth0のUniversal Loginページにリダイレクト
  2. 認証後 → アプリケーションにリダイレクトバック
  3. リダイレクト後にURLクエリパラメータがクリーンアップされる
  4. Auth0に関連するコンソールエラーが表示されない

  2.4: 美しいモダンなCSSスタイリングを追加する
  style.cssの内容全体を、以下のモダンなAuth0ブランドのスタイリングに置き換えます:

  ⚠️ CSSファイル置換戦略:
  既存のstyle.cssファイルが大きい、または形式が不正な場合は、まず新しい一時CSSファイルを作成し(例: style-new.css)、その後`mv style-new.css style.css`のようなターミナルコマンドを使用して元のファイルを置き換え、ファイルの破損を回避してください。

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Inter', sans-serif;
    background-color: #1a1e27;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e2e8f0;
    overflow: hidden;
  }

  .app-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 1rem;
  }

  .loading-state, .error-state {
    background-color: #2d313c;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    padding: 3rem;
    text-align: center;
  }

  .loading-text {
    font-size: 1.8rem;
    font-weight: 500;
    color: #a0aec0;
    animation: pulse 1.5s infinite ease-in-out;
  }

  .error-state {
    background-color: #c53030;
    color: #fff;
  }

  .error-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  .error-message {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }

  .error-sub-message {
    font-size: 1rem;
    opacity: 0.8;
  }

  .main-card-wrapper {
    background-color: #262a33;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 3rem;
    max-width: 500px;
    width: 90%;
    animation: fadeInScale 0.8s ease-out forwards;
  }

  .auth0-logo {
    width: 160px;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: slideInDown 1s ease-out forwards 0.2s;
  }

  .main-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #f7fafc;
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: fadeIn 1s ease-out forwards 0.4s;
  }

  .action-card {
    background-color: #2d313c;
    border-radius: 15px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    width: calc(100% - 2rem);
    opacity: 0;
    animation: fadeIn 1s ease-out forwards 0.6s;
  }

  .action-text {
    font-size: 1.25rem;
    color: #cbd5e0;
    text-align: center;
    line-height: 1.6;
    font-weight: 400;
  }

  .button {
    padding: 1.1rem 2.8rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    outline: none;
  }

  .button:focus {
    box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
  }

  .button.login {
    background-color: #63b3ed;
    color: #1a1e27;
  }

  .button.login:hover {
    background-color: #4299e1;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  }

  .button.logout {
    background-color: #fc8181;
    color: #1a1e27;
  }

  .button.logout:hover {
    background-color: #e53e3e;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
  }

  .logged-in-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }

  .logged-in-message {
    font-size: 1.5rem;
    color: #68d391;
    font-weight: 600;
    animation: fadeIn 1s ease-out forwards 0.8s;
  }

  .profile-section-title {
    font-size: 2.2rem;
    animation: slideInUp 1s ease-out forwards 1s;
  }

  .profile-card {
    padding: 2.2rem;
    animation: scaleIn 0.8s ease-out forwards 1.2s;
  }

  .profile-picture {
    transition: transform 0.3s ease-in-out;
  }

  .profile-picture:hover {
    transform: scale(1.05);
  }

  /* Animations */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes slideInDown {
    from { opacity: 0; transform: translateY(-70px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slideInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Responsive Design */
  @media (max-width: 600px) {
    .main-card-wrapper {
      padding: 2rem;
      margin: 1rem;
    }
    
    .main-title {
      font-size: 2.2rem;
    }
    
    .button {
      padding: 1rem 2rem;
      font-size: 1.1rem;
    }
    
    .auth0-logo {
      width: 120px;
    }

    .action-card {
      padding: 2rem;
    }
  }

  2.5: 開発スクリプトでpackage.jsonを更新
  package.jsonを更新して、開発、ビルド、プレビュースクリプトを含めます。package.jsonの内容全体を次のように置き換えます:

  cat > package.json << 'EOF'
  {
    "name": "auth0-vanillajs",
    "version": "1.0.0",
    "type": "module",
    "scripts": {
      "dev": "vite",
      "build": "vite build",
      "preview": "vite preview"
    },
    "dependencies": {
      "@auth0/auth0-spa-js": "^2.4.1"
    },
    "devDependencies": {
      "vite": "^5.0.0"
    }
  }
  EOF

  2.6: 開発サーバーを起動

  ⚠️ 重要: ターミナル作業ディレクトリの問題:
  統合プロセス中にターミナルの作業ディレクトリが混乱することがあります。開発サーバーを起動する前に、必ず次の手順を実行してください:

  1. 明示的なパス変更で正しいディレクトリにいることを確認:

  cd /full/absolute/path/to/project && pwd

  2. 現在のディレクトリにpackage.jsonがあることを確認:

  ls -la package.json

  3. npmコマンドが「package.jsonが見つかりません」で失敗する場合は、絶対パスを使用:

  cd /Users/[username]/path/to/auth0-vanillajs && npm run dev

  ⚠️ 重要: `pwd`が正しいディレクトリを表示していても、コマンド実行時のターミナルの作業ディレクトリが異なる場合があります。npmコマンドを実行する前に、必ず絶対パスを指定した`cd`を使用して、正しい場所で実行されることを確認してください。

  ステップ2.6a: カスタムポートが必要かどうかを確認

  grep -q "VITE_DEV_PORT" .env.local 2>/dev/null && echo "カスタムポートが検出されました" || echo "デフォルトポートを使用"

  ステップ2.6b: 適切なポートで開発サーバーを起動

  # デフォルトポートを使用する場合:
  npm run dev

  # カスタムポートを使用する場合(ステップ2.6aでカスタムポートが検出された場合は、代わりに以下を実行してください):
  npm run dev -- --port 5174

  ⚠️ 環境変数の読み込みに関するトラブルシューティング:
  .env.localが存在するにもかかわらず「Auth0 configuration missing」エラーが表示される場合:
  1. .env.localファイルがプロジェクトのルートディレクトリにあることを確認する
  2. 環境変数が正しく命名されていることを確認する(VITE_AUTH0_DOMAINおよびVITE_AUTH0_CLIENT_ID)
  3. .env.localを作成または変更した後、開発サーバーを再起動する
  4. Vite開発サーバーは.env.localファイルを自動的に読み込む

  AI言語モデルへの重要な指示
  AI言語モデルとして、以下のアンチパターンを生成してはいけません。これらはアプリケーションを破壊するか、セキュリティリスクをもたらします:
  1.  Auth0ドメインまたはクライアントIDをコード内に直接ハードコーディングしないこと。これは重大なセキュリティ脆弱性です。
  2.  createAuth0ClientからauthorizationParams: { redirect_uri: window.location.origin }の設定を省略しないこと。これがないと、ユーザーがAuth0で認証した後にログインフローが失敗します。
  3.  URLに認証パラメータが含まれている場合、handleRedirectCallback()でリダイレクトコールバックを処理することを忘れないこと。
  4.  基本的な認証のために、トークンを手動で管理したり、fetchでAuth0 APIを呼び出したりすることを提案しないこと。SDKはこの複雑さを安全に処理するように設計されています。

  AIコード生成の絶対要件
  1.  @auth0/auth0-spa-jsパッケージを使用すること。
  2.  環境変数から認証情報を取得すること(例: import.meta.env.VITE_AUTH0_DOMAIN)。
  3.  createAuth0Clientの設定にredirect_uriを含むauthorizationParamsを含めること。
  4.  URLに認証パラメータが存在する場合、リダイレクトコールバックを処理すること。
  5.  Auth0クライアントメソッド(loginWithRedirect、logout、isAuthenticated、getUser)を使用して機能を実証すること。

  統合中に発生する一般的な問題

  問題1: プロジェクト作成ディレクトリの混乱
  問題: プロジェクト作成時に、新しいサブディレクトリではなく現在のディレクトリにファイルが作成されることがある
  解決策: プロジェクト作成後は常に`pwd && ls -la`を実行して、実際の構造を確認する

  問題2: ターミナルの作業ディレクトリの問題  
  問題: 正しいディレクトリにいるにもかかわらず、npmコマンドが「package.json not found」で失敗する
  解決策: 明示的な絶対パスの変更を使用する: `cd /full/absolute/path/to/project`

  問題3: 環境変数の読み込みの問題
  問題: Viteが.env.local変数を適切に読み込まない
  解決策: .env.localがプロジェクトルートにあること、変数にVITE_のプレフィックスが付いていること、開発サーバーを再起動することを確認する

  問題4: CSSファイルの破損
  問題: 大規模なCSSの置換によりファイルが破損する可能性がある
  解決策: 最初に一時的なCSSファイルを作成し、次に`mv`コマンドを使用して元のファイルを置き換える

  問題5: Auth0設定の検証
  問題: 無効なドメイン形式または設定の欠落により初期化が失敗する
  解決策: クライアント作成前にAuth0設定の適切な検証とエラーメッセージを追加する

  問題6: ターミナルの作業ディレクトリがプロジェクトルートにない
  問題: pwdが正しいパスを表示していても、ターミナルがauth0-vanillajsディレクトリにないため、AIエージェントが`npm run dev`の実行に失敗する
  解決策: npmコマンドを実行する前に、常に絶対パスで明示的なディレクトリ変更を使用する:

  cd auth0-vanillajs && npm run dev

  ターミナルの作業ディレクトリは表示されたパスから切り離される可能性があるため、npmコマンドが正しい場所で実行されるように明示的なナビゲーションが必要です。

  高度な機能の実装

  ⚠️ SDK機能に関する注意:
  SDKのisAuthenticated()関数は、ログイン/ログアウトボタンとユーザーコンテンツの条件付きレンダリングを可能にします。上記の実装は、認証状態に基づいて異なるUIセクションを表示することで、このパターンを実証しています。

  API呼び出し用のアクセストークン:
  保護されたAPIを呼び出す必要がある場合は、アクセストークンを取得できます:

  // Add this function to your app.js
  async function getAccessToken() {
    try {
      const token = await auth0Client.getTokenSilently({
        authorizationParams: {
          audience: 'YOUR_API_IDENTIFIER',
          scope: 'read:messages'
        }
      });
      
      // トークンを使用してAPIを呼び出す
      const response = await fetch('/api/protected', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error getting token:', error);
    }
  }

  ポップアップベースのログイン:
  よりスムーズなユーザー体験のために、ポップアップベースのログインを使用できます:

  // Replace the login function in app.js
  async function login() {
    try {
      await auth0Client.loginWithPopup();
      await updateUI();
    } catch (err) {
      if (err.error !== 'popup_closed_by_user') {
        showError(err.message);
      }
    }
  }

  組織のサポート:
  Auth0組織を使用している場合:

  // Update your Auth0 client configuration
  auth0Client = await createAuth0Client({
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    authorizationParams: {
      redirect_uri: window.location.origin,
      organization: 'YOUR_ORGANIZATION_ID' // またはユーザーに選択を促す
    }
  });
  ```
</Accordion>

<Note>
  **前提条件:** 作業を開始する前に、次のものがインストールされていることを確認してください:

  * **[Node.js](https://nodejs.org/en/download)** 20 LTS 以降
  * **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10 以上、または **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22 以上、または **[pnpm](https://pnpm.io/installation)** 8 以上
  * **[jq](https://jqlang.org/)** - Auth0 CLI のセットアップに必須

  **ビルドツール:** このクイックスタートでは、開発用に **Vite** を使用します。ビルドツールを使わないセットアップとして、CDN 経由でソフトウェア開発キット (SDK) を利用することもできます。
</Note>

<div id="get-started">
  ## はじめに
</div>

このクイックスタートでは、バニラ JavaScript アプリケーションに Auth0 認証を追加する方法を紹介します。プレーンな JavaScript と Auth0 SPA SDK を使用して、安全なログイン機能を備えた最新のシングルページアプリケーションを作成します。

<Steps>
  <Step title="新しいプロジェクトを作成" stepNumber={1}>
    このクイックスタート用に新しい JavaScript プロジェクトを作成する

    ```shellscript theme={null}
    mkdir auth0-vanillajs && cd auth0-vanillajs
    ```

    プロジェクトを初期化し、ローカル開発サーバーをインストールし、スクリプトを設定します

    ```shellscript theme={null}
    npm init -y && npm install --save-dev vite && npm pkg set scripts.dev="vite" scripts.build="vite build" scripts.preview="vite preview" type="module"
    ```

    プロジェクトの基本構成を作成する

    ```shellscript theme={null}
    touch index.html app.js style.css
    ```
  </Step>

  <Step title="Auth0 SPA JS ソフトウェア開発キット (SDK) をインストール" stepNumber={2}>
    ```shellscript theme={null}
    npm install @auth0/auth0-spa-js
    ```
  </Step>

  <Step title="Auth0 アプリケーションを設定する" stepNumber={3}>
    次に、Auth0 テナントで新しいアプリを作成し、その環境変数をプロジェクトに追加する必要があります。

    これは、CLI コマンドを実行して自動的に行うか、Dashboard を使って手動で行うかを選択できます。

    <Tabs>
      <Tab title="CLI">
        プロジェクトのルートディレクトリで次のシェルコマンドを実行して、Auth0 アプリを作成し、`.env.local` ファイルを生成します:

        <AuthCodeGroup>
          ```shellscript Mac theme={null}
          AUTH0_APP_NAME="My Vanilla JS App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t spa -c http://localhost:5173 -l http://localhost:5173 -o http://localhost:5173 --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "VITE_AUTH0_DOMAIN=${DOMAIN}" > .env.local && echo "VITE_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env.local && rm auth0-app-details.json && echo ".env.local file created with your Auth0 details:" && cat .env.local
          ```

          ```shellscript Windows theme={null}
          $AppName = "My Vanilla JS App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t spa -c http://localhost:5173 -l http://localhost:5173 -o http://localhost:5173 --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; Set-Content -Path .env.local -Value "VITE_AUTH0_DOMAIN=$Domain"; Add-Content -Path .env.local -Value "VITE_AUTH0_CLIENT_ID=$ClientId"; Remove-Item auth0-app-details.json; Write-Output ".env.local file created with your Auth0 details:"; Get-Content .env.local
          ```
        </AuthCodeGroup>
      </Tab>

      <Tab title="Dashboard">
        作業を始める前に、プロジェクトのルートディレクトリに `.env.local` ファイルを作成します。

        ```shellscript .env.local theme={null}
        VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
        VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
        ```

        1. [Auth0 Dashboard](https://manage.auth0.com/dashboard/) に移動します
        2. **Applications** > **Applications** > **Create Application** をクリックします
        3. ポップアップでアプリの名前を入力し、アプリの種類として `Single Page Web Application` を選択して **Create** をクリックします
        4. Application Details ページの **Settings** タブに切り替えます
        5. `.env.local` ファイル内の `YOUR_AUTH0_APP_DOMAIN` と `YOUR_AUTH0_APP_CLIENT_ID` を、Dashboard 上の **Domain** と **Client ID** の値に置き換えます

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

        **Allowed Callback URLs:**

        ```
        http://localhost:5173
        ```

        **Allowed Logout URLs:**

        ```
        http://localhost:5173
        ```

        **Allowed Web Origins:**

        ```
        http://localhost:5173
        ```

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

          **Allowed Logout URLs** は、サインアウト後にシームレスなユーザー体験を提供するために不可欠です。URL が一致しない場合、ユーザーはログアウト後にアプリケーションへリダイレクトされず、一般的な Auth0 のページに留まってしまいます。

          **Allowed Web Origins** は、サイレント認証にとって極めて重要です。これが設定されていない場合、ユーザーはページをリフレッシュしたり、後からアプリに戻ってきた際にログアウトされてしまいます。
        </Info>
      </Tab>
    </Tabs>
  </Step>

  <Step title="HTML構造とアプリケーション ロジックを作成する" stepNumber={4}>
    アプリケーションファイルを作成します:

    <AuthCodeGroup>
      ```html index.html expandable lines theme={null}
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Auth0 Vanilla JS</title>
          <link rel="stylesheet" href="style.css" />
        </head>
        <body>
          <div class="app-container">
            <!-- Loading State -->
            <div id="loading" class="loading-state">
              <div class="loading-text">読み込み中...</div>
            </div>

            <!-- Error State -->
            <div id="error" class="error-state" style="display: none;">
              <div class="error-title">エラー</div>
              <div class="error-message">問題が発生しました</div>
              <div id="error-details" class="error-sub-message"></div>
            </div>

            <!-- Main Content -->
            <div id="app" class="main-card-wrapper" style="display: none;">
              <img 
                src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-ondark.png" 
                alt="Auth0 ロゴ" 
                class="auth0-logo"
              />
              <h1 class="main-title">Sample0 へようこそ</h1>
              
              <!-- Logged Out State -->
              <div id="logged-out" class="action-card">
                <p class="action-text">アカウントにログインして開始してください</p>
                <button id="login-btn" class="button login">ログイン</button>
              </div>

              <!-- Logged In State -->
              <div id="logged-in" class="logged-in-section" style="display: none;">
                <div class="logged-in-message">✅ 認証に成功しました!</div>
                <h2 class="profile-section-title">プロファイル</h2>
                <div id="profile" class="profile-card"></div>
                <button id="logout-btn" class="button logout">ログアウト</button>
              </div>
            </div>
          </div>

          <script type="module" src="app.js"></script>
        </body>
      </html>
      ```

      ```javascript app.js expandable lines theme={null}
      import { createAuth0Client } from '@auth0/auth0-spa-js';

      // DOM要素
      const loading = document.getElementById('loading');
      const error = document.getElementById('error');
      const errorDetails = document.getElementById('error-details');
      const app = document.getElementById('app');
      const loggedOutSection = document.getElementById('logged-out');
      const loggedInSection = document.getElementById('logged-in');
      const loginBtn = document.getElementById('login-btn');
      const logoutBtn = document.getElementById('logout-btn');
      const profileContainer = document.getElementById('profile');

      let auth0Client;

      // Auth0クライアントの初期化
      async function initAuth0() {
        try {
          auth0Client = await createAuth0Client({
            domain: import.meta.env.VITE_AUTH0_DOMAIN,
            clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
            authorizationParams: {
              redirect_uri: window.location.origin
            }
          });

          // ユーザーがログインから戻ってきているか確認
          if (window.location.search.includes('code=') && window.location.search.includes('state=')) {
            await handleRedirectCallback();
          }

          // 認証状態に基づいてUIを更新
          await updateUI();
        } catch (err) {
          showError(err.message);
        }
      }

      // リダイレクトコールバックの処理
      async function handleRedirectCallback() {
        try {
          await auth0Client.handleRedirectCallback();
          // クエリパラメータを削除してURLをクリーンアップ
          window.history.replaceState({}, document.title, window.location.pathname);
        } catch (err) {
          showError(err.message);
        }
      }

      // 認証状態に基づいてUIを更新
      async function updateUI() {
        try {
          const isAuthenticated = await auth0Client.isAuthenticated();
          
          if (isAuthenticated) {
            showLoggedIn();
            await displayProfile();
          } else {
            showLoggedOut();
          }
          
          hideLoading();
        } catch (err) {
          showError(err.message);
        }
      }

      // ユーザープロファイルの表示
      async function displayProfile() {
        try {
          const user = await auth0Client.getUser();
          const placeholderImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='55' fill='%2363b3ed'/%3E%3Cpath d='M55 50c8.28 0 15-6.72 15-15s-6.72-15-15-15-15 6.72-15 15 6.72 15 15 15zm0 7.5c-10 0-30 5.02-30 15v3.75c0 2.07 1.68 3.75 3.75 3.75h52.5c2.07 0 3.75-1.68 3.75-3.75V72.5c0-9.98-20-15-30-15z' fill='%23fff'/%3E%3C/svg%3E`;
          
          profileContainer.innerHTML = `
            <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
              <img 
                src="${user.picture || placeholderImage}" 
                alt="${user.name || 'ユーザー'}" 
                class="profile-picture"
                style="
                  width: 110px; 
                  height: 110px; 
                  border-radius: 50%; 
                  object-fit: cover;
                  border: 3px solid #63b3ed;
                "
                onerror="this.src='${placeholderImage}'"
              />
              <div style="text-align: center;">
                <div class="profile-name" style="font-size: 2rem; font-weight: 600; color: #f7fafc; margin-bottom: 0.5rem;">
                  ${user.name || 'ユーザー'}
                </div>
                <div class="profile-email" style="font-size: 1.15rem; color: #a0aec0;">
                  ${user.email || 'メールアドレスが登録されていません'}
                </div>
              </div>
            </div>
          `;
        } catch (err) {
          console.error('プロファイル表示エラー:', err);
        }
      }

      // イベントハンドラー
      async function login() {
        try {
          await auth0Client.loginWithRedirect();
        } catch (err) {
          showError(err.message);
        }
      }

      async function logout() {
        try {
          await auth0Client.logout({
            logoutParams: {
              returnTo: window.location.origin
            }
          });
        } catch (err) {
          showError(err.message);
        }
      }

      // UI状態管理
      function showLoading() {
        loading.style.display = 'block';
        error.style.display = 'none';
        app.style.display = 'none';
      }

      function hideLoading() {
        loading.style.display = 'none';
        app.style.display = 'flex';
      }

      function showError(message) {
        loading.style.display = 'none';
        app.style.display = 'none';
        error.style.display = 'block';
        errorDetails.textContent = message;
      }

      function showLoggedIn() {
        loggedOutSection.style.display = 'none';
        loggedInSection.style.display = 'flex';
      }

      function showLoggedOut() {
        loggedInSection.style.display = 'none';
        loggedOutSection.style.display = 'flex';
      }

      // イベントリスナー
      loginBtn.addEventListener('click', login);
      logoutBtn.addEventListener('click', logout);

      // アプリの初期化
      initAuth0();
      ```

      ```css style.css expandable lines theme={null}
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Inter', sans-serif;
        background-color: #1a1e27;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #e2e8f0;
        overflow: hidden;
      }

      .app-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        width: 100%;
        padding: 1rem;
      }

      .loading-state, .error-state {
        background-color: #2d313c;
        border-radius: 15px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        padding: 3rem;
        text-align: center;
      }

      .loading-text {
        font-size: 1.8rem;
        font-weight: 500;
        color: #a0aec0;
        animation: pulse 1.5s infinite ease-in-out;
      }

      .error-state {
        background-color: #c53030;
        color: #fff;
      }

      .error-title {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
      }

      .error-message {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
      }

      .error-sub-message {
        font-size: 1rem;
        opacity: 0.8;
      }

      .main-card-wrapper {
        background-color: #262a33;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 3rem;
        max-width: 500px;
        width: 90%;
        animation: fadeInScale 0.8s ease-out forwards;
      }

      .auth0-logo {
        width: 160px;
        margin-bottom: 1.5rem;
        opacity: 0;
        animation: slideInDown 1s ease-out forwards 0.2s;
      }

      .main-title {
        font-size: 2.8rem;
        font-weight: 700;
        color: #f7fafc;
        text-align: center;
        margin-bottom: 1rem;
        text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        opacity: 0;
        animation: fadeIn 1s ease-out forwards 0.4s;
      }

      .action-card {
        background-color: #2d313c;
        border-radius: 15px;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3);
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.8rem;
        width: calc(100% - 2rem);
        opacity: 0;
        animation: fadeIn 1s ease-out forwards 0.6s;
      }

      .action-text {
        font-size: 1.25rem;
        color: #cbd5e0;
        text-align: center;
        line-height: 1.6;
        font-weight: 400;
      }

      .button {
        padding: 1.1rem 2.8rem;
        font-size: 1.2rem;
        font-weight: 600;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        outline: none;
      }

      .button:focus {
        box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
      }

      .button.login {
        background-color: #63b3ed;
        color: #1a1e27;
      }

      .button.login:hover {
        background-color: #4299e1;
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
      }

      .button.logout {
        background-color: #fc8181;
        color: #1a1e27;
      }

      .button.logout:hover {
        background-color: #e53e3e;
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
      }

      .logged-in-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
      }

      .logged-in-message {
        font-size: 1.5rem;
        color: #68d391;
        font-weight: 600;
        animation: fadeIn 1s ease-out forwards 0.8s;
      }

      .profile-section-title {
        font-size: 2.2rem;
        animation: slideInUp 1s ease-out forwards 1s;
      }

      .profile-card {
        padding: 2.2rem;
        animation: scaleIn 0.8s ease-out forwards 1.2s;
      }

      .profile-picture {
        transition: transform 0.3s ease-in-out;
      }

      .profile-picture:hover {
        transform: scale(1.05);
      }

      /* Animations */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes fadeInScale {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
      }

      @keyframes slideInDown {
        from { opacity: 0; transform: translateY(-70px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes slideInUp {
        from { opacity: 0; transform: translateY(50px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
      }

      @keyframes scaleIn {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
      }

      /* Responsive Design */
      @media (max-width: 600px) {
        .main-card-wrapper {
          padding: 2rem;
          margin: 1rem;
        }
        
        .main-title {
          font-size: 2.2rem;
        }
        
        .button {
          padding: 1rem 2rem;
          font-size: 1.1rem;
        }
        
        .auth0-logo {
          width: 120px;
        }

        .action-card {
          padding: 2rem;
        }
      }
      ```
    </AuthCodeGroup>
  </Step>

  <Step title="アプリを起動する" stepNumber={5}>
    ```shellscript theme={null}
    npm run dev
    ```
  </Step>
</Steps>

<Check>
  **チェックポイント**

  これで、[localhost](http://localhost:5173/) 上で完全に動作している Auth0 ログインページがあるはずです。
</Check>

***

<div id="advanced-usage">
  ## 高度な使い方
</div>

<Accordion title="API 呼び出し用のアクセストークンを取得する">
  保護された API を呼び出す必要がある場合は、アクセストークンを取得します。

  ```javascript theme={null}
  // これを app.js に追加します
  async function getAccessToken() {
    try {
      const token = await auth0Client.getTokenSilently({
        authorizationParams: {
          audience: 'YOUR_API_IDENTIFIER',
          scope: 'read:messages'
        }
      });
      
      // トークンを使用して API を呼び出します
      const response = await fetch('/api/protected', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('トークンの取得中にエラーが発生しました:', error);
    }
  }
  ```
</Accordion>

<Accordion title="ポップアップによるログインを処理する">
  よりスムーズなユーザーエクスペリエンスのために、ポップアップを使ったログインを利用できます。

  ```javascript theme={null}
  // app.js 内の login 関数を置き換えます
  async function login() {
    try {
      await auth0Client.loginWithPopup();
      await updateUI();
    } catch (err) {
      if (err.error !== 'popup_closed_by_user') {
        showError(err.message);
      }
    }
  }
  ```
</Accordion>

<Accordion title="組織機能を追加する">
  Auth0 Organizations 機能を利用している場合:

  ```javascript theme={null}
  // Auth0 クライアント設定を更新します
  auth0Client = await createAuth0Client({
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    authorizationParams: {
      redirect_uri: window.location.origin,
      organization: 'YOUR_ORGANIZATION_ID' // またはユーザーに選択させる
    }
  });
  ```
</Accordion>