Auth0ComponentProvider を設定する

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

利点

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

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

連携アーキテクチャ

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

`Auth0ComponentProvider` を設定する

React
Next.js
shadcn

セキュリティに関する推奨事項: 組織の設定を管理する本番環境のアプリケーションには、Auth0 では Next.js のセットアップ (Regular Web App) を推奨しています。Next.js のプロキシモードではトークンがサーバー側に保存されるため、Single Page Application でブラウザーに保存されるトークンと比べて、攻撃対象領域を縮小できます。React SPA モードを使用する場合は、トレードオフを理解するために Token Storage のガイダンスを確認してください。

App.tsx

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>
  );
}

プロパティ

プロパティ	型	必須	説明
`domain`	`string`	はい	Auth0 テナントのドメイン (“YOUR_AUTH0_TENANT.auth0.com”)。
`previewMode`	`boolean`	いいえ	`true` の場合、API クライアントの初期化をスキップします。ドキュメントのプレビューやデモで使用します。
`i18n`	`I18nOptions`	いいえ	currentLanguage と fallbackLanguage を含む国際化設定。
`themeSettings`	`ThemeSettings`	いいえ	モード (ライト/ダーク) 、テーマバリアント (default/minimal/rounded) 、CSS 変数を含むテーマ設定。
`toastSettings`	`ToastSettings`	いいえ	プロバイダーの選択 (sonner/custom) 、表示位置、表示時間、カスタムトーストメソッドを含むトースト通知設定。
`cacheConfig`	`QueryCacheConfig`	いいえ	TanStack Query のキャッシュを制御します (デフォルトでは stale が 2 分、GC が 5 分) 。常に最新のデータを取得するには、`enabled: false` を設定します。
`loader`	`React.ReactNode`	いいえ	認証の初期化中に表示するカスタムローディングコンポーネント。

ユーザー体験

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

プロパティ	型	必須	デフォルト	説明
`currentLanguage`	`string`	はい	-	現在の言語コード (例：“en”、“es”、“fr”)
`fallbackLanguage`	`string`	いいえ	`”en”`	翻訳が存在しない場合に使用するフォールバック言語コード

themeSettings

プロパティ	型	デフォルト	説明
`mode`	`”light” \| “dark"`	`"light”`	テーマのカラーモード
`theme`	`”default” \| “minimal” \| “rounded"`	`"default”`	スタイルが異なるテーマバリアント
`variables`	`StylingVariables`	共通、ライト、ダークテーマ用のCSSカスタムプロパティ

利用可能な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)

詳細なスタイリングの例やカスタマイズのパターンについては、Universal Components を使用したスタイルとテーマのカスタマイズを参照してください。

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

Sonner Provider（デフォルト）
Custom 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`	トーストに閉じるボタンを表示するかどうか

Sonner Provider Example

const toastSettings = {
  provider: 'sonner', // 任意。デフォルト値です
  settings: {
    position: 'top-center',
    duration: 6000,
    maxToasts: 5,
    dismissible: true,
    closeButton: true
  }
};

プロパティ	型	必須	説明
`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ハンドラー

Custom Provider Example

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);
    }
  }
};

すべてのカスタムメソッドは任意です。必要なものだけを実装してください。メソッドはメッセージテキストのみを受け取ります。スタイリング、配置、タイミングは実装側で処理します。

状態とパフォーマンス

すべてのAuth0コンポーネントにおけるTanStack Queryのキャッシュ動作を細かく調整します。デフォルトでは、データを2分間最新の状態に保ち、5分後にガベージコレクションし、ウィンドウがフォーカスされた際の再フェッチは行いません。

プロパティ	型	デフォルト	説明
`enabled`	`boolean`	`true`	キャッシュ機能全体の有効／無効を切り替えます。`false`に設定すると、古いデータは使用されなくなり、キャッシュ済みのエントリは速やかに削除されます。
`staleTime`	`number`	`120000`	データが古いものと見なされるまでのミリ秒数です。デフォルトは2分です。ダッシュボードでは長く、重要なワークフローでは短く設定します。
`gcTime`	`number`	`300000`	非アクティブなクエリがガベージコレクションされるまでのミリ秒数です。デフォルトは5分です。
`refetchOnWindowFocus`	`boolean \| “always”`	`false`	ブラウザが再びフォーカスを得たときにクエリを再取得するかどうかを指定します。常に最新の状態を保つには `“always”`を使用します。

キャッシュを無効にする: { enabled: false } を渡します。これにより、staleTime は自動的に 0 に設定され、ガベージコレクションの保持期間は 5 秒に短縮されるため、レンダリングのたびに最新のデータが取得されます。プロのヒント: ほぼリアルタイムの更新が必要な管理パネルと連携する場合は、キャッシュを有効のままにして staleTime を短くします。

TTL を調整
キャッシュを無効にする

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{
    staleTime: 10 * 60 * 1000,
    gcTime: 15 * 60 * 1000,
    refetchOnWindowFocus: true,
  }}
>
  <App />
</Auth0ComponentProvider>

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{ enabled: false }}
>
  <App />
</Auth0ComponentProvider>

layout.tsx

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>
  );
}

プロパティ

プロパティ	型	必須	説明
`domain`	`string`	はい	Auth0 テナントのドメイン (例: “your-tenant.auth0.com”) 。proxy モードでは必須です。
`mode`	`’proxy’`	はい	Next.js では、サーバーサイド認証に必ず `‘proxy’` モードを使用してください。
`proxyConfig`	`{ baseUrl: string }`	はい	認証プロキシサーバーのベース URL を指定するプロキシ設定。
`previewMode`	`boolean`	いいえ	`true` の場合、API クライアントの初期化をスキップします。ドキュメントのプレビューやデモで使用します。
`i18n`	`I18nOptions`	いいえ	currentLanguage と fallbackLanguage を含む国際化設定。
`themeSettings`	`ThemeSettings`	いいえ	モード (light/dark) 、テーマバリアント (default/minimal/rounded) 、CSS 変数を含むテーマ設定。
`toastSettings`	`ToastSettings`	いいえ	プロバイダーの選択 (sonner/custom) 、表示位置、表示時間、カスタムトーストメソッドを含むトースト通知設定。
`cacheConfig`	`QueryCacheConfig`	いいえ	TanStack Query のキャッシュを制御します (デフォルトでは stale が 2 分、GC が 5 分) 。常に最新のデータを取得するには、`enabled: false` を設定します。
`loader`	`React.ReactNode`	いいえ	認証の初期化中に表示するカスタムローディングコンポーネント。

プロキシモードを設定する

Next.jsアプリケーションでは、サーバーサイド認証でプロキシモードを使用します。

layout.tsx

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 を使用する場合に必要です。

プロパティ	型	必須	説明
`baseUrl`	`string`	はい	認証プロキシサーバーのURL (例: “/api/auth”) 。API 呼び出しでは、このベースパスが追加されます。

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

国際化

プロパティ	型	必須	デフォルト	説明
`currentLanguage`	`string`	はい	-	現在の言語コード (例：“en”、“es”、“fr”)
`fallbackLanguage`	`string`	いいえ	`”en”`	翻訳がない場合に使用するフォールバック言語コード

テーマ設定

プロパティ	型	デフォルト	説明
`mode`	`”light” \| “dark"`	`"light”`	テーマのカラーモード
`theme`	`”default” \| “minimal” \| “rounded"`	`"default”`	スタイルが異なるテーマバリアント
`variables`	`StylingVariables`	共通、ライト、ダークテーマ用のCSSカスタムプロパティ

利用可能な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-* (通常、ホバー、フォーカス、つまみ、ダークテーマ用つまみ)

スタイリングの詳細な例やカスタマイズの方法については、Universal Components でスタイルとテーマをカスタマイズするを参照してください。

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

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`	トーストに閉じるボタンを表示するかどうか

Sonner Provider Example

const toastSettings = {
  provider: 'sonner', // 任意。これがデフォルト値です
  settings: {
    position: 'top-center',
    duration: 6000,
    maxToasts: 5,
    dismissible: true,
    closeButton: true
  }
};

カスタムプロバイダー

プロパティ	型	必須	説明
`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	カスタムの非表示ハンドラー

Custom Provider Example

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);
    }
  }
};

カスタムメソッドはすべて任意です。必要なものだけを実装してください。メソッドが受け取るのはメッセージテキストのみで、スタイリング、配置、表示タイミングは実装側で処理します。

状態とパフォーマンス

すべての Auth0 コンポーネントに対して、TanStack Query のキャッシュを細かく調整できます。デフォルトでは、データは 2 分間有効な状態を維持し、5 分後にガベージコレクションされ、ウィンドウのフォーカス時の再取得は行われません。

プロパティ	型	デフォルト	説明
`enabled`	`boolean`	`true`	キャッシュ機能全体の有効／無効を切り替えます。`false` に設定すると、古いデータは無効化され、キャッシュ済みのエントリは速やかに削除されます。
`staleTime`	`number`	`120000`	データが古くなるまでの時間 (ミリ秒、デフォルトは2分) 。ダッシュボードでは長く設定し、重要なワークフローでは短く設定します。
`gcTime`	`number`	`300000`	非アクティブなクエリがガベージコレクションされるまでの時間 (ミリ秒、デフォルトは5分) 。
`refetchOnWindowFocus`	`boolean \| “always”`	`false`	ブラウザーに再びフォーカスが戻ったときにクエリを再取得するかどうかを制御します。常に最新の状態を保つには `“always”` を使用します。

キャッシュを無効化: { enabled: false } を渡します。これにより staleTime が自動的に 0 に設定され、ガベージコレクションまでの時間が 5 秒に短縮されるため、レンダリングのたびに最新のデータを取得します。プロのヒント: ほぼリアルタイムの更新が必要な管理パネルと連携する場合は、キャッシュを有効にしたまま staleTime を短くしてください。

TTL を調整する

layout.tsx

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

キャッシュを無効にする

layout.tsx

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  cacheConfig={{ enabled: false }}
>
  <App />
</Auth0ComponentProvider>

セキュリティに関する推奨事項: 組織の設定を管理する本番環境のアプリケーションには、Auth0 は Next.js の設定 (Regular Web App) を推奨しています。Next.js のプロキシモードではトークンをサーバー側に保存するため、Single Page Application でブラウザーにトークンを保存する場合と比べて攻撃対象領域を縮小できます。React SPA モードを使用する場合は、トレードオフを理解するために Token Storage のガイダンスを確認してください。

App.tsx

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>
  );
}

プロパティ

プロパティ	型	必須	説明
`domain`	`string`	はい	Auth0 テナントのドメイン (例：“your-tenant.auth0.com”) 。
`authContext`	`ContextInterface`	いいえ	`@auth0/auth0-react` を使用しない SPA 用のカスタム認証コンテキスト。`getAccessTokenSilently` などの認証関数を提供します。
`previewMode`	`boolean`	いいえ	`true` の場合、API クライアントの初期化をスキップします。ドキュメントのプレビューやデモで使用します。
`i18n`	`I18nOptions`	いいえ	currentLanguage と fallbackLanguage を含む国際化設定。
`themeSettings`	`ThemeSettings`	いいえ	モード (ライト/ダーク) 、テーマバリアント (default/minimal/rounded) 、CSS 変数を含むテーマ設定。
`toastSettings`	`ToastSettings`	いいえ	プロバイダーの選択 (sonner/custom) 、表示位置、表示時間、カスタムトーストメソッドを含むトースト通知の設定。
`cacheConfig`	`QueryCacheConfig`	いいえ	TanStack Query のキャッシュを制御します (デフォルトでは stale は 2 分、GC は 5 分) 。常に最新のデータを取得するには、`enabled: false` を設定します。
`loader`	`React.ReactNode`	いいえ	認証の初期化中に表示するカスタムローディングコンポーネント。

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

i18n

プロパティ	型	必須	デフォルト	説明
`currentLanguage`	`string`	はい	-	現在の言語コード (例：“en”、“es”、“fr”)
`fallbackLanguage`	`string`	いいえ	`”en”`	翻訳が存在しない場合に使用するフォールバック言語コード

テーマ設定

プロパティ	型	デフォルト	説明
`mode`	`”light” \| “dark"`	`"light”`	テーマのカラーモード
`theme`	`”default” \| “minimal” \| “rounded"`	`"default”`	スタイリングが異なるテーマバリアント
`variables`	`StylingVariables`	共通、ライト、ダークテーマ用のCSSカスタムプロパティ

利用可能な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-* (通常、ホバー、フォーカス、つまみ、ダークテーマ用つまみ)

スタイリングの詳細な例やカスタマイズのパターンについては、Universal Components のスタイルとテーマをカスタマイズするを参照してください。

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

Sonner Provider（デフォルト）
Custom 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`	トーストに閉じるボタンを表示するかどうか

Sonner Providerの例

const toastSettings = {
  provider: 'sonner', // オプション。デフォルト値です
  settings: {
    position: 'top-center',
    duration: 6000,
    maxToasts: 5,
    dismissible: true,
    closeButton: true
  }
};

プロパティ	型	必須	説明
`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`	いいえ	カスタム閉じるハンドラー

Custom Providerの例

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);
    }
  }
};

すべてのカスタムメソッドはオプションです。必要なものだけを実装してください。メソッドが受け取るのはメッセージテキストのみです。スタイリング、表示位置、表示時間は実装側で処理します。

状態とパフォーマンス

すべてのAuth0コンポーネントでTanStack Queryのキャッシュを細かく調整できます。デフォルトでは、データは2分間最新の状態に保たれ、5分後にガベージコレクションされ、ウィンドウへのフォーカス時に再フェッチは行われません。

プロパティ	型	デフォルト	説明
`enabled`	`boolean`	`true`	キャッシュ機能全体の有効／無効を切り替えます。`false` に設定すると、古いデータは無効になり、キャッシュ済みのエントリは速やかに削除されます。
`staleTime`	`number`	`120000`	データが古くなるまでのミリ秒数 (デフォルトは 2 分) 。ダッシュボードでは長くし、重要なワークフローでは短くします。
`gcTime`	`number`	`300000`	非アクティブなクエリがガベージコレクションされるまでのミリ秒数 (デフォルトは 5 分) 。
`refetchOnWindowFocus`	`boolean \| “always”`	`false`	ブラウザーが再びフォーカスを得たときにクエリを再取得するかどうかを制御します。常に最新の状態に保つ必要がある場合は `“always”` を使用します。

キャッシュを無効にする: { enabled: false } を渡します。これにより staleTime は自動的に 0 に設定され、ガベージコレクションの保持期間が 5 秒に短縮されるため、レンダリングのたびに最新データが取得されます。プロのヒント: ほぼリアルタイムの更新が必要な管理パネルと連携する場合は、キャッシュを有効にしたまま staleTime を短くしてください。

TTL の調整
キャッシュを無効にする

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{
    staleTime: 10 * 60 * 1000,
    gcTime: 15 * 60 * 1000,
    refetchOnWindowFocus: true,
  }}
>
  <App />
</Auth0ComponentProvider>

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{ enabled: false }}
>
  <App />
</Auth0ComponentProvider>

Web コンポーネント

iOS コンポーネント

Android コンポーネント

Auth0ComponentProvider を設定する

利点

連携アーキテクチャ

`Auth0ComponentProvider` を設定する

プロパティ

ユーザー体験

状態とパフォーマンス

プロパティ

プロキシモードを設定する

proxy モードのプロパティ

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

状態とパフォーマンス

プロパティ

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

状態とパフォーマンス

​利点

​連携アーキテクチャ

​Auth0ComponentProvider を設定する

​プロパティ

​ユーザー体験

​状態とパフォーマンス

​プロパティ

​プロキシモードを設定する

​proxy モードのプロパティ

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

​状態とパフォーマンス

​プロパティ

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

​状態とパフォーマンス

利点

連携アーキテクチャ

`Auth0ComponentProvider` を設定する

プロパティ

ユーザー体験

状態とパフォーマンス

プロパティ

プロキシモードを設定する

proxy モードのプロパティ

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

状態とパフォーマンス

プロパティ

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

状態とパフォーマンス