Auth0 快速入门：检测框架并集成身份验证的完整指南

auth0-quickstart by auth0/agent-skills

718 周安装量

13 GitHub Stars

GitHub

安装命令

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

开发 API 安全

🇨🇳中文介绍

Auth0 快速入门

检测您的框架并开始使用 Auth0 身份验证。

步骤 1：检测您的框架

运行以下命令来识别您的框架：

# 检查 package.json 依赖项
cat package.json | grep -E "react|next|vue|angular|express|fastify|@nestjs"

# 或检查项目文件
ls -la | grep -E "angular.json|vue.config.js|next.config"

框架检测表：

框架	检测方法	使用的技能
React (Vite/CRA)	package.json 中有 `"react"`，没有 Next.js	`auth0-react`
Next.js	package.json 中有 `"next"`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

步骤 2：Auth0 账户设置

brew install auth0/auth0-cli/auth0

scoop install auth0
# 或：choco install auth0-cli

完整安装指南： 参见 CLI 参考

这将打开您的浏览器以使用 Auth0 进行身份验证。

步骤 3：创建 Auth0 应用程序

根据您的框架选择应用程序类型：

单页应用程序 (React, Vue, Angular)：

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

常规 Web 应用程序 (Next.js, 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 \
  --callbacks "myapp://callback" \
  --logout-urls "myapp://logout" \
  --metadata "created_by=agent_skills"

获取您的凭据：

auth0 apps list          # 查找您的应用
auth0 apps show <app-id> # 获取客户端 ID 和密钥

更多 CLI 命令： 参见 CLI 参考

步骤 4：使用特定于框架的技能

根据您的框架检测结果，使用相应的技能：

第一梯队框架（专用技能）

auth0-react - React 单页应用 (Vite, Create React App)
auth0-nextjs - Next.js (App Router 和 Pages Router)
auth0-vue - Vue.js 3 应用程序
auth0-angular - Angular 12+ 应用程序

auth0-express - Express.js Web 应用程序
auth0-fastify - Fastify Web 应用程序
auth0-fastify-api - Fastify API 身份验证

auth0-react-native - React Native 和 Expo (iOS/Android)

第二梯队框架（使用 Auth0 文档）

尚未作为独立技能提供。请使用 Auth0 文档：

从其他提供商迁移

从其他身份验证提供商迁移？ 使用 auth0-migration 技能。

迁移技能涵盖：

从 Firebase、Cognito、Supabase、Clerk 等导出用户
批量导入到 Auth0
代码迁移模式（前后示例）
JWT 验证更新
渐进式迁移策略

特定于框架的环境变量设置：

核心概念和故障排除：

完整的 Auth0 CLI 参考：

错误	修复方法
应用程序类型错误	单页应用需要"单页应用程序"，服务器端应用需要"常规 Web 应用程序"，移动端需要"原生"
未配置回调 URL	在 Auth0 仪表板的"允许的回调 URL"中添加您应用的回调 URL
使用了错误的凭据	客户端密钥仅常规 Web 应用需要，单页应用不需要
在代码中硬编码凭据	始终使用环境变量，切勿将密钥提交到 git
未先在本地测试	部署到生产环境前，先在 Auth0 中设置 localhost URL
混合使用应用程序类型	不要将单页应用 SDK 用于服务器端应用，反之亦然

auth0-migration - 从其他身份验证提供商迁移

auth0-react - React 单页应用集成
auth0-nextjs - Next.js 集成
auth0-vue - Vue.js 集成
auth0-angular - Angular 集成
auth0-express - Express.js 集成
auth0-fastify - Fastify Web 应用集成
auth0-fastify-api - Fastify API 集成
auth0-react-native - React Native/Expo 集成

auth0-mfa - 多因素身份验证

🇺🇸English

Auth0 Quickstart

Detect your framework and get started with Auth0 authentication.

Step 1: Detect Your Framework

Run this command to identify your framework:

# Check package.json dependencies
cat package.json | grep -E "react|next|vue|angular|express|fastify|@nestjs"

# Or check project files
ls -la | grep -E "angular.json|vue.config.js|next.config"

Framework Detection Table:

Framework	Detection	Skill to Use
React (Vite/CRA)	`"react"` in package.json, no Next.js	`auth0-react`
Next.js	`"next"` in package.json	`auth0-nextjs`
Vue.js	`"vue"` in package.json, no Nuxt	`auth0-vue`
Angular	`angular.json` exists or `"@angular/core"`	`auth0-angular`
Express.js	`"express"` in package.json	`auth0-express`
Fastify (web app)	`"fastify"` in package.json, has `@fastify/view`	`auth0-fastify`
Fastify (API)	`"fastify"` in package.json, no view engine	`auth0-fastify-api`
React Native	`"react-native"` or `"expo"` in package.json	`auth0-react-native`

Don't see your framework? See Tier 2 Frameworks below.

Step 2: Auth0 Account Setup

Install Auth0 CLI

macOS/Linux:

brew install auth0/auth0-cli/auth0

Windows:

scoop install auth0
# Or: choco install auth0-cli

Full installation guide: See CLI Reference

Login to Auth0

auth0 login

This opens your browser to authenticate with Auth0.

Step 3: Create Auth0 Application

Choose application type based on your framework:

Single Page Applications (React, Vue, Angular):

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

Regular Web Apps (Next.js, 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 \
  --callbacks "myapp://callback" \
  --logout-urls "myapp://logout" \
  --metadata "created_by=agent_skills"

Get your credentials:

auth0 apps list          # Find your app
auth0 apps show <app-id> # Get client ID and secret

More CLI commands: See CLI Reference

Step 4: Use Framework-Specific Skill

Based on your framework detection, use the appropriate skill:

Tier 1 Frameworks (Dedicated Skills)

Frontend:

auth0-react - React SPAs (Vite, Create React App)
auth0-nextjs - Next.js (App Router and Pages Router)
auth0-vue - Vue.js 3 applications
auth0-angular - Angular 12+ applications

Backend:

auth0-express - Express.js web applications
auth0-fastify - Fastify web applications
auth0-fastify-api - Fastify API authentication

Mobile:

auth0-react-native - React Native and Expo (iOS/Android)

Tier 2 Frameworks (Use Auth0 Docs)

Not yet available as separate skills. Use Auth0 documentation:

Frontend:

Backend:

Mobile:

Migration from Other Providers

Migrating from another auth provider? Use the auth0-migration skill.

The migration skill covers:

User export from Firebase, Cognito, Supabase, Clerk, etc.
Bulk import to Auth0
Code migration patterns (before/after examples)
JWT validation updates
Gradual migration strategies

Reference Documentation

Environment Variables

Framework-specific environment variable setup:

Auth0 Concepts

Core concepts and troubleshooting:

CLI Commands

Complete Auth0 CLI reference:

Common Mistakes

Mistake	Fix
Wrong application type	SPAs need "Single Page Application", server apps need "Regular Web Application", mobile needs "Native"
Callback URL not configured	Add your app's callback URL to Allowed Callback URLs in Auth0 Dashboard
Using wrong credentials	Client Secret only needed for Regular Web Apps, not SPAs
Hardcoding credentials in code	Always use environment variables, never commit secrets to git
Not testing locally first	Set up localhost URLs in Auth0 before deploying to production
Mixing application types	Don't use SPA SDK for server-side apps or vice versa

Related Skills

Core Integration

auth0-migration - Migrate from other auth providers

SDK Skills

auth0-react - React SPA integration
auth0-nextjs - Next.js integration
auth0-vue - Vue.js integration
auth0-angular - Angular integration
auth0-express - Express.js integration
auth0-fastify - Fastify web app integration
auth0-fastify-api - Fastify API integration
auth0-react-native - React Native/Expo integration

Advanced Features

auth0-mfa - Multi-Factor Authentication

References

Weekly Installs

477

Repository

auth0/agent-skills

GitHub Stars

First Seen

Feb 6, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

codex462

opencode461

github-copilot455

gemini-cli451

amp445

kimi-cli445

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

136,300 周安装

Auth0 快速入门：检测框架并集成身份验证的完整指南

🇨🇳中文介绍

Auth0 快速入门

步骤 1：检测您的框架

相关 Skills

步骤 2：Auth0 账户设置

安装 Auth0 CLI

登录 Auth0