> ## 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 による認証、国際化、テーマ設定、トースト通知、キャッシュオプションの同期について説明します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

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

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

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

* **アイデンティティの整合性**: [Auth0 SDK](/docs/ja-jp/libraries) と [My Account API](/docs/ja-jp/manage-users/my-account-api) を橋渡しし、ユーザースコープのトークンでリクエストが署名されるようにします。
* **パフォーマンスの最適化**: アイデンティティワークフロー向けに最適化された共有 **TanStack Query** キャッシュを実装し、不要な API 呼び出しやレイアウトシフトを防ぎます。
* **デザインシステムの一貫性**: **Tailwind CSS** の変数と **Shadcn** 互換のテーマをコンポーネントツリー全体に適用します。
* **グローバルフィードバック**: セキュリティアラートやワークフローのステータスを知らせる統合トースト通知システムを管理します。

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

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

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

<Tabs>
  <Tab title="React">
    <Callout icon="shield-halved" color="#F59E0B" iconType="solid">
      **セキュリティに関する推奨事項:** 組織の設定を管理する本番環境のアプリケーションには、Auth0 では [Next.js のセットアップ](/docs/ja-jp/get-started/universal-components/auth0-component-provider#next-js) (Regular Web App) を推奨しています。Next.js のプロキシモードではトークンがサーバー側に保存されるため、Single Page Application でブラウザーに保存されるトークンと比べて、攻撃対象領域を縮小できます。React SPA モードを使用する場合は、トレードオフを理解するために [Token Storage](/docs/ja-jp/secure/security-guidance/data-security/token-storage) のガイダンスを確認してください。
    </Callout>

    ```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>モード (ライト/ダーク) 、テーマバリアント (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>

    ***

    ## ユーザー体験

    ***

    **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変数">
      **共通 (すべてのThemeに適用) :**

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

      * `--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`

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

      **色:**

      * `--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-*` (通常時、ホバー時、フォーカス時)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (通常時、ホバー時、フォーカス時)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (通常時、ホバー時)
      * `--shadow-switch-*` (通常時、ホバー時、フォーカス時、thumb、thumb-dark)
    </Accordion>

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

    ***

    **toastSettings**

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

    <Tabs>
      <Tab title="Sonner Provider（デフォルト）">
        | プロパティ                  | 型               | デフォルト         | 説明                                                                                         |
        | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------ |
        | `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">
        | プロパティ             | 型                            | 必須  | 説明                |
        | ----------------- | ---------------------------- | --- | ----------------- |
        | `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  | カスタムの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>

    ***

    ## 状態とパフォーマンス

    すべての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>

    <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") 。proxy モードでは必須です。</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>モード (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>
      );
    }
    ```

    ***

    ### proxy モードのプロパティ

    プロキシモードでの認証に関する設定です。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>

    ***

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

    ***

    **国際化**

    <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>

    ***

    **テーマ設定**

    <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-*` (通常、ホバー、フォーカス)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (通常、ホバー、フォーカス)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (通常、ホバー)
      * `--shadow-switch-*` (通常、ホバー、フォーカス、つまみ、ダークテーマ用つまみ)
    </Accordion>

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

    ***

    **toastSettings**

    Toast の設定では、**Sonner** (デフォルト) または**カスタム**の 2 種類のプロバイダーを利用できます。型安全性を高めるため、各プロバイダーには固有の設定構造が用意されています。

    <Accordion title="Sonner Provider（デフォルト）">
      | プロパティ                  | 型               | デフォルト         | 説明                                                                                         |
      | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------ |
      | `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"`                   | 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) => {
            // カスタムのdismiss実装
            myToastLibrary.dismiss(toastId);
          }
        }
      };
      ```

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

    ***

    ## 状態とパフォーマンス

    すべての 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">
    <Callout icon="shield-halved" color="#F59E0B" iconType="solid">
      **セキュリティに関する推奨事項:** 組織の設定を管理する本番環境のアプリケーションには、Auth0 は [Next.js の設定](/docs/ja-jp/get-started/universal-components/auth0-component-provider#next-js) (Regular Web App) を推奨しています。Next.js のプロキシモードではトークンをサーバー側に保存するため、Single Page Application でブラウザーにトークンを保存する場合と比べて攻撃対象領域を縮小できます。React SPA モードを使用する場合は、トレードオフを理解するために [Token Storage](/docs/ja-jp/secure/security-guidance/data-security/token-storage) のガイダンスを確認してください。
    </Callout>

    ```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>モード (ライト/ダーク) 、テーマバリアント (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>

    ***

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

    ***

    **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>

    ***

    **テーマ設定**

    <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-*` (通常、ホバー、フォーカス)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (通常、ホバー、フォーカス)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (通常、ホバー)
      * `--shadow-switch-*` (通常、ホバー、フォーカス、つまみ、ダークテーマ用つまみ)
    </Accordion>

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

    ***

    **toastSettings**

    Toast の設定では、**Sonner** (デフォルト) または**カスタム**の 2 種類のプロバイダーを利用できます。型安全性を高めるため、各プロバイダーにはそれぞれ専用の設定構造があります。

    <Tabs>
      <Tab title="Sonner Provider（デフォルト）">
        | プロパティ                  | 型               | デフォルト         | 説明                                                                                         |
        | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------ |
        | `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の例 theme={null}
        const toastSettings = {
          provider: 'sonner', // オプション。デフォルト値です
          settings: {
            position: 'top-center',
            duration: 6000,
            maxToasts: 5,
            dismissible: true,
            closeButton: true
          }
        };
        ```
      </Tab>

      <Tab title="Custom Provider">
        | プロパティ             | 型                            | 必須  | 説明               |
        | ----------------- | ---------------------------- | --- | ---------------- |
        | `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の例 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>

    ***

    ## 状態とパフォーマンス

    すべての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>

    <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>