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

# Auth0ComponentProvider を設定する

> Auth0ComponentProvider が認証、国際化、テーマ設定、トースト通知、キャッシュ オプションをどのように連携させるかを説明します。

<Warning>
  Auth0 Universal Components は現在 Early Access です。これを使用すると、[Okta's Master Subscription
  Agreement](https://www.okta.com/agreements/) に記載された該当する Free Trial 条項に同意したものとみなされます。詳細については、[Product
  Release Stages](/ja/docs/troubleshoot/product-lifecycle/product-release-stages) を参照してください。
</Warning>

`Auth0ComponentProvider` は、[Auth0 Universal Components](/ja/docs/get-started/universal-components/universal-components-overview) のオーケストレーション層です。Auth0 SDK がセッションとトークンを管理し、`Auth0ComponentProvider` がそのアイデンティティの状態を、機能しブランドに沿った UI コンテキストへと反映します。`Auth0ComponentProvider` は、MFA の登録などのコンポーネントで必要な権限、キャッシュ済みデータ、スタイル設定を利用できるようにします。

<div id="benefits">
  ## 利点
</div>

`Auth0ComponentProvider` は、すべての Auth0 Universal Components で必要となるルートラッパーです。このラッパーを使用する利点は次のとおりです。

* **Identity Alignment**: [Auth0 SDKs](/ja/docs/libraries) と [My Account API](/ja/docs/manage-users/my-account-api) の間を橋渡しし、リクエストがユーザースコープのトークンで署名されるようにします。
* **Performance Optimization**: ID ワークフロー向けに最適化された共有 **TanStack Query** キャッシュを実装し、不要な API 呼び出しやレイアウトシフトを防ぎます。
* **Design System Consistency**: **Tailwind CSS** の変数と **Shadcn** 互換のテーマをコンポーネントツリー全体に適用します。
* **Global Feedback**: セキュリティアラートやワークフローの状態を通知する、統一されたトースト通知システムを管理します。

<div id="integration-architecture">
  ## 統合アーキテクチャ
</div>

認証プロバイダー (`Auth0Provider`) の内側に `Auth0ComponentProvider` をネストします。この構成により、Auth0 API の呼び出しに必要な認証状態とトークン取得メソッドにアクセスできるようになります。

<div id="configure-auth0componentprovider">
  ## `Auth0ComponentProvider` を設定する
</div>

<Tabs>
  <Tab title="React">
    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    function App() {
      return (
        <Auth0Provider
          domain="your-tenant.auth0.com"
          clientId="YOUR_CLIENT_ID"
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler='popup' // Universal Login ポップアップ経由でステップアップ認証チャレンジを処理するために必要
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Auth0 Universal Components を使用するアプリ */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    ***

    ## プロパティ

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>必須</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>はい</td>
          <td>Auth0 テナントのドメイン ("YOUR\_AUTH0\_TENANT.auth0.com") 。</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>いいえ</td>
          <td><code>true</code> の場合、API クライアントの初期化をスキップします。ドキュメントのプレビューやデモで使用します。</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>いいえ</td>
          <td>currentLanguage や fallbackLanguage などを含む国際化設定です。</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>いいえ</td>
          <td>mode (light/dark) 、テーマバリアント (default/minimal/rounded) 、CSS 変数などを含むテーマ設定です。</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>いいえ</td>
          <td>プロバイダーの選択 (sonner/custom) 、表示位置、表示時間、カスタム toast メソッドなどを含むトースト通知の設定です。</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>いいえ</td>
          <td>TanStack Query のキャッシュを制御します (デフォルトでは stale は 2 分、GC は 5 分) 。常に最新のデータを取得するには、<code>enabled: false</code> を設定します。</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>いいえ</td>
          <td>認証の初期化中に表示するカスタムのローディングコンポーネントです。</td>
        </tr>
      </tbody>
    </table>

    ***

    ## ユーザーエクスペリエンス

    ***

    **i18n**

    以下のプロパティを使用して、Universal Components をアプリケーションのデザインシステムやロケールに合わせて調整します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>必須</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>はい</td>
          <td>-</td>
          <td>現在の言語コード (例: "en"、"es"、"fr") </td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>いいえ</td>

          <td>
            <code>"en"</code>
          </td>

          <td>翻訳がない場合に使用するフォールバック言語コード</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>テーマのカラーモード</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>スタイルが異なるテーマバリアント</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>共通、ライト、ダークテーマ用のCSSカスタムプロパティ</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="使用可能な CSS 変数">
      **共通 (すべてのテーマに適用) :**

      **タイポグラフィ:**

      * `--font-size-page-header`
      * `--font-size-page-description`
      * `--font-size-heading`
      * `--font-size-title`
      * `--font-size-subtitle`
      * `--font-size-body`
      * `--font-size-paragraph`
      * `--font-size-label`

      **角丸:**

      * `--radius-xs` ～ `--radius-9xl`

      **Light & Dark (テーマ固有の色とシャドウ) :**

      **色:**

      * `--background`, `--foreground`
      * `--card`, `--card-foreground`
      * `--primary`, `--primary-foreground`
      * `--secondary`, `--secondary-foreground`
      * `--accent`, `--accent-foreground`
      * `--muted`, `--muted-foreground`
      * `--destructive`, `--destructive-foreground`
      * `--popover`, `--popover-foreground`
      * `--input`, `--border`, `--ring`
      * `--color-page`
      * `--color-info`, `--color-info-foreground`
      * `--color-success`, `--color-success-foreground`
      * `--color-warning`, `--color-warning-foreground`
      * `--color-destructive-border`
      * `--color-popover-border`
      * `--color-input-foreground`
      * `--color-input-muted`

      **シャドウ:**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (resting, hover, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (resting, hover, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (resting, hover)
      * `--shadow-switch-*` (resting, hover, focus, thumb, thumb-dark)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      詳細なスタイリング例やカスタマイズ パターンについては、[Universal
      Components を使用したスタイルと
      テーマのカスタマイズ](/ja/docs/get-started/universal-components/universal-components-style)を参照してください。
    </Callout>

    ***

    **toastSettings**

    Toast設定では、**Sonner** (デフォルト) と**カスタム**の2種類のプロバイダータイプをサポートしています。各プロバイダーには、型安全性を高めるための独自の設定構造があります。

    <Tabs>
      <Tab title="Sonner Provider（デフォルト）">
        | Property               | Type            | Default       | Description                                                                                 |
        | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------- |
        | `provider`             | `"sonner"`      | `"sonner"`    | 組み込みの Sonner トーストライブラリを使用します                                                                |
        | `settings.position`    | `ToastPosition` | `"top-right"` | トーストの表示位置: "top-left"、"top-right"、"bottom-left"、"bottom-right"、"top-center"、"bottom-center" |
        | `settings.duration`    | `number`        | `4000`        | トーストが自動で閉じるまでの時間 (ミリ秒)  (Sonner のデフォルト)                                                     |
        | `settings.maxToasts`   | `number`        | -             | 同時に表示できるトーストの最大数                                                                            |
        | `settings.dismissible` | `boolean`       | `true`        | ユーザー操作でトーストを手動で閉じられるかどうか (Sonner のデフォルト)                                                    |
        | `settings.closeButton` | `boolean`       | `true`        | トーストに閉じるボタンを表示するかどうか                                                                        |

        ```tsx Sonner Provider Example theme={null}
        const toastSettings = {
          provider: 'sonner', // 省略可能。デフォルト値です
          settings: {
            position: 'top-center',
            duration: 6000,
            maxToasts: 5,
            dismissible: true,
            closeButton: true
          }
        };
        ```
      </Tab>

      <Tab title="Custom Provider">
        | Property          | Type                         | Required | Description        |
        | ----------------- | ---------------------------- | -------- | ------------------ |
        | `provider`        | `"custom"`                   | Yes      | カスタムのトースト実装を使用します  |
        | `methods.success` | `(message: string) => void`  | No       | 成功トースト用のカスタムハンドラー  |
        | `methods.error`   | `(message: string) => void`  | No       | エラートースト用のカスタムハンドラー |
        | `methods.warning` | `(message: string) => void`  | No       | 警告トースト用のカスタムハンドラー  |
        | `methods.info`    | `(message: string) => void`  | No       | 情報トースト用のカスタムハンドラー  |
        | `methods.dismiss` | `(toastId?: string) => void` | No       | 閉じるためのカスタムハンドラー    |

        ```tsx Custom Provider Example theme={null}
        const toastSettings = {
          provider: 'custom',
          methods: {
            success: (message: string) => {
              // 成功トースト用のカスタム実装
              myToastLibrary.success(message);
            },
            error: (message: string) => {
              // エラートースト用のカスタム実装
              myToastLibrary.error(message);
            },
            warning: (message: string) => {
              // 警告トースト用のカスタム実装
              myToastLibrary.warning(message);
            },
            info: (message: string) => {
              // 情報トースト用のカスタム実装
              myToastLibrary.info(message);
            },
            dismiss: (toastId?: string) => {
              // 閉じるためのカスタム実装
              myToastLibrary.dismiss(toastId);
            }
          }
        };
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          すべてのカスタムメソッドは省略可能です。必要なものだけ実装してください。各メソッド
          が受け取るのはメッセージテキストのみで、スタイル、
          位置、表示時間は実装側で処理します。
        </Callout>
      </Tab>
    </Tabs>

    ***

    ## stateとパフォーマンス

    すべての Auth0 コンポーネントに対して TanStack Query のキャッシュを細かく調整します。デフォルトでは、データを 2 分間フレッシュな状態に保ち、5 分後にガベージコレクションを実行し、ウィンドウフォーカス時の再フェッチをスキップします。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            キャッシュ機能全体の有効 / 無効を切り替えます。<code>false</code> に設定すると、古いデータの利用が無効になり、キャッシュされたエントリは速やかにクリアされます。
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            データが古い状態になるまでのミリ秒数です。デフォルトは 2 分です。Dashboard では長めにし、重要なワークフローでは短めにしてください。
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            非アクティブなクエリがガベージコレクションの対象になるまでのミリ秒数です。デフォルトは 5 分です。
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            ブラウザーが再びフォーカスされたときにクエリを再フェッチするかどうかを制御します。厳密に最新状態を保つには{" "}
            <code>"always"</code> を使用します。
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **キャッシュを無効にする:** `{ enabled: false }` を渡します。これにより `staleTime` は自動的に 0 に設定され、ガベージコレクションまでの時間も 5 秒に短縮されるため、レンダリングのたびに常に最新のデータを取得します。

      **プロのヒント:** キャッシュは有効のままにしておき、ほぼリアルタイムの更新が必要な管理パネルと連携する場合は `staleTime` を短くしてください。
    </Callout>

    <Tabs>
      <Tab title="TTLの調整">
        ```tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{
            staleTime: 10 * 60 * 1000,
            gcTime: 15 * 60 * 1000,
            refetchOnWindowFocus: true,
          }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>

      <Tab title="キャッシュを無効化">
        ```tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{ enabled: false }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Next.js">
    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain="your-tenant.auth0.com"
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    ***

    ## プロパティ

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>必須</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>はい</td>
          <td>Auth0 テナントのドメイン (例: "your-tenant.auth0.com") 。プロキシモードでは必須です。</td>
        </tr>

        <tr>
          <td><code>mode</code></td>
          <td><code>'proxy'</code></td>
          <td>はい</td>
          <td>Next.js では、サーバーサイド認証に常に <code>'proxy'</code> モードを使用します。</td>
        </tr>

        <tr>
          <td><code>proxyConfig</code></td>
          <td>`{ baseUrl: string }`</td>
          <td>はい</td>
          <td>認証プロキシサーバーのベース URL を含むプロキシ設定です。</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>いいえ</td>
          <td><code>true</code> の場合、API クライアントの初期化をスキップします。ドキュメントのプレビューやデモで使用します。</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>いいえ</td>
          <td>currentLanguage と fallbackLanguage を含む国際化設定です。</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>いいえ</td>
          <td>mode (light/dark) 、テーマバリアント (default/minimal/rounded) 、CSS 変数を含むテーマ設定です。</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>いいえ</td>
          <td>プロバイダーの選択 (sonner/custom) 、位置、表示時間、カスタムトーストメソッドを含むトースト通知の設定です。</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>いいえ</td>
          <td>TanStack Query のキャッシュを制御します (デフォルトでは stale が 2 分、GC が 5 分) 。常に最新のデータを取得するには、<code>enabled: false</code> を設定します。</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>いいえ</td>
          <td>認証の初期化中に表示するカスタムローディングコンポーネントです。</td>
        </tr>
      </tbody>
    </table>

    ***

    ## プロキシモードの設定

    Next.jsアプリケーションの場合は、サーバーサイド認証でプロキシモードを使用してください。

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain="your-tenant.auth0.com"
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    ***

    ### プロキシモードのプロパティ

    プロキシモード認証の設定。Next.js を使用する場合は必須です。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>必須</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>baseUrl</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>はい</td>

          <td>
            認証プロキシサーバーの URL (例: "/api/auth") 。API 呼び出しは
            このベースパスの後ろに追加されます。
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ## ユーザーエクスペリエンス

    ***

    **i18n**

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>必須</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>はい</td>
          <td>-</td>
          <td>現在の言語コード (例: "en"、"es"、"fr") </td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>いいえ</td>

          <td>
            <code>"en"</code>
          </td>

          <td>翻訳がない場合に使用するフォールバック言語コード</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>テーマのカラーモード</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>スタイルが異なるテーマバリアント</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>共通テーマ、ライトテーマ、ダークテーマ用のCSSカスタムプロパティ</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="使用できる CSS 変数">
      **共通 (すべてのテーマに適用) :**

      **タイポグラフィ:**

      * `--font-size-page-header`
      * `--font-size-page-description`
      * `--font-size-heading`
      * `--font-size-title`
      * `--font-size-subtitle`
      * `--font-size-body`
      * `--font-size-paragraph`
      * `--font-size-label`

      **ボーダー半径:**

      * `--radius-xs` から `--radius-9xl`

      **ライト & ダーク (テーマ固有の色とシャドウ) :**

      **色:**

      * `--background`, `--foreground`
      * `--card`, `--card-foreground`
      * `--primary`, `--primary-foreground`
      * `--secondary`, `--secondary-foreground`
      * `--accent`, `--accent-foreground`
      * `--muted`, `--muted-foreground`
      * `--destructive`, `--destructive-foreground`
      * `--popover`, `--popover-foreground`
      * `--input`, `--border`, `--ring`
      * `--color-page`
      * `--color-info`, `--color-info-foreground`
      * `--color-success`, `--color-success-foreground`
      * `--color-warning`, `--color-warning-foreground`
      * `--color-destructive-border`
      * `--color-popover-border`
      * `--color-input-foreground`
      * `--color-input-muted`

      **シャドウ:**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (resting, hover, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (resting, hover, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (resting, hover)
      * `--shadow-switch-*` (resting, hover, focus, thumb, thumb-dark)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      スタイルの詳細な例やカスタマイズのパターンについては、[Universal
      Components を使用したスタイルとテーマのカスタマイズ](/ja/docs/get-started/universal-components/universal-components-style)を参照してください。
    </Callout>

    ***

    **toastSettings**

    Toast設定では、**Sonner** (デフォルト) と**カスタム**の2種類のプロバイダータイプをサポートしています。各プロバイダーには、型安全性を高めるための独自の設定構造があります。

    <Accordion title="Sonner プロバイダー（デフォルト）">
      | プロパティ                  | 型               | デフォルト         | 説明                                                                                          |
      | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------- |
      | `provider`             | `"sonner"`      | `"sonner"`    | 組み込みの Sonner トーストライブラリを使用します                                                                |
      | `settings.position`    | `ToastPosition` | `"top-right"` | トーストの表示位置: "top-left"、"top-right"、"bottom-left"、"bottom-right"、"top-center"、"bottom-center" |
      | `settings.duration`    | `number`        | `4000`        | トーストが自動的に閉じるまでの時間 (ミリ秒、Sonner のデフォルト)                                                       |
      | `settings.maxToasts`   | `number`        | -             | 同時に表示できるトーストの最大数                                                                            |
      | `settings.dismissible` | `boolean`       | `true`        | ユーザー操作でトーストを手動で閉じられるかどうか (Sonner のデフォルト)                                                    |
      | `settings.closeButton` | `boolean`       | `true`        | トーストに閉じるボタンを表示するかどうか                                                                        |

      ```tsx Sonner Provider Example theme={null}
      const toastSettings = {
        provider: 'sonner', // 省略可能。デフォルト値
        settings: {
          position: 'top-center',
          duration: 6000,
          maxToasts: 5,
          dismissible: true,
          closeButton: true
        }
      };
      ```
    </Accordion>

    <Accordion title="独自のプロバイダー">
      | プロパティ             | 型                            | 必須  | 説明                |
      | ----------------- | ---------------------------- | --- | ----------------- |
      | `provider`        | `"custom"`                   | はい  | カスタムのトースト実装を使用します |
      | `methods.success` | `(message: string) => void`  | いいえ | カスタムの成功トーストハンドラー  |
      | `methods.error`   | `(message: string) => void`  | いいえ | カスタムのエラートーストハンドラー |
      | `methods.warning` | `(message: string) => void`  | いいえ | カスタムの警告トーストハンドラー  |
      | `methods.info`    | `(message: string) => void`  | いいえ | カスタムの情報トーストハンドラー  |
      | `methods.dismiss` | `(toastId?: string) => void` | いいえ | カスタムのトースト非表示ハンドラー |

      ```tsx Custom Provider Example theme={null}
      const toastSettings = {
        provider: 'custom',
        methods: {
          success: (message: string) => {
            // カスタムのsuccessトースト実装
            myToastLibrary.success(message);
          },
          error: (message: string) => {
            // カスタムのerrorトースト実装
            myToastLibrary.error(message);
          },
          warning: (message: string) => {
            // カスタムのwarningトースト実装
            myToastLibrary.warning(message);
          },
          info: (message: string) => {
            // カスタムのinfoトースト実装
            myToastLibrary.info(message);
          },
          dismiss: (toastId?: string) => {
            // カスタムのdismiss実装
            myToastLibrary.dismiss(toastId);
          }
        }
      };
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        カスタムメソッドはすべて任意です。必要なものだけを実装してください。各メソッドに渡されるのはメッセージテキストのみで、スタイル、配置、表示時間の管理は実装側で行います。
      </Callout>
    </Accordion>

    ***

    ## stateとパフォーマンス

    すべての Auth0 コンポーネントに対して TanStack Query のキャッシュを細かく調整します。デフォルトでは、データを 2 分間フレッシュな状態に保ち、5 分後にガベージコレクションを実行し、ウィンドウフォーカス時の再フェッチをスキップします。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            キャッシュ機能全体の有効/無効を切り替えます。<code>false</code> に設定すると、古いデータは使用されなくなり、キャッシュ済みエントリはすみやかにクリアされます。
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            データが古いと見なされるまでの時間をミリ秒で指定します (デフォルトは 2 分) 。ダッシュボードでは長めに、重要なワークフローでは短めに設定してください。
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            非アクティブなクエリがガベージコレクションされるまでの時間をミリ秒で指定します (デフォルトは 5 分) 。
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            ブラウザーが再びフォーカスされたときにクエリを再取得するかどうかを制御します。常に最新の状態を厳密に保つには{" "}
            <code>"always"</code> を使用します。
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **キャッシュを無効にする:** `{ enabled: false }` を渡します。これにより、`staleTime` は自動的に 0 に設定され、ガベージコレクションまでの時間も 5 秒に短縮されるため、レンダリングのたびに新しいデータを取得します。

      **ヒント:** 管理パネルとの統合でほぼリアルタイムの更新が必要な場合は、キャッシュは有効のままにして `staleTime` を短くしてください。
    </Callout>

    <Accordion title="TTL を調整する">
      ```tsx layout.tsx theme={null}
      <Auth0ComponentProvider
        mode="proxy"
        domain="your-tenant.auth0.com"
        proxyConfig={{ baseUrl: "/api/auth" }}
        cacheConfig={{
          staleTime: 10 * 60 * 1000,
          gcTime: 15 * 60 * 1000,
          refetchOnWindowFocus: true,
        }}
      >
        <App />
      </Auth0ComponentProvider>
      ```
    </Accordion>

    <Accordion title="キャッシュを無効化する">
      ```tsx layout.tsx theme={null}
      <Auth0ComponentProvider
        mode="proxy"
        domain="your-tenant.auth0.com"
        proxyConfig={{ baseUrl: "/api/auth" }}
        cacheConfig={{ enabled: false }}
      >
        <App />
      </Auth0ComponentProvider>
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    function App() {
      return (
        <Auth0Provider
          domain="your-tenant.auth0.com"
          clientId="YOUR_CLIENT_ID"
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler='popup' // Universal Login ポップアップ経由でステップアップ認証チャレンジを処理するために必要
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Auth0 Universal Components を使用するアプリ */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    ***

    ## プロパティ

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>必須</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>はい</td>
          <td>Auth0 テナントのドメイン (例: "your-tenant.auth0.com") 。</td>
        </tr>

        <tr>
          <td><code>authContext</code></td>
          <td><code>ContextInterface</code></td>
          <td>いいえ</td>
          <td>`@auth0/auth0-react` を使用しない SPA 向けのカスタム認証コンテキストです。`getAccessTokenSilently` などの認証関数を提供します。</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>いいえ</td>
          <td><code>true</code> の場合、API クライアントの初期化をスキップします。ドキュメントのプレビューやデモで使用します。</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>いいえ</td>
          <td>currentLanguage と fallbackLanguage を含む国際化設定です。</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>いいえ</td>
          <td>mode (light/dark) 、テーマバリアント (default/minimal/rounded) 、CSS 変数を含むテーマ設定です。</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>いいえ</td>
          <td>プロバイダーの選択 (sonner/custom) 、表示位置、表示時間、カスタム toast メソッドを含むトースト通知の設定です。</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>いいえ</td>
          <td>TanStack Query のキャッシュを制御します (デフォルトでは stale は 2 分、GC は 5 分) 。常に最新のデータを取得するには、<code>enabled: false</code> を設定します。</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>いいえ</td>
          <td>認証の初期化中に表示するカスタムのローディングコンポーネントです。</td>
        </tr>
      </tbody>
    </table>

    ***

    ## ユーザーエクスペリエンス

    ***

    **i18n**

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>必須</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>はい</td>
          <td>-</td>
          <td>現在の言語コード (例: "en"、"es"、"fr") </td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>いいえ</td>

          <td>
            <code>"en"</code>
          </td>

          <td>翻訳がない場合に使用するフォールバック言語コード</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>テーマのカラーモード</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>異なるスタイルのテーマバリアント</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>共通テーマ、ライトテーマ、ダークテーマの CSS カスタムプロパティ</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="利用可能な CSS 変数">
      **共通 (すべてのテーマに共通) :**

      **タイポグラフィ:**

      * `--font-size-page-header`
      * `--font-size-page-description`
      * `--font-size-heading`
      * `--font-size-title`
      * `--font-size-subtitle`
      * `--font-size-body`
      * `--font-size-paragraph`
      * `--font-size-label`

      **角丸:**

      * `--radius-xs` ～ `--radius-9xl`

      **Light & Dark (テーマ固有の色とシャドウ) :**

      **色:**

      * `--background`, `--foreground`
      * `--card`, `--card-foreground`
      * `--primary`, `--primary-foreground`
      * `--secondary`, `--secondary-foreground`
      * `--accent`, `--accent-foreground`
      * `--muted`, `--muted-foreground`
      * `--destructive`, `--destructive-foreground`
      * `--popover`, `--popover-foreground`
      * `--input`, `--border`, `--ring`
      * `--color-page`
      * `--color-info`, `--color-info-foreground`
      * `--color-success`, `--color-success-foreground`
      * `--color-warning`, `--color-warning-foreground`
      * `--color-destructive-border`
      * `--color-popover-border`
      * `--color-input-foreground`
      * `--color-input-muted`

      **シャドウ:**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (resting, hover, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (resting, hover, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (resting, hover)
      * `--shadow-switch-*` (resting, hover, focus, thumb, thumb-dark)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      詳細なスタイリング例とカスタマイズ パターンについては、[Universal
      Components でスタイルとテーマをカスタマイズする](/ja/docs/get-started/universal-components/universal-components-style)を参照してください。
    </Callout>

    ***

    **toastSettings**

    Toast設定では、**Sonner** (デフォルト) と**カスタム**の2種類のプロバイダータイプをサポートしています。各プロバイダーには型安全性を高めるための独自の設定構造があります。

    <Tabs>
      <Tab title="Sonner Provider（デフォルト）">
        | Property               | Type            | Default       | Description                                                                                 |
        | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------- |
        | `provider`             | `"sonner"`      | `"sonner"`    | 組み込みの Sonner トーストライブラリを使用します                                                                |
        | `settings.position`    | `ToastPosition` | `"top-right"` | トーストの表示位置: "top-left"、"top-right"、"bottom-left"、"bottom-right"、"top-center"、"bottom-center" |
        | `settings.duration`    | `number`        | `4000`        | トーストが自動的に閉じるまでの時間 (ミリ秒)  (Sonner のデフォルト)                                                    |
        | `settings.maxToasts`   | `number`        | -             | 同時に表示できるトーストの最大数                                                                            |
        | `settings.dismissible` | `boolean`       | `true`        | ユーザー操作でトーストを手動で閉じられるかどうか (Sonner のデフォルト)                                                    |
        | `settings.closeButton` | `boolean`       | `true`        | トーストに明示的な閉じるボタンを表示するかどうか                                                                    |

        ```tsx Sonner Provider Example theme={null}
        const toastSettings = {
          provider: 'sonner', // 任意。デフォルト値です
          settings: {
            position: 'top-center',
            duration: 6000,
            maxToasts: 5,
            dismissible: true,
            closeButton: true
          }
        };
        ```
      </Tab>

      <Tab title="カスタム Provider">
        | Property          | Type                         | Required | Description         |
        | ----------------- | ---------------------------- | -------- | ------------------- |
        | `provider`        | `"custom"`                   | はい       | カスタムのトースト実装を使用します   |
        | `methods.success` | `(message: string) => void`  | いいえ      | カスタムの成功トーストハンドラー    |
        | `methods.error`   | `(message: string) => void`  | いいえ      | カスタムのエラートーストハンドラー   |
        | `methods.warning` | `(message: string) => void`  | いいえ      | カスタムの警告トーストハンドラー    |
        | `methods.info`    | `(message: string) => void`  | いいえ      | カスタムの情報トーストハンドラー    |
        | `methods.dismiss` | `(toastId?: string) => void` | いいえ      | カスタムの dismiss ハンドラー |

        ```tsx Custom Provider Example theme={null}
        const toastSettings = {
          provider: 'custom',
          methods: {
            success: (message: string) => {
              // カスタムの成功トースト実装
              myToastLibrary.success(message);
            },
            error: (message: string) => {
              // カスタムのエラートースト実装
              myToastLibrary.error(message);
            },
            warning: (message: string) => {
              // カスタムの警告トースト実装
              myToastLibrary.warning(message);
            },
            info: (message: string) => {
              // カスタムの情報トースト実装
              myToastLibrary.info(message);
            },
            dismiss: (toastId?: string) => {
              // カスタムの dismiss 実装
              myToastLibrary.dismiss(toastId);
            }
          }
        };
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          すべてのカスタムメソッドは任意です。必要なものだけ実装してください。メソッドが受け取るのはメッセージテキストのみで、スタイル、表示位置、表示時間は実装側で処理します。
        </Callout>
      </Tab>
    </Tabs>

    ***

    ## stateとパフォーマンス

    すべての Auth0 コンポーネントに対して TanStack Query のキャッシュを細かく調整します。デフォルトでは、データを 2 分間フレッシュな状態に保ち、5 分後にガベージコレクションを実行し、ウィンドウフォーカス時の再フェッチをスキップします。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>デフォルト</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            キャッシュ機能全体の有効/無効を切り替えます。<code>false</code> に設定すると、stale データは無効になり、キャッシュ済みエントリは速やかにクリアされます。
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            データが stale と見なされるまでのミリ秒数です (デフォルトは 2 分) 。ダッシュボードでは長めにし、重要なワークフローでは短めに設定してください。
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            非アクティブなクエリがガベージコレクションされるまでのミリ秒数です (デフォルトは 5 分) 。
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            ブラウザーウィンドウが再びフォーカスされたときにクエリを再フェッチするかどうかを制御します。常に最新の状態を保つ必要がある場合は{" "}
            <code>"always"</code> を使用します。
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **キャッシュを無効にする:** `{ enabled: false }` を渡します。これにより `staleTime` は自動的に 0 に設定され、ガベージコレクションまでの時間も 5 秒に短縮されるため、レンダリングのたびに最新のデータを取得します。

      **プロのヒント:** キャッシュは有効のままにして `staleTime` を短くすると、ほぼリアルタイムの更新が必要な管理パネルと統合する際に役立ちます。
    </Callout>

    <Tabs>
      <Tab title="TTLを調整">
        ```tsx App.tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{
            staleTime: 10 * 60 * 1000,
            gcTime: 15 * 60 * 1000,
            refetchOnWindowFocus: true,
          }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>

      <Tab title="キャッシュを無効にする">
        ```tsx App.tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{ enabled: false }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>