Auth0ComponentProviderは、すべてのAuth0 Universal Componentsに必要なルートラッパーです。認証状態をUIと同期し、以下の共有コンテキストを提供します:
- 認証 - Management APIリクエストに自動的に署名します。
- テーマとi18n - コンポーネントツリー全体に一貫したスタイルと翻訳を注入します。
- フィードバック - 統一されたトースト通知システムを管理します(Sonnerまたはcustom)
- パフォーマンス - 共有TanStack Queryキャッシュを実装し、冗長なAPIコールを防ぎます。
プロパティ
| プロパティ | 種類 | 必須 | 説明 |
|---|---|---|---|
authDetails | AuthDetails | No | 認証構成(domain、authProxyUrl、contextInterfaceなど) |
i18n | I18nOptions | No | 国際化の設定(currentLanguageとfallbackLanguageなど) |
themeSettings | ThemeSettings | No | テーマの構成(モード(light/dark)、バリアント(default/minimal/rounded)、CSS変数など) |
toastSettings | ToastSettings | No | トースト通知の構成(プロバイダー選択(sonner/custom)、位置、表示時間、カスタムトーストメソッドを含む) |
cacheConfig | QueryCacheConfig | No | TanStack Queryのキャッシュを制御します(デフォルトでは期限切れまで2分/GCまで5分)。最新のデータを強制的に取得するには、enabled: falseを設定します。 |
loader | React.ReactNode | No | 認証の初期化中に表示するカスタムのローディングコンポーネント |
authDetails
| プロパティ | 種類 | 必須 | 説明 |
|---|---|---|---|
domain | string | No | Auth0ドメイン(例:「your-tenant.auth0.com」) |
authProxyUrl | string | 条件付き | サーバーサイド認証用の認証プロキシサーバーのURL。RWA/Next.jsモードで必須です(Proxy Modeを有効にします)。 |
contextInterface | BasicAuth0ContextInterface | No | @auth0/auth0-react以外のフレームワーク向けのカスタム認証コンテキストインターフェイス。Auth0 React SDKを使用しない場合に認証関数(getAccessTokenSilently、loginWithRedirectなど)を提供します。 |
previewMode | boolean | No | trueの場合、APIクライアントの初期化をスキップします。ドキュメントのプレビューやデモに使用します。 |
i18n
| プロパティ | 種類 | 必須 | デフォルト | 説明 |
|---|---|---|---|---|
currentLanguage | string | Yes | - | 現在の言語コード(例:“en”、“es”、“fr”) |
fallbackLanguage | string | No | "en" | 翻訳がない場合のフォールバック言語コード |
themeSettings
| プロパティ | 種類 | デフォルト | 説明 |
|---|---|---|---|
mode | "light" | "dark" | "light" | テーマのカラーモード |
theme | "default" | "minimal" | "rounded" | "default" | 異なるスタイリングアプローチのテーマバリアント |
variables | StylingVariables | {} | common、light、darkテーマ向けのCSSカスタムプロパティ |
利用可能なCSS変数
利用可能なCSS変数
Common(すべてのテーマに適用):タイポグラフィ:
--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-xsthrough--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)
スタイリングの詳細な例やカスタマイズパターンについては、スタイリングとテーマガイドを参照してください。
toastSettings
トースト設定は、Sonner(デフォルト)またはcustomの2種類のProviderタイプをサポートしています。各Providerには、種類安全性を高めるための独自の構成構造があります。- 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プロバイダーの例
cacheConfig
すべてのAuth0コンポーネントのTanStack Queryキャッシュを細かく調整します。デフォルトでは、データを2分間staleでない状態に保ち、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を調整
- キャッシュを無効化