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

# Auth0 Universal Components

> Auth0 Universal Components のインストール方法と設定方法について説明します。

<Warning>
  Auth0 Universal Components は現在 Early Access 段階です。これを使用すると、
  [Okta's Master Subscription
  Agreement](https://www.okta.com/agreements/) の該当する Free Trial 条項に同意したものとみなされます。詳しくは、[Product
  Release Stages](/ja/docs/troubleshoot/product-lifecycle/product-release-stages) を参照してください。
</Warning>

Auth0 Universal Components は、アプリケーション内でアイデンティティパイプラインとユーザー体験を構築するために利用できる、事前構築済み UI コンポーネントのライブラリです。[Auth0 SDKs](/ja/docs/libraries) をベースに、API ファーストのアプローチで構築されており、認証フロー、組織管理、MFA の登録などの Auth0 サービスを、UI を手作業で構築したり高権限のバックエンドプロキシを管理したりすることなく埋め込めます。

Universal Components を使用すると、次のことができます。

* Auth0 の組織を作成および管理する
* 組織内のユーザーのロールとアカウントを管理する
* Auth0 または [ソーシャルまたはエンタープライズ IDプロバイダー (IdP) ](/ja/docs/authenticate/single-sign-on/outbound-single-sign-on) による [シングルサインオン](/ja/docs/authenticate/single-sign-on) を管理する
* 独自のブランディングとテーマでログイン体験をカスタマイズする
* ユーザーが自分のアカウント情報を確認して更新できるようにする。これには、認証方法やアカウント復旧方法をユーザー自身が選択できるようにすることも含まれます。

<div id="how-it-works">
  ## 仕組み
</div>

Universal Components は、アプリケーションと Auth0 の間のプレゼンテーション層として機能し、アプリケーション、[My Account](/ja/docs/manage-users/my-account-api) API、[My Organization](/ja/docs/api/myorganization) API、および Auth0 SDK 間の通信を調整します。

Auth0 SDK はロジック層として機能し、認証フロー、トークン交換、セッション管理を処理します。My Account API は、認証済みユーザーが認証エクスペリエンスをセルフサービスで管理するための機能を提供します。たとえば、認証済みユーザーは MFA やパスキーなどの認証方法を自分で選択できます。My Organization API は、ビジネス顧客が Auth0 テナント内で自社の組織を管理できるようにする、安全な組織スコープのインターフェースを提供します。この API は、組み込み型の委任管理や API ファーストの統合を支える技術的な基盤です。

Universal Components は、[Shadcn](https://ui.shadcn.com/docs/components) コンポーネントと [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) スタイルシートを活用して、独自のブランディングやテーマに合わせてコンポーネントをカスタマイズします。

<div id="prerequisites">
  ## 前提条件
</div>

Auth0 Universal Components を使用するには、次の準備が必要です。

* [Auth0 アカウントを作成](https://auth0.com)し、My Account API と My Organization API を有効にした Auth0 テナントを設定する
* [Auth0 アプリケーションを登録](/ja/docs/get-started/auth0-overview/create-applications)する。Auth0 アプリケーションがまだない場合は、Auth0 React または Next.js の [Quickstarts](https://auth0.com/docs/quickstart/spa/react) から始められます。
* Universal Component ライブラリを構築するために [Shadcn UI](https://ui.shadcn.com/docs/installation) をインストールする
* ブランドに合わせてコンポーネントをスタイル設定するために [Tailwind CSS v.3](https://tailwindcss.com/docs/installation) をインストールする
* クライアントサイド認証の場合は、**React v.16.11+** をインストールする。
* サーバーサイド認証の場合は、**Next.js v.13+** をインストールする。

<Tabs>
  <Tab title="React">
    ## Universal Components をインストールする

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        必要なピア依存関係 (`react-hook-form` と `@auth0/auth0-react`) とあわせてパッケージをインストールします。
      </Callout>
    </CodeGroup>

    ## アプリケーションを設定する

    1. `Auth0Provider` と `Auth0ComponentProvider` でアプリケーションをラップします。

    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
    import "@auth0/universal-components-react/styles";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;

    function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
          authorizationParams={{
            redirect_uri: window.location.origin,
          }}
          interactiveErrorHandler='popup' // Universal Login ポップアップ経由でのステップアップ認証チャレンジを処理するために必要
        >
          <Auth0ComponentProvider domain={domain}>
            {/* アプリのコンポーネント */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    2. Universal Components をインポートします:

    ```tsx OrganizationManagementPage.tsx theme={null}
    import { useAuth0 } from "@auth0/auth0-react";
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";

    function OrganizationManagementPage() {
      const { isAuthenticated, isLoading } = useAuth0();

      if (isLoading) return <div>Loading...</div>;
      if (!isAuthenticated) return <div>Please log in</div>;

      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Universal Components の設定

    `Auth0ComponentProvider` は、すべてのコンポーネントにおける認証、キャッシュ、国際化、トースト通知を管理します。

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      domain="your-tenant.auth0.com"
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* アプリのコンポーネント */}
    </Auth0ComponentProvider>
    ```

    ## スタイルコンポーネント

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      インポートしたスタイルシート (`@auth0/universal-components-react/styles`) を使用すると、
      すべてのコンポーネントのスタイルが有効になります。Tailwind v4 を使用している場合は、CSS ファイルに `@import
                                              "@auth0/universal-components-react/tailwind"` を追加してください。
    </Callout>

    CSS 変数を使用してブランディングをカスタマイズします。

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタンのテキスト */
    }
    ```

    詳しくは、[Style Universal Components](/ja/docs/get-started/universal-components/universal-components-style)を参照してください。
  </Tab>

  <Tab title="Next.js">
    ## Universal Components をインストールする

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `@auth0/auth0-react` は不要です。Next.js の実装では、サーバーサイド認証を使用するプロキシ
      モードを採用します。
    </Callout>

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form
      ```
    </CodeGroup>

    ## アプリケーションを設定する

    1. アプリケーションを `Auth0Provider` と `Auth0ComponentProvider` でラップします。

    `/root` レイアウトに、プロキシモードで `Auth0ComponentProvider` を追加します。

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
    import "@auth0/universal-components-react/styles";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    2. Universal Components をインポートします。

    ```tsx page.tsx theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";

    export default function OrganizationManagementPage() {
      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Universal Components を設定する

    `Auth0ComponentProvider` は、すべてのコンポーネントの認証、キャッシュ、国際化、トースト通知を管理します。Next.js では、サーバーサイド認証にプロキシモードを使用してください。

    ```tsx layout.tsx theme={null}
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* アプリのコンポーネント */}
    </Auth0ComponentProvider>
    ```

    ## スタイルコンポーネント

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      インポートしたスタイルシート (`@auth0/universal-components-react/styles`) を使用すると、
      すべてのコンポーネントのスタイルが有効になります。Tailwind v4 を使用している場合は、CSS ファイルに `@import
                                              "@auth0/universal-components-react/tailwind"` を追加してください。
    </Callout>

    CSS 変数を使用してブランディングをカスタマイズします。

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタンのテキスト */
    }
    ```

    詳しくは、[Style Universal Components](/ja/docs/get-started/universal-components/universal-components-style)を参照してください。
  </Tab>

  <Tab title="shadcn">
    ## Universal Components をインストールする

    Universal Components では `@/...` インポートを使用します。まず、パスエイリアスとプロジェクトの依存関係を設定します。

    ```bash theme={null}
    npx shadcn@latest init
    ```

    次に、Shadcn CLI を使用して Universal Components を個別にインストールします。たとえば、次のとおりです。

    ```bash theme={null}
    npx shadcn@latest add @auth0/organization-details-edit
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Shadcn CLI は、コンポーネントのソースコードに加え、共有ユーティリティと Auth0 統合に使用する
      `@auth0/universal-components-core` 依存関係をインストールします。
    </Callout>

    ## アプリケーションを設定する

    1. アプリケーションを `Auth0Provider` と `Auth0ComponentProvider` でラップします。

    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;

    function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
          authorizationParams={{
            redirect_uri: window.location.origin,
          }}
          interactiveErrorHandler='popup' // Universal Login ポップアップ経由のステップアップ認証チャレンジを処理するために必要
        >
          <Auth0ComponentProvider domain={domain}>
            {/* アプリのコンポーネント */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    2. Universal Components をインポートします:

    ```tsx OrganizationManagementPage.tsx theme={null}
    import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

    function OrganizationManagementPage() {
      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Universal Components の設定

    `Auth0ComponentProvider` は、すべてのコンポーネントにおける認証、キャッシュ、国際化、トースト通知を管理します。

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      domain="your-tenant.auth0.com"
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* アプリのコンポーネント */}
    </Auth0ComponentProvider>
    ```

    ## スタイルコンポーネント

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Shadcn のスタイルはすでに Tailwind のビルドに含まれているため、スタイルを
      追加でインポートする必要はありません。
    </Callout>

    CSS 変数を使用してブランディングをカスタマイズします。

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタンのテキスト */
    }
    ```

    詳しくは、[Universal Components でスタイルとテーマをカスタマイズする](/ja/docs/get-started/universal-components/universal-components-style)を参照してください。
  </Tab>
</Tabs>

<div id="example-implementations">
  ## 実装例
</div>

完全に動作するサンプルは、サンプルアプリケーションで確認できます。

<Card title="コード例" icon="github" href="https://github.com/auth0/auth0-ui-components/tree/main/examples">
  実装パターンを一通り備えた React SPA (npm) 、React SPA (shadcn) 、Next.js のサンプルアプリケーション
</Card>

<CardGroup cols={2}>
  <Card title="SaaStart ライブデモ" icon="play" href="https://universal-components-saastart.vercel.app/">
    ライブ参照用の B2B SaaS アプリで、My Organization Components の動作を確認できます
  </Card>

  <Card title="SaaS Starter リポジトリ" icon="github" href="https://github.com/auth0-ui-components/saas-starter-uicomponents">
    モダンな B2B SaaS Web アプリケーションを構築するための、安全かつ高性能な出発点です。
  </Card>
</CardGroup>

<div id="learn-more">
  ## 詳しく見る
</div>

* [Auth0ComponentProvider を設定する](/ja/docs/get-started/universal-components/auth0-component-provider)
* [Universal Components でスタイルとテーマをカスタマイズする](/ja/docs/get-started/universal-components/universal-components-style)