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

Universal Components を設定し、My Account API を使用したセルフサービスのアカウントセキュリティ用インターフェースを構築する方法を説明します。

My Account コンポーネントを使用すると、セルフサービスで認証を管理できるインターフェースを Web アプリケーションに直接組み込めます。ユーザーは Web アプリケーション内で多要素認証 (MFA) の認証要素を登録・削除し、パスキーを管理できます。

​

仕組み

My Account コンポーネントは、My Account API の認証方法エンドポイントを使用して、アプリケーション内に認証方法を管理するための UI をレンダリングします。

My Account API には現在、特に Free ティアのテナントに対して低いレート制限が設定されています。このため、これらのコンポーネントの使用中にエラーが発生する可能性があります。

認証済みのユーザーがアカウント設定画面を開くと、Auth0 SDK は My Account API の audience に対してスコープが設定されたアクセストークンを取得します。

コンポーネントはこのトークンを使用して、ログイン中のユーザーとして My Account API の /me/v1/authentication-methods を呼び出します。これにより、各ユーザーは自身の認証方法のみを表示・変更できます。

​

利用可能なコンポーネント

コンポーネント	API エンドポイント
UserMFAManagement メール OTP、SMS OTP、TOTP (認証器アプリ) 、プッシュ通知、パスキー、リカバリーコードなどの MFA 認証要素を登録・削除します。	/me/v1/authentication-methods
UserPasskeyManagement WebAuthn パスキーを登録・取り消しします。	/me/v1/authentication-methods (type: passkey)

• これらのコンポーネントは、エンドユーザー向けセルフサービスインターフェースを作成します。エンドユーザーは、自身のアカウントでメール OTP、SMS OTP、TOTP (認証器アプリ) 、プッシュ通知、パスキー、リカバリーコードのすべての認証方法を登録、一覧表示、削除できます。
• ユーザーが Auth0 の組織を管理する委任管理者向けインターフェースについては、Delegated Admin Interface を構築するを参照してください。

React（SPA）

​

前提条件

​

My Account API を有効化する

1. Auth0 Dashboard > アプリケーション > APIs に移動します。
2. Activate My Account API を選択して、テナントで有効化します。

​

アプリケーションを作成し、My Account API の権限を設定する

1. Auth0 Dashboard > アプリケーション > アプリケーション に移動し、Create Application を選択します。

2. Single Page Web Applications を選択します。

3. 設定 タブを選択し、コールバック、ログアウト、Web オリジン URL を追加します。例: http://localhost:5173。

4. API Access タブを選択します。

5. Auth0 My Account API の Edit を選択し、以下の ユーザー委譲アクセス権限を追加します。

   create:me:authentication_methods read:me:authentication_methods update:me:authentication_methods delete:me:authentication_methods read:me:factors

6. Save を選択して権限を保存します。

• ユーザーのアクセストークンには、ログイン時に付与された権限のみが含まれます。
• ユーザーが認証方法を登録、確認、削除できるようにするには、5 つすべてのスコープをリクエストします。

​

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

​

コンポーネントをインストールする

pnpm

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

react-hook-form と @tanstack/react-query はピア依存関係です。このコマンドでは、共有ユーティリティと Auth0 連携に必要な @auth0/universal-components-core もインストールされます。

​

環境変数を設定する

プロジェクトのルートに .env ファイルを作成します。

VITE_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID

​

Universal Components を設定する

Auth0Provider と Auth0ComponentProvider をインポートし、interactiveErrorHandler="popup" を設定すると、MFAの登録および削除時のチャレンジがページ遷移ではなくポップアップで処理されます。

App.tsx

import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

export default function App() {
  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler="popup"
    >
      <Auth0ComponentProvider domain={domain}>
        {/* お客様のアプリケーション */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

• My Account コンポーネントをレンダリングするには、Users が認証されている必要があります。
• コンポーネントは、ログイン中のユーザーの認証方法を My Account API から自動的に読み込みます。

Next.js（RWA）

​

前提条件

​

My Account API を有効化する

1. Dashboard > Applications > APIs に移動します。
2. Activate My Account API を選択して、テナントで有効化します。

​

アプリケーションを作成し、My Account API の権限を設定する

1. Dashboard > Applications > Applications に移動し、Create Application を選択します。

2. Regular Web Application を選択します。

3. Settings タブを選択し、Allowed Callback, and Allowed Logout URLs を追加します。例：http://localhost:3000。

4. API Access タブを選択します。

5. Auth0 My Account API の Edit を選択し、User-delegated Access の権限を追加します。

   create:me:authentication_methods read:me:authentication_methods update:me:authentication_methods delete:me:authentication_methods read:me:factors

6. Save を選択して、権限を保存します。

• ユーザーの access token には、login 時に付与された権限のみが含まれます。
• ユーザーが認証方法を登録、確認、削除できるようにするには、5 つすべての scope をリクエストしてください。

​

データベースとテストユーザーを設定する

1. Dashboard > Authentication > Database に移動し、データベース接続を作成します。
2. データベース接続の Applications タブで、アプリケーションを有効化します。
3. Dashboard > User Management > Users に移動します。
4. Create User を選択し、新しいデータベース接続に割り当てるユーザーを作成します。
5. Create を選択して新しいユーザーを追加し、テストにはこのユーザーを使用します。

​

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

​

コンポーネントをインストールする

pnpm

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

react-hook-form と @tanstack/react-query はピア依存関係です。このコマンドにより、共有ユーティリティと Auth0 連携に必要な依存関係である @auth0/universal-components-core もインストールされます。

​

環境変数を設定する

Next.js プロジェクトのルートに .env.local ファイルを作成します。

AUTH0_DOMAIN=https://YOUR_TENANT_DOMAIN.auth0.com
AUTH0_CLIENT_ID=YOUR_RWA_CLIENT_ID
AUTH0_CLIENT_SECRET=YOUR_RWA_CLIENT_SECRET
AUTH0_SECRET=YOUR_AUTH0_SECRET
APP_BASE_URL=http://localhost:3000
NEXT_PUBLIC_AUTH0_DOMAIN=https://YOUR_TENANT_DOMAIN.auth0.com

Next.js SDK の設定全体については、Auth0 Next.js SDK のドキュメントをご覧ください。

​

Universal Components を設定する

/rwa サブパスの Auth0ComponentProvider をルート layout に追加します。サーバーサイドの Auth0 セッションを使用できるよう、proxy モードで設定します。

app/layout.tsx

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

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

• My Accountコンポーネントをレンダリングする前に、ユーザーを認証する必要があります。
• コンポーネントは、ログイン中のユーザーの認証方法をMy Account APIから自動的に読み込みます。

shadcn

​

前提条件

​

My Account API を有効化する

1. Dashboard > Applications > APIs に移動します。
2. Activate My Account API を選択して、テナントで有効化します。

​

アプリケーションを作成し、My Account API の権限を設定する

1. Dashboard > Applications > Applications に移動し、Create Application を選択します。

2. Single Page Web Applications を選択します。

3. Settings タブを選択し、Callback、Logout、Web Origins URLs を追加します。例：http://localhost:5173。

4. API Access タブを選択します。

5. Auth0 My Account API の Edit を選択し、以下の ユーザー委任アクセス権限を追加します。

   create:me:authentication_methods read:me:authentication_methods update:me:authentication_methods delete:me:authentication_methods read:me:factors

6. Save を選択して、権限を保存します。

• ユーザーのアクセストークンには、ログイン時に付与された権限のみが含まれます。
• ユーザーが認証方法を登録、確認、削除できるように、5 つすべてのスコープをリクエストしてください。

​

データベース接続とテストユーザーを設定する

1. Dashboard > Authentication > Database に移動し、データベース接続を作成します。
2. データベース接続の Applications タブで、アプリケーションを有効化します。
3. Dashboard > User Management > Users に移動します。
4. Create User を選択し、新しいデータベース接続に割り当てられたユーザーを作成します。
5. Create を選択して新しいユーザーを追加し、このユーザーをテストに使用します。

​

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

​

コンポーネントをインストールする

shadcn CLI を実行して、コンポーネントをプロジェクトのソースコードに直接追加します。

MFA management

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-mfa-management.json

Passkey management

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-passkey-management.json

インストールコマンドを実行すると、共有ユーティリティとAuth0連携に必要なすべてのUI依存関係および@auth0/universal-components-core依存関係とともに、コンポーネントのソースがsrc/components/auth0/my-account/に追加されます。

​

環境変数を設定する

プロジェクトのルートに.env.localファイルを作成します。

VITE_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID

​

Universal Components を設定する

Auth0Provider と Auth0ComponentProvider をインポートし、interactiveErrorHandler="popup" を設定すると、MFA の登録や削除に関するチャレンジがページ外へのリダイレクトではなくポップアップで処理されます。

App.tsx

import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

export default function App() {
  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler="popup"
    >
      <Auth0ComponentProvider domain={domain}>
        {/* アプリケーション */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

• My Account コンポーネントをレンダリングする前に、ユーザーを認証する必要があります。
• コンポーネントは、ログイン中のユーザーの認証方法を My Account API から自動的に読み込みます。

​

詳細情報

ユーザーMFA管理を設定する

MFA認証要素のリファレンス: プロップス、カスタマイズ、TypeScript 型定義、Advanced サブコンポーネント。

ユーザーパスキー管理を設定する

パスキー管理のリファレンス: Hooks、メッセージのオーバーライド、CSS クラスのターゲット。