メインコンテンツへスキップ
Auth0ComponentProviderは、すべてのAuth0 Universal Componentsに必要なルートラッパーです。認証状態をUIと同期し、以下の共有コンテキストを提供します:
  • 認証 - Management APIリクエストに自動的に署名します。
  • テーマとi18n - コンポーネントツリー全体に一貫したスタイルと翻訳を注入します。
  • フィードバック - 統一されたトースト通知システムを管理します(Sonnerまたはcustom)
  • パフォーマンス - 共有TanStack Queryキャッシュを実装し、冗長なAPIコールを防ぎます。
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 }}
    >
      <Auth0ComponentProvider
        authDetails={{ domain: "your-tenant.auth0.com" }}
      >
        {/* Your app with Auth0 Universal Components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロパティ

プロパティ種類必須説明
authDetailsAuthDetailsNo認証構成(domain、authProxyUrl、contextInterfaceなど)
i18nI18nOptionsNo国際化の設定(currentLanguageとfallbackLanguageなど)
themeSettingsThemeSettingsNoテーマの構成(モード(light/dark)、バリアント(default/minimal/rounded)、CSS変数など)
toastSettingsToastSettingsNoトースト通知の構成(プロバイダー選択(sonner/custom)、位置、表示時間、カスタムトーストメソッドを含む)
cacheConfigQueryCacheConfigNoTanStack Queryのキャッシュを制御します(デフォルトでは期限切れまで2分/GCまで5分)。最新のデータを強制的に取得するには、enabled: falseを設定します。
loaderReact.ReactNodeNo認証の初期化中に表示するカスタムのローディングコンポーネント

authDetails

プロパティ種類必須説明
domainstringNoAuth0ドメイン(例:「your-tenant.auth0.com」)
authProxyUrlstring条件付きサーバーサイド認証用の認証プロキシサーバーのURL。RWA/Next.jsモードで必須です(Proxy Modeを有効にします)。
contextInterfaceBasicAuth0ContextInterfaceNo@auth0/auth0-react以外のフレームワーク向けのカスタム認証コンテキストインターフェイス。Auth0 React SDKを使用しない場合に認証関数(getAccessTokenSilently、loginWithRedirectなど)を提供します。
previewModebooleanNotrueの場合、APIクライアントの初期化をスキップします。ドキュメントのプレビューやデモに使用します。

i18n

プロパティ種類必須デフォルト説明
currentLanguagestringYes-現在の言語コード(例:“en”、“es”、“fr”)
fallbackLanguagestringNo"en"翻訳がない場合のフォールバック言語コード

themeSettings

プロパティ種類デフォルト説明
mode"light" | "dark""light"テーマのカラーモード
theme"default" | "minimal" | "rounded""default"異なるスタイリングアプローチのテーマバリアント
variablesStylingVariables{}common、light、darkテーマ向けの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-xs through --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)
スタイリングの詳細な例やカスタマイズパターンについては、スタイリングとテーマガイドを参照してください。

toastSettings

トースト設定は、Sonner(デフォルト)またはcustomの2種類のProviderタイプをサポートしています。各Providerには、種類安全性を高めるための独自の構成構造があります。
プロパティ種類デフォルト説明
provider"sonner""sonner"組み込みのSonnerトーストライブラリを使用します
settings.positionToastPosition"top-right"トーストが表示される位置:“top-left”、“top-right”、“bottom-left”、“bottom-right”、“top-center”、“bottom-center”
settings.durationnumber4000トーストが自動的に閉じるまでの時間(ミリ秒)(Sonnerのデフォルト)
settings.maxToastsnumber-同時に表示されるトーストの最大数
settings.dismissiblebooleantrueユーザー操作でトーストを手動で閉じられるかどうか(Sonnerのデフォルト)
settings.closeButtonbooleantrueトーストに閉じるボタンを表示するかどうか
Sonnerプロバイダーの例
const toastSettings = {
  provider: 'sonner', // Optional, this is the default
  settings: {
    position: 'top-center',
    duration: 6000,
    maxToasts: 5,
    dismissible: true,
    closeButton: true
  }
};

cacheConfig

すべてのAuth0コンポーネントのTanStack Queryキャッシュを細かく調整します。デフォルトでは、データを2分間staleでない状態に保ち、5分後にガベージコレクションを行い、ウィンドウフォーカス時の再取得をスキップします。
プロパティ種類デフォルト説明
enabledbooleantrueキャッシュを完全に切り替えます。falseに設定すると、期限切れのデータが無効化され、キャッシュエントリがすぐにクリアされます。
staleTimenumber120000データが期限切れになるまでの時間(ミリ秒)(デフォルトは2分)。ダッシュボードには長めに、重要なワークフローには短めに設定してください。
gcTimenumber300000非アクティブなクエリがガベージコレクションされるまでの時間(ミリ秒)(デフォルトは5分)。
refetchOnWindowFocusboolean | "always"falseブラウザーがフォーカスを取り戻す際にクエリを再取得するかどうかを制御します。最新さを厳密にするには、"always"を使用してください。
キャッシュを無効にする: { enabled: false }を渡します。 これによりstaleTimeが自動的に0に設定され、ガベージコレクションのウィンドウが5秒に短縮されるため、レンダリングのたびに最新データを取得します。ヒント: 管理パネルなどリアルタイムに近い更新が必要な場面でも、キャッシュは有効にしたまま staleTimeを短くすることをお勧めします。
<Auth0ComponentProvider
  authDetails={{ domain: 'your-tenant.auth0.com', authProxyUrl: '/api/auth' }}
  cacheConfig={{
    staleTime: 10 * 60 * 1000,
    gcTime: 15 * 60 * 1000,
    refetchOnWindowFocus: true,
  }}
>
  <App />
</Auth0ComponentProvider>