Auth0 クイックスタート

フレームワークを自動検出し、Auth0 認証を開始します。

---

ステップ 1: フレームワークの検出

次のコマンドを実行してフレームワークを特定します:

# Node.js プロジェクトの package.json 依存関係を確認
cat package.json | grep -E "react|next|vue|nuxt|angular|express|fastify|@nestjs|expo"

# またはプロジェクトファイルを確認
ls -la | grep -E "angular.json|vue.config.js|next.config|app.json|Package.swift|build.gradle"

フレームワーク検出表:

フレームワーク	検出方法	使用するスキル
React (Vite/CRA)	package.json に "react" があり、Next.js がない	auth0-react
Next.js	package.json に "next" がある	auth0-nextjs
Vue.js	package.json に "vue" があり、Nuxt がない	auth0-vue
Nuxt	package.json に "nuxt" がある	auth0-nuxt
Angular	angular.json が存在するか "@angular/core" がある	auth0-angular
Express.js	package.json に "express" がある	auth0-express
Fastify (ウェブアプリ)	package.json に "fastify" があり、@fastify/view がある	auth0-fastify
Fastify (API)	package.json に "fastify" があり、ビューエンジンがない	auth0-fastify-api
React Native	package.json に "react-native" または "expo" がある	auth0-react-native
Flask	requirements.txt、Pipfile、または pyproject.toml に "flask" がある	auth0-flask
Node.js API	package.json に "express-oauth2-jwt-bearer" がある	express-oauth2-jwt-bearer

フレームワークが見つかりませんか? 以下の Tier 2 フレームワークを参照してください。

---

ステップ 2: Auth0 アカウントのセットアップ

Auth0 CLI のインストール

macOS/Linux:

brew install auth0/auth0-cli/auth0

Windows:

scoop install auth0
# または: choco install auth0-cli

完全なインストールガイド: CLI リファレンスを参照してください

Auth0 にログイン

auth0 login

ブラウザが開き、Auth0 で認証します。

---

ステップ 3: Auth0 アプリケーションの作成

フレームワークに応じてアプリケーションタイプを選択します:

Single Page Applications (React, Vue, Angular):

auth0 apps create --name "My App" --type spa \
  --auth-method None \
  --callbacks "http://localhost:3000" \
  --logout-urls "http://localhost:3000" \
  --metadata "created_by=agent_skills"

Regular Web Apps (Next.js, Nuxt, Express, Fastify):

auth0 apps create --name "My App" --type regular \
  --callbacks "http://localhost:3000/api/auth/callback" \
  --logout-urls "http://localhost:3000" \
  --metadata "created_by=agent_skills"

Native Apps (React Native):

auth0 apps create --name "My App" --type native \
  --auth-method None \
  --callbacks "myapp://callback" \
  --logout-urls "myapp://logout" \
  --metadata "created_by=agent_skills"

認証情報を取得:

auth0 apps list          # アプリを検索
auth0 apps show <app-id> # Client ID と Secret を取得

その他の CLI コマンド: CLI リファレンスを参照してください

---

ステップ 4: フレームワーク固有のスキルを使用

フレームワークの検出結果に基づいて、適切なスキルを使用してください:

Tier 1 フレームワーク (専用スキル)

フロントエンド:

• auth0-react - React SPA (Vite、Create React App)
• auth0-nextjs - Next.js (App Router および Pages Router)
• auth0-vue - Vue.js 3 アプリケーション
• auth0-nuxt - Nuxt 3/4 アプリケーション
• auth0-angular - Angular 12 以上のアプリケーション

バックエンド:

• auth0-express - Express.js ウェブアプリケーション
• auth0-flask - Flask ウェブアプリケーション
• auth0-fastify - Fastify ウェブアプリケーション
• auth0-fastify-api - Fastify API 認証
• express-oauth2-jwt-bearer - Node.js/Express API JWT Bearer 検証

モバイル:

• auth0-react-native - React Native および Expo (iOS/Android)

Tier 2 フレームワーク (Auth0 ドキュメントを使用)

まだ個別のスキルとしては利用できません。Auth0 ドキュメントを使用してください:

フロントエンド:

• SvelteKit
• Remix

バックエンド:

• FastAPI (Python)
• Django (Python)
• Rails (Ruby)
• Laravel (PHP)
• Go
• ASP.NET Core
• Spring Boot

モバイル:

• iOS (Swift)
• Android (Kotlin)
• Flutter

---

他のプロバイダーからの移行

別の認証プロバイダーから移行しますか? auth0-migration スキルを使用してください。

移行スキルでは以下をカバーしています:

• Firebase、Cognito、Supabase、Clerk などからのユーザーエクスポート
• Auth0 へのバルクインポート
• コード移行パターン (ビフォー・アフター例)
• JWT 検証の更新
• 段階的な移行戦略

---

リファレンスドキュメント

環境変数

フレームワーク固有の環境変数セットアップ:

• Vite、Create React App、Angular
• Next.js、Express
• React Native、Expo

Auth0 の概念

コアコンセプトとトラブルシューティング:

• アプリケーションタイプ
• 主要用語
• OAuth フロー
• トラブルシューティング
• セキュリティベストプラクティス

CLI コマンド

Auth0 CLI の完全なリファレンス:

• CLI インストール
• アプリケーションの作成
• ユーザー管理
• テスト・デバッグ
• コマンドクイックリファレンス

---

よくある間違い

間違い	修正方法
間違ったアプリケーションタイプ	SPA には「Single Page Application」、サーバーアプリには「Regular Web Application」、モバイルには「Native」が必要
コールバック URL が設定されていない	Auth0 ダッシュボードの許可されたコールバック URL にアプリのコールバック URL を追加
間違った認証情報を使用	Client Secret は Regular Web Apps にのみ必要で、SPA には不要
認証情報をコードにハードコード	常に環境変数を使用し、シークレットを git にコミットしないこと
ローカルでテストしていない	本番環境にデプロイする前に、Auth0 で localhost URL を設定
アプリケーションタイプを混合	SPA SDK をサーバーサイドアプリに使用したり、その逆をしないこと

---

関連スキル

コア統合

• auth0-migration - 他の認証プロバイダーから移行

SDK スキル

• auth0-spa-js - SPA 統合
• auth0-react - React SPA 統合
• auth0-nextjs - Next.js 統合
• auth0-vue - Vue.js 統合
• auth0-nuxt - Nuxt 3/4 統合
• auth0-angular - Angular 統合
• auth0-express - Express.js 統合
• auth0-flask - Flask ウェブアプリ統合
• auth0-fastify - Fastify ウェブアプリ統合
• auth0-fastify-api - Fastify API 統合
• express-oauth2-jwt-bearer - Node.js/Express API JWT Bearer 検証
• auth0-react-native - React Native CLI (ベアワークフロー) 統合
• auth0-expo - Expo (マネージドワークフロー) 統合
• auth0-android - Android (Kotlin/Java) 統合
• auth0-swift - iOS/macOS (Swift) 統合
• auth0-fastapi-api - FastAPI API 認証
• auth0-aspnetcore-api - ASP.NET Core API 認証

高度な機能

• auth0-mfa - 多要素認証

---

リファレンス

• Auth0 ドキュメント
• Auth0 クイックスタートガイド
• Auth0 CLI ドキュメント
• Auth0 コミュニティフォーラム