Skip to main content
Auth0 Universal Components は、Web アプリケーションおよびネイティブアプリケーション内でアイデンティティパイプラインとユーザー体験を構築するために活用できる、事前構築済みの UI コンポーネントのライブラリです。Auth0 SDKs を基盤に、API ファーストのアプローチで構築された Universal Components を使用すると、組織の管理や MFA の登録といった Auth0 のサービスを、UI を手作業で構築したり高権限のバックエンドプロキシを管理したりすることなく埋め込めます。 Universal Components を使用すると、次のことができます。
  • Auth0 組織を作成および管理する
  • 組織内のユーザーの役割とアカウントを管理する
  • Auth0 またはご利用の Social または Enterprise の IDプロバイダー (IdP) で、Single-Sign On を管理する
  • 独自のブランディングとテーマでログイン体験をカスタマイズする
  • ユーザーが自分のアカウント情報を確認および更新できるようにする。これには、ユーザーが認証方法やアカウント復旧方法を選択できるようにすることも含まれます。

仕組み

Universal Components は、アプリケーションと Auth0 の間のプレゼンテーション層として機能し、アプリケーション、My Account API、My Organization API、Auth0 SDKs 間の通信を調整します。 Auth0 SDKs はロジック層として機能し、認証フロー、トークン交換、セッション管理を処理します。My Account API は、認証済みユーザーが自身の認証体験を管理するためのセルフサービス機能を提供します。たとえば、認証済みユーザーは MFA やパスキーなど、自身の認証方法を選択できます。My Organization API は、安全な 組織 スコープのインターフェースを提供し、ビジネス顧客が Auth0 テナント内で自社の組織を管理できるようにします。この API は、埋め込み 委任管理 や API ファーストの連携を支える技術的基盤です。 各プラットフォームはそれぞれ独自のネイティブデザインシステムでコンポーネントのスタイルを設定するため、レイアウトを変更せずに Universal Components をブランドに合わせることができます。

プラットフォームを選択する

Universal Components は、対象の Auth0 API ごとに構成されています。
  • Web コンポーネントでは、My Organization API を使用して、ビジネス顧客が自身の 組織、ドメイン、SSO プロバイダーを管理できる委任管理インターフェースを構築します。React と Next.js に対応しており、必要に応じて shadcn を使用してインストールすることもできます。
  • iOS および Android コンポーネントでは、My Account API を使用して、ユーザーがネイティブアプリケーション内で MFA 要素、パスキー、リカバリーコードなどの認証方法を管理できるエンドユーザー向けセルフサービスインターフェースを構築します。

Web

React、Next.js、または shadcn を使用して、My Organization API による委任管理インターフェースを構築します。

iOS

SwiftUI を使用して、My Account API によるセルフサービスのアカウントセキュリティインターフェースを構築します。

Android

Jetpack Compose を使用して、My Account API によるセルフサービスのアカウントセキュリティインターフェースを構築します。

前提条件

Auth0 Universal Components を使用するには、次の条件を満たす必要があります。
  • Auth0 アカウントを作成し、Auth0 アプリケーションを登録します。
  • iOS および Android コンポーネントの場合、tenant で My Account APIを有効にします。Native コンポーネントは、この API を使用して、認証方法に関するエンドユーザー向けセルフサービスインターフェースを構築します。
  • Web コンポーネントの場合、tenant で My Organization APIを有効にします。Web コンポーネントは、この API を使用して、委任管理用インターフェースを構築します。
プラットフォーム固有の要件とインストール手順については、上記の該当するプラットフォームのスタートガイドを参照してください。