Auth0ComponentProvider を設定する

Auth0 Universal Components は現在 Early Access です。これを使用すると、Okta’s Master Subscription Agreement に記載された該当する Free Trial 条項に同意したものとみなされます。詳細については、Product Release Stages を参照してください。

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

利点

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

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

統合アーキテクチャ

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

`Auth0ComponentProvider` を設定する

React
Next.js
shadcn

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`	いいえ	mode (light/dark) 、テーマバリアント (default/minimal/rounded) 、CSS 変数などを含むテーマ設定です。
`toastSettings`	`ToastSettings`	いいえ	プロバイダーの選択 (sonner/custom) 、表示位置、表示時間、カスタム toast メソッドなどを含むトースト通知の設定です。
`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 変数

共通 (すべてのテーマに適用) :タイポグラフィ:

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

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

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

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

Sonner Provider Example

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

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	閉じるためのカスタムハンドラー

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) => {
      // 閉じるためのカスタム実装
      myToastLibrary.dismiss(toastId);
    }
  }
};

すべてのカスタムメソッドは省略可能です。必要なものだけ実装してください。各メソッドが受け取るのはメッセージテキストのみで、スタイル、位置、表示時間は実装側で処理します。

stateとパフォーマンス

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

プロパティ	型	デフォルト	説明
`enabled`	`boolean`	`true`	キャッシュ機能全体の有効 / 無効を切り替えます。`false` に設定すると、古いデータの利用が無効になり、キャッシュされたエントリは速やかにクリアされます。
`staleTime`	`number`	`120000`	データが古い状態になるまでのミリ秒数です。デフォルトは 2 分です。Dashboard では長めにし、重要なワークフローでは短めにしてください。
`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”) 。プロキシモードでは必須です。
`mode`	`’proxy’`	はい	Next.js では、サーバーサイド認証に常に `‘proxy’` モードを使用します。
`proxyConfig`	`{ baseUrl: string }`	はい	認証プロキシサーバーのベース URL を含むプロキシ設定です。
`previewMode`	`boolean`	いいえ	`true` の場合、API クライアントの初期化をスキップします。ドキュメントのプレビューやデモで使用します。
`i18n`	`I18nOptions`	いいえ	currentLanguage と fallbackLanguage を含む国際化設定です。
`themeSettings`	`ThemeSettings`	いいえ	mode (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>
  );
}

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

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

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

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

i18n

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

themeSettings

プロパティ	型	デフォルト	説明
`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-* (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)

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

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

Sonner Provider Example

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 Example

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

カスタムメソッドはすべて任意です。必要なものだけを実装してください。各メソッドに渡されるのはメッセージテキストのみで、スタイル、配置、表示時間の管理は実装側で行います。

stateとパフォーマンス

プロパティ	型	デフォルト	説明
`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>

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`	いいえ	mode (light/dark) 、テーマバリアント (default/minimal/rounded) 、CSS 変数を含むテーマ設定です。
`toastSettings`	`ToastSettings`	いいえ	プロバイダーの選択 (sonner/custom) 、表示位置、表示時間、カスタム toast メソッドを含むトースト通知の設定です。
`cacheConfig`	`QueryCacheConfig`	いいえ	TanStack Query のキャッシュを制御します (デフォルトでは stale は 2 分、GC は 5 分) 。常に最新のデータを取得するには、`enabled: false` を設定します。
`loader`	`React.ReactNode`	いいえ	認証の初期化中に表示するカスタムのローディングコンポーネントです。

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

i18n

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

themeSettings

プロパティ	型	デフォルト	説明
`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

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)

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

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

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

Sonner Provider Example

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

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 ハンドラー

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

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

stateとパフォーマンス

プロパティ	型	デフォルト	説明
`enabled`	`boolean`	`true`	キャッシュ機能全体の有効/無効を切り替えます。`false` に設定すると、stale データは無効になり、キャッシュ済みエントリは速やかにクリアされます。
`staleTime`	`number`	`120000`	データが stale と見なされるまでのミリ秒数です (デフォルトは 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>

​利点

​統合アーキテクチャ

​Auth0ComponentProvider を設定する

​プロパティ

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

​stateとパフォーマンス

​プロパティ

​プロキシモードの設定

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

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

​stateとパフォーマンス

​プロパティ

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

​stateとパフォーマンス

利点

統合アーキテクチャ

`Auth0ComponentProvider` を設定する

プロパティ

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

stateとパフォーマンス

プロパティ

プロキシモードの設定

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

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

stateとパフォーマンス

プロパティ

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

stateとパフォーマンス