Auth0 React 連携

@auth0/auth0-react を使用して React シングルページアプリケーションに認証を追加します。

---

前提条件

• React 16.11+ アプリケーション (Vite または Create React App) - React 16、17、18、19 をサポート
• Auth0 アカウントと設定済みのアプリケーション
• Auth0 をまだセットアップしていない場合は、まず auth0-quickstart スキルを使用してください

使用しない場合

• Next.js アプリケーション - App Router と Pages Router の両方に auth0-nextjs スキルを使用
• React Native モバイルアプリ - iOS/Android に auth0-react-native スキルを使用
• サーバーサイドレンダリング React - フレームワーク固有の SDK (Next.js、Remix など) を使用
• 埋め込みログイン - このSDK は Auth0 Universal Login (リダイレクトベース) を使用
• バックエンド API 認証 - express-openid-connect または JWT 検証を使用

---

クイックスタートワークフロー

1. SDK をインストール

npm install @auth0/auth0-react

2. 環境を設定

Auth0 CLI を使った自動セットアップの場合、セットアップガイドで完全なスクリプトを確認してください。

手動セットアップの場合:

.env ファイルを作成:

Vite:

VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id

Create React App:

REACT_APP_AUTH0_DOMAIN=your-tenant.auth0.com
REACT_APP_AUTH0_CLIENT_ID=your-client-id

3. Auth0Provider でアプリをラップ

src/main.tsx (Vite) または src/index.tsx (CRA) を更新:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN} // or process.env.REACT_APP_AUTH0_DOMAIN
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

4. 認証 UI を追加

import { useAuth0 } from '@auth0/auth0-react';

export function LoginButton() {
  const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0();

  if (isLoading) return <div>Loading...</div>;

  if (isAuthenticated) {
    return (
      <div>
        <span>Welcome, {user?.name}</span>
        <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
          Logout
        </button>
      </div>
    );
  }

  return <button onClick={() => loginWithRedirect()}>Login</button>;
}

5. 認証をテスト

開発サーバーを起動してログインフローをテストします:

npm run dev  # Vite
# or
npm start    # CRA

---

詳細ドキュメント

• セットアップガイド - 自動セットアップスクリプト (Bash/PowerShell)、CLI コマンド、手動設定
• 統合ガイド - 保護されたルート、API 呼び出し、エラーハンドリング、高度なパターン
• API リファレンス - 完全な SDK API、設定オプション、フック リファレンス、テスト戦略

---

よくある間違い

間違い	解決策
Auth0 ダッシュボードにリダイレクト URI を追加し忘れた	Auth0 ダッシュボードの許可されるコールバック URL に、アプリケーション URL (例: http://localhost:3000、https://app.example.com) を追加
間違った環境変数プレフィックスを使用	Vite は VITE_ プレフィックスを使用、Create React App は REACT_APP_ プレフィックスを使用
ローディング状態を処理していない	認証に依存する UI をレンダリングする前に、常に isLoading を確認
トークンを localStorage に保存している	トークンを手動で保存しない - SDK が自動的に安全に保存
Auth0Provider ラッパーがない	アプリ全体を <Auth0Provider> でラップする必要がある
Provider がルートレベルにない	Auth0Provider は認証フックを使用するすべてのコンポーネントをラップする必要がある
環境変数の import パスが間違っている	Vite は import.meta.env.VITE_* を使用、CRA は process.env.REACT_APP_* を使用
in-app MFA に acr_values リダイレクトを使用している	in-app の登録/チャレンジ/検証フローには useAuth0().mfa API を使用
MfaRequiredError をキャッチしていない	getAccessTokenSilently を try/catch でラップし、instanceof MfaRequiredError をチェック
MFA エンドポイントへの直接 HTTP 呼び出しを行っている	useAuth0() の mfa プロパティを使用 - トークン管理を自動的に処理
ステップアップ MFA のリフレッシュトークンを忘れている	interactiveErrorHandler="popup" を使用する場合、Auth0Provider に useRefreshTokens={true} を設定

---

関連スキル

• auth0-quickstart - 基本的な Auth0 セットアップ
• auth0-migration - 別の認証プロバイダから移行
• auth0-mfa - 多要素認証を追加
• auth0-cli - ターミナルから Auth0 リソースを管理

---

クイックリファレンス

コアフック:

• useAuth0() - メイン認証フック
• isAuthenticated - ユーザーがログインしているかどうかを確認
• user - ユーザープロフィール情報
• loginWithRedirect() - ログインを開始
• logout() - ユーザーをログアウト
• getAccessTokenSilently() - API 呼び出し用のアクセストークンを取得
• mfa - 登録、チャレンジ、検証用の MFA API クライアント
  • mfa.getAuthenticators(mfaToken) - 登録済みの認証器をリスト
  • mfa.getEnrollmentFactors(mfaToken) - 利用可能な登録要因を取得
  • mfa.enroll(params) - 新しい認証器を登録 (OTP、SMS、Email、Voice、Push)
  • mfa.challenge(params) - MFA チャレンジを開始
  • mfa.verify(params) - MFA チャレンジを検証して認証を完了

MFA エラータイプ (@auth0/auth0-react からインポート):

• MfaRequiredError - getAccessTokenSilently で MFA が必要な場合にスロー (mfa_token と mfa_requirements を含む)
• MfaEnrollmentError、MfaChallengeError、MfaVerifyError - それぞれの mfa.* メソッドによってスロー

よく使用されるユースケース:

• ログイン/ログアウトボタン → 上記のステップ 4 を参照
• 保護されたルート → 統合ガイド
• トークンを使用した API 呼び出し → 統合ガイド
• エラーハンドリング → 統合ガイド
• MFA ハンドリング → 統合ガイド

---

参考資料

• Auth0 React SDK ドキュメント
• Auth0 React クイックスタート
• SDK GitHub リポジトリ