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

Auth0 の Universal Components for Web ライブラリは、React と Next.js を使用して、Auth0 のアイデンティティフロー向けに事前構築された埋め込み可能な UI を提供します。 Universal Components for Web は Auth0 SDK を基盤としており、My Organization API と統合することで、Organizations、ドメイン、SSO プロバイダーの管理など、埋め込み型の Delegated Administration を実現します。

前提条件

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

Auth0 アカウントを作成し、My Organization API を有効にした Auth0 テナントを設定します。
Auth0 アプリケーションを登録します。Auth0 アプリケーションがない場合は、Auth0 React または Next.js の Quickstarts を利用して始めることができます。
クライアント側の認証には、React v.16.11+ をインストールします。
サーバー側の認証には、Next.js v.13+ をインストールします。

React
Next.js
shadcn

Universal Components をインストールする

npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react

pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react

パッケージを react-hook-form (ピア依存関係) および @auth0/auth0-react (クライアントサイドの SPA 認証に必要) とともにインストールします。Next.js タブではプロキシモードを使用するため、@auth0/auth0-react は不要です。

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

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

App.tsx

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

Universal Components をインポートします：

OrganizationManagementPage.tsx

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 は、すべてのコンポーネントの認証、キャッシュ、国際化、トースト通知を管理します。

App.tsx

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

スタイルコンポーネント

インポートしたスタイルシート (@auth0/universal-components-react/styles) により、すべてのコンポーネントのスタイルが有効になります。Tailwind v4 を使用している場合は、CSS ファイルに @import "@auth0/universal-components-react/tailwind" を追加してください。

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

:root {
  --primary: #4f46e5; /* ブランドカラー */
  --primary-foreground: #ffffff; /* ボタン上のテキスト色 */
}

詳細については、Style Universal Componentsを参照してください。

Universal Components をインストールする

@auth0/auth0-react は不要です。Next.js の実装では、サーバーサイド認証を使用する proxy モードを使用します。

npm install @auth0/universal-components-react react-hook-form

pnpm add @auth0/universal-components-react react-hook-form

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

アプリケーションを Auth0Provider と Auth0ComponentProvider でラップします。ルートレイアウトで、proxy モードの Auth0ComponentProvider を追加します。Auth0Provider は Next.js の設定で別途構成します (通常は layout.tsx で @auth0/nextjs-auth0 を使用して構成します) 。

layout.tsx

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

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

page.tsx

import { OrganizationDetailsEdit } from "@auth0/universal-components-react/rwa";

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

Universal Components を設定する

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

layout.tsx

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

スタイルコンポーネント

インポートしたスタイルシート (@auth0/universal-components-react/styles) によって、すべてのコンポーネントのスタイルが有効になります。Tailwind v4 を使用している場合は、CSS ファイルに @import "@auth0/universal-components-react/tailwind" を追加してください。

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

:root {
  --primary: #4f46e5; /* ブランドカラー */
  --primary-foreground: #ffffff; /* ボタン上のテキスト色 */
}

詳しくは、Style Universal Componentsをご覧ください。

Universal Components をインストールする

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

npx shadcn@latest init

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

npx shadcn@latest add @auth0/organization-details-edit

Shadcn CLI は、コンポーネントのソースコードと、共有ユーティリティおよび Auth0 連携に必要な依存関係 @auth0/universal-components-core をインストールします。

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

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

App.tsx

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

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

OrganizationManagementPage.tsx

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

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

Universal Components を設定する

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

App.tsx

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

スタイルコンポーネント

Shadcn 用のスタイルは、すでに Tailwind のビルドに含まれています。追加のスタイルのインポートは必要ありません。

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

:root {
  --primary: #4f46e5; /* ブランドカラー */
  --primary-foreground: #ffffff; /* ボタン上のテキスト色 */
}

詳細については、Style Universal Componentsを参照してください。

実装例

サンプルアプリケーションで、動作する完全な実装例をご覧ください。

コード例

完全な実装パターンを示す React SPA (npm) 、React SPA (shadcn) 、Next.js のサンプルアプリケーション

SaaStart ライブデモ

ライブのリファレンス B2B SaaS アプリで My Organization Components の動作を確認できます

SaaS スターターリポジトリ

モダンな B2B SaaS Web アプリケーションを構築するための、安全で高性能な出発点です。

次のステップ

Auth0ComponentProvider を設定する

すべてのコンポーネントで、認証、国際化、テーマ、トースト通知、キャッシュを同期します。

スタイルとテーマをカスタマイズする

Tailwind CSS、CSS 変数、組み込みのテーマプリセットを使用して、デザインシステムをカスタマイズします。

Delegated Admin インターフェースを構築する

My Organization API を使用して、顧客が自身の Organizations、ドメイン、SSO プロバイダーを管理できるようにします。

Web コンポーネント

iOS コンポーネント

Android コンポーネント

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

前提条件

Universal Components をインストールする

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

Universal Components の設定

スタイルコンポーネント

Universal Components をインストールする

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

Universal Components を設定する

スタイルコンポーネント

Universal Components をインストールする

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

Universal Components を設定する

スタイルコンポーネント

実装例

コード例

SaaStart ライブデモ

SaaS スターターリポジトリ

次のステップ

Auth0ComponentProvider を設定する

スタイルとテーマをカスタマイズする

Delegated Admin インターフェースを構築する

​前提条件

​Universal Components をインストールする

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

​Universal Components の設定

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

​Universal Components をインストールする

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

​Universal Components を設定する

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

​Universal Components をインストールする

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

​Universal Components を設定する

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

​実装例

コード例

SaaStart ライブデモ

SaaS スターターリポジトリ

​次のステップ

Auth0ComponentProvider を設定する

スタイルとテーマをカスタマイズする

Delegated Admin インターフェースを構築する

前提条件

Universal Components をインストールする

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

Universal Components の設定

スタイルコンポーネント

Universal Components をインストールする

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

Universal Components を設定する

スタイルコンポーネント

Universal Components をインストールする

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

Universal Components を設定する

スタイルコンポーネント

実装例

次のステップ