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

# Web アプリケーション用 Universal Components

> Web アプリケーション用の Auth0 Universal Components をインストールして設定する方法を説明します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

Auth0 の [Universal Components for Web](https://github.com/auth0/auth0-ui-components) ライブラリは、[React](https://react.dev/) と [Next.js](https://nextjs.org/) を使用して、Auth0 のアイデンティティフロー向けに事前構築された埋め込み可能な UI を提供します。

Universal Components for Web は [Auth0 SDK](/docs/ja-jp/libraries) を基盤としており、[My Organization API](/docs/ja-jp/api/myorganization) と統合することで、Organizations、ドメイン、SSO プロバイダーの管理など、埋め込み型の Delegated Administration を実現します。

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

Web 向け Auth0 Universal Components を使用するには、次の条件を満たす必要があります。

* [Auth0 アカウント](https://auth0.com)を作成し、My Organization API を有効にした Auth0 テナントを設定します。
* [Auth0 アプリケーションを登録します](/docs/ja-jp/get-started/auth0-overview/create-applications)。Auth0 アプリケーションがない場合は、Auth0 React または Next.js の [Quickstarts](https://auth0.com/docs/quickstart/spa/react) を利用して始めることができます。
* クライアント側の認証には、**React v.16.11+** をインストールします。
* サーバー側の認証には、**Next.js v.13+** をインストールします。

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

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

      ```bash pnpm wrap lines 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` (クライアントサイドの SPA 認証に必要) とともにインストールします。Next.js タブではプロキシモードを使用するため、`@auth0/auth0-react` は不要です。
      </Callout>
    </CodeGroup>

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

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

    ```tsx App.tsx wrap lines 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 wrap lines theme={null}
    import { useAuth0 } from "@auth0/auth0-react";
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react/spa";

    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 wrap lines 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 wrap lines theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタン上のテキスト色 */
    }
    ```

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

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

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

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

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

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

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

       ルートレイアウトで、proxy モードの `Auth0ComponentProvider` を追加します。`Auth0Provider` は Next.js の設定で別途構成します (通常は `layout.tsx` で [`@auth0/nextjs-auth0`](https://github.com/auth0/nextjs-auth0) を使用して構成します) 。

    ```tsx layout.tsx wrap lines 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 wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react/rwa";

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

    ## Universal Components を設定する

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

    ```tsx layout.tsx wrap lines 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 wrap lines theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタン上のテキスト色 */
    }
    ```

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

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

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

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

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

    ```bash wrap lines 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 wrap lines 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 wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

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

    ## Universal Components を設定する

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

    ```tsx App.tsx wrap lines 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 wrap lines theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタン上のテキスト色 */
    }
    ```

    詳細については、[Style Universal Components](/docs/ja-jp/get-started/universal-components/web/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 スターターリポジトリ" icon="github" href="https://github.com/auth0-ui-components/saas-starter-uicomponents">
    モダンな B2B SaaS Web アプリケーションを構築するための、安全で高性能な出発点です。
  </Card>
</CardGroup>

<div id="next-steps">
  ## 次のステップ
</div>

<CardGroup cols={2}>
  <Card title="Auth0ComponentProvider を設定する" icon="gear" href="/docs/ja-jp/get-started/universal-components/web/auth0-component-provider">
    すべてのコンポーネントで、認証、国際化、テーマ、トースト通知、キャッシュを同期します。
  </Card>

  <Card title="スタイルとテーマをカスタマイズする" icon="palette" href="/docs/ja-jp/get-started/universal-components/web/universal-components-style">
    Tailwind CSS、CSS 変数、組み込みのテーマプリセットを使用して、デザインシステムをカスタマイズします。
  </Card>

  <Card title="Delegated Admin インターフェースを構築する" icon="users-gear" href="/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin">
    My Organization API を使用して、顧客が自身の Organizations、ドメイン、SSO プロバイダーを管理できるようにします。
  </Card>
</CardGroup>