Auth0 Universal Components

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

Auth0 Universal Components は現在 Early Access 段階です。これを使用すると、 Okta’s Master Subscription Agreement の該当する Free Trial 条項に同意したものとみなされます。詳しくは、Product Release Stages を参照してください。

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

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

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

​

仕組み

Universal Components は、アプリケーションと Auth0 の間のプレゼンテーション層として機能し、アプリケーション、My Account API、My Organization API、および Auth0 SDK 間の通信を調整します。

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

Universal Components は、Shadcn コンポーネントと Tailwind CSS スタイルシートを活用して、独自のブランディングやテーマに合わせてコンポーネントをカスタマイズします。

​

前提条件

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

• Auth0 アカウントを作成し、My Account API と My Organization API を有効にした Auth0 テナントを設定する
• Auth0 アプリケーションを登録する。Auth0 アプリケーションがまだない場合は、Auth0 React または Next.js の Quickstarts から始められます。
• Universal Component ライブラリを構築するために Shadcn UI をインストールする
• ブランドに合わせてコンポーネントをスタイル設定するために Tailwind CSS v.3 をインストールする
• クライアントサイド認証の場合は、React v.16.11+ をインストールする。
• サーバーサイド認証の場合は、Next.js v.13+ をインストールする。

React

​

Universal Components をインストールする

npm

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

​

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

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

2. 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を参照してください。

Next.js

​

Universal Components をインストールする

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

npm

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

​

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

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

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

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

2. 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 を使用している場合は、@import "@auth0/universal-components-react/tailwind" を CSS ファイルに追加してください。

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

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

詳しくは、Universal Components のスタイル設定を参照してください。

shadcn

​

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 依存関係をインストールします。

​

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

1. アプリケーションを 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>
  );
}

2. 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; /* ボタンのテキスト */
}

詳しくは、Universal Components でスタイルとテーマをカスタマイズするを参照してください。

​

実装例

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

コード例

実装パターンを一通り備えた React SPA (npm) 、React SPA (shadcn) 、Next.js のサンプルアプリケーション

SaaStart ライブデモ

ライブ参照用の B2B SaaS アプリで、My Organization Components の動作を確認できます

SaaS Starter リポジトリ

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

​

詳しく見る

• Auth0ComponentProvider を設定する
• Universal Components でスタイルとテーマをカスタマイズする