mcpField
A
auth0-quickstart

auth0-quickstart

github.com/auth0安全552.7k 次安装1 天前更新
代码仓库

关于 auth0-quickstart

Auth0 Quickstart skill 帮助开发者识别项目框架，并按应用类型指导 Auth0 账号、应用和登录配置。它还指向框架专用 skill、迁移资料及常见问题说明。

主要功能

  1. 01检测常见项目框架
  2. 02指导安装并登录 Auth0 CLI
  3. 03按类型创建 Auth0 应用
  4. 04提供可选的登录页品牌设置
  5. 05引导至框架专用 skill

适用场景

  1. 01为新应用配置 Auth0 登录
  2. 02创建 SPA、Web 或原生应用
  3. 03为 Universal 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.jsauth0-react
Next.jspackage.json 中包含 "next"auth0-nextjs
Vue.jspackage.json 中包含 "vue"，且没有 Nuxtauth0-vue
Nuxtpackage.json 中包含 "nuxt"auth0-nuxt
Angular存在 angular.json，或包含 "@angular/core"auth0-angular
Express.jspackage.json 中包含 "express"auth0-express
Fastify（Web 应用）package.json 中包含 "fastify"，且包含 @fastify/viewauth0-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

没看到你的框架？ 请参阅下方的第 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：使用框架专属技能

根据检测到的框架，使用相应的技能：

第 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 文档）

尚未提供独立技能。请使用 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 Web 应用集成
  • auth0-fastify - Fastify Web 应用集成
  • auth0-fastify-api - Fastify API 集成
  • express-oauth2-jwt-bearer - Node.js/Express API JWT Bearer 验证
  • auth0-react-native - React Native CLI（bare 工作流）集成
  • auth0-expo - Expo（managed 工作流）集成
  • auth0-android - Android（Kotlin/Java）集成
  • auth0-swift - iOS/macOS（Swift）集成
  • auth0-fastapi-api - FastAPI API 身份验证
  • auth0-aspnetcore-authentication - ASP.NET Core Web 应用身份验证
  • auth0-aspnetcore-api - ASP.NET Core API 身份验证
Advanced Features
  • auth0-mfa - Multi-Factor Authentication

References

评论

支持 Markdown