mcpField
A
auth0-quickstart

auth0-quickstart

github.com/auth0セキュリティ552.7k 回インストール1 日前に更新
リポジトリ

auth0-quickstart について

プロジェクトのフレームワークを判定し、アプリの種類に応じた Auth0 アカウント、アプリ、ログインの設定を案内するクイックスタートスキルです。フレームワーク別スキル、移行資料、よくある問題の解説も参照できます。

主な機能

  1. 01一般的なフレームワークを判定
  2. 02Auth0 CLI の導入とログインを案内
  3. 03種類別に Auth0 アプリを作成
  4. 04Universal Login のブランド設定に対応
  5. 05フレームワーク別スキルへ案内

活用シーン

  1. 01新しいアプリに Auth0 ログインを設定
  2. 02SPA、Web、ネイティブアプリを作成
  3. 03Universal Login ページにブランドを設定
  4. 04別の認証プロバイダーから移行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/auth0/agent-skills --skill auth0-quickstart

インストール後、Claude Code で/auth0-quickstartを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
cli.md
concepts.md
environments.md

詳細

Auth0 クイックスタート

フレームワークを検出して、Auth0 認証を始めましょう。

ステップ 1：フレームワークを検出する

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

# Check package.json dependencies (Node.js projects)
cat package.json | grep -E "react|next|vue|nuxt|angular|express|fastify|@nestjs|expo"

# Or check project files
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.jspackage.json に "next" があるauth0-nextjs
Vue.jspackage.json に "vue" があり、Nuxt がないauth0-vue
Nuxtpackage.json に "nuxt" があるauth0-nuxt
Angularangular.json が存在する、または "@angular/core" があるauth0-angular
Express.jspackage.json に "express" があるauth0-express
Fastify（Web アプリ）package.json に "fastify" があり、@fastify/view があるauth0-fastify
Fastify（API）package.json に "fastify" があり、ビューエンジンがないauth0-fastify-api
React Nativepackage.json に "react-native" または "expo" があるauth0-react-native
Flaskrequirements.txt、Pipfile、または pyproject.toml に "flask" があるauth0-flask
Node.js APIpackage.json に "express-oauth2-jwt-bearer" があるexpress-oauth2-jwt-bearer
ASP.NET Core Web アプリ*.csproj が存在し、Views/ または Pages/ フォルダーがあるauth0-aspnetcore-authentication

お使いのフレームワークが見つかりませんか？ 以下の Tier 2 フレームワークをご覧ください。

ステップ 2：Auth0 アカウントを設定する

Auth0 CLI をインストールする

macOS/Linux：

brew install auth0/auth0-cli/auth0

Windows：

scoop install auth0
# Or: choco install auth0-cli

インストールガイド全文： CLI リファレンスをご覧ください。

Auth0 にログインする
auth0 login

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

ステップ 3：Auth0 アプリケーションを作成する

フレームワークに応じて、アプリケーションの種類を選択します。

シングルページアプリケーション（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"

通常の Web アプリ（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"

ネイティブアプリ（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          # Find your app
auth0 apps show <app-id> # Get client ID and secret

その他の CLI コマンド： CLI リファレンスをご覧ください。

ブランディングを適用する（任意）

アプリケーションを作成した後、Auth0 Universal Login ページがアプリに合った表示になるようにブランディングを適用します。

auth0 ul update \
  --accent "#YOUR_BRAND_COLOR" \
  --background "#YOUR_BACKGROUND_COLOR" \
  --logo "https://your-app.com/logo.png" \
  --favicon "https://your-app.com/favicon.ico"

これにより、ログイン画面に Auth0 のデフォルトのブランディングではなく、アプリのブランディングが表示されます。acul-screen-generator スキルを使って、ログイン画面を全面的にカスタムデザインすることもできます。

ステップ 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 Web アプリケーション
  • auth0-flask - Flask Web アプリケーション
  • auth0-fastify - Fastify Web アプリケーション
  • auth0-fastify-api - Fastify API 認証
  • express-oauth2-jwt-bearer - Node.js/Express API の JWT Bearer 検証
  • auth0-aspnetcore-authentication - ASP.NET Core MVC、Razor Pages、Blazor Server Web アプリケーション

モバイル：

  • auth0-react-native - React Native および Expo（iOS/Android）
Tier 2 フレームワーク（Auth0 Docs を使用）

個別のスキルとしてはまだ提供されていません。Auth0 のドキュメントを使用してください。

フロントエンド：

バックエンド：

モバイル：

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

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

移行スキルでは、次の内容を扱います。

  • Firebase、Cognito、Supabase、Clerk などからのユーザーのエクスポート
  • Auth0 への一括インポート
  • コード移行パターン（移行前／移行後の例）
  • JWT 検証の更新
  • 段階的な移行戦略

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

環境変数

フレームワーク別の環境変数の設定：

Auth0 の概念

基本概念とトラブルシューティング：

CLI コマンド

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

よくある間違い

間違い修正方法
アプリケーションの種類が間違っているSPA には「Single Page Application」、サーバーアプリには「Regular Web Application」、モバイルには「Native」が必要です
コールバック URL が設定されていないAuth0 Dashboard の Allowed Callback URLs に、アプリのコールバック 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（bare workflow）統合
  • auth0-expo - Expo（managed workflow）統合
  • auth0-android - Android（Kotlin/Java）統合
  • auth0-swift - iOS/macOS（Swift）統合
  • auth0-fastapi-api - FastAPI API 認証
  • auth0-aspnetcore-authentication - ASP.NET Core ウェブアプリ認証
  • auth0-aspnetcore-api - ASP.NET Core API 認証
Advanced Features
  • auth0-mfa - Multi-Factor Authentication

References

コメント

Markdown 対応