auth0-quickstart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Auth0 Quickstart

Auth0 快速入门

Detect your framework and get started with Auth0 authentication.

检测你的框架并开始使用Auth0认证。

Step 1: Detect Your Framework

步骤1：检测你的框架

Run this command to identify your framework:

bash

undefined

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

bash

undefined

Check package.json dependencies

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` |
| React Native | `"react-native"` or `"expo"` in package.json | `auth0-react-native` |

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

---

ls -la | grep -E "angular.json|vue.config.js|next.config"


**框架检测对照表：**

| 框架 | 检测方式 | 要使用的Skill |
|-----------|-----------|--------------|
| 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` |
| Angular | 存在`angular.json`或包含`"@angular/core"` | `auth0-angular` |
| Express.js | package.json中包含`"express"` | `auth0-express` |
| React Native | package.json中包含`"react-native"`或`"expo"` | `auth0-react-native` |

**未找到你的框架？** 请查看下方的二级框架。

---

Step 2: Auth0 Account Setup

步骤2：Auth0账户设置

Install Auth0 CLI

安装Auth0 CLI

macOS/Linux:

bash

brew install auth0/auth0-cli/auth0

Windows:

bash

scoop install auth0

macOS/Linux：

bash

brew install auth0/auth0-cli/auth0

Windows：

bash

scoop install auth0

Or: choco install auth0-cli


**Full installation guide:** See [CLI Reference](references/cli.md#installation)


**完整安装指南：** 查看[CLI参考文档](references/cli.md#installation)

Login to Auth0

登录Auth0

bash

auth0 login

This opens your browser to authenticate with Auth0.

bash

auth0 login

此命令会打开你的浏览器进行Auth0身份验证。

Step 3: Create Auth0 Application

步骤3：创建Auth0应用

Choose application type based on your framework:

Single Page Applications (React, Vue, Angular):

bash

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

Regular Web Apps (Next.js, Express):

bash

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

Native Apps (React Native):

bash

auth0 apps create --name "My App" --type native \
  --callbacks "myapp://callback" \
  --logout-urls "myapp://logout"

Get your credentials:

bash

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

More CLI commands: See CLI Reference

根据你的框架选择应用类型：

单页应用（React、Vue、Angular）：

bash

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

常规Web应用（Next.js、Express）：

bash

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

原生应用（React Native）：

bash

auth0 apps create --name "My App" --type native \
  --callbacks "myapp://callback" \
  --logout-urls "myapp://logout"

获取你的凭证：

bash

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

更多CLI命令： 查看CLI参考文档

Step 4: Use Framework-Specific Skill

步骤4：使用框架专属Skill

Based on your framework detection, use the appropriate skill:

根据框架检测结果，使用对应的Skill：

Tier 1 Frameworks (Dedicated Skills)

一级框架（专属Skill）

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

Mobile:

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

前端：

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-react-native
- React Native和Expo（iOS/Android）

Tier 2 Frameworks (Use Auth0 Docs)

二级框架（使用Auth0文档）

Not yet available as separate skills. Use Auth0 documentation:

Frontend:

Backend:

Mobile:

暂无专属Skill，请使用Auth0官方文档：

前端：

后端：

移动：

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

从其他认证服务商迁移？ 使用**

auth0-migration

** Skill。

迁移Skill包含以下内容：

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

Reference Documentation

参考文档

Environment Variables

环境变量

Framework-specific environment variable setup:

Vite, Create React App, Angular
Next.js, Express
React Native, Expo

框架专属的环境变量设置：

Vite, Create React App, Angular
Next.js, Express
React Native, Expo

Auth0 Concepts

Auth0核心概念

Core concepts and troubleshooting:

Application Types
Key Terms
OAuth Flows
Troubleshooting
Security Best Practices

核心概念与故障排查：

应用类型
关键术语
OAuth流程
故障排查
安全最佳实践

CLI Commands

CLI命令

Complete Auth0 CLI reference:

CLI Installation
Creating Applications
User Management
Testing & Debugging
Command Quick Reference

完整的Auth0 CLI参考：

CLI安装
创建应用
用户管理
测试与调试
命令速查

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

错误	修复方案
错误的应用类型	单页应用需选择“Single Page Application”，服务器应用需选择“Regular Web Application”，移动应用需选择“Native”
未配置回调URL	在Auth0控制台的“Allowed Callback URLs”中添加你的应用回调URL
使用错误的凭证	仅常规Web应用需要Client Secret，单页应用不需要
在代码中硬编码凭证	始终使用环境变量，切勿将密钥提交至git
未先在本地测试	部署到生产环境前，先在Auth0中配置localhost URL
混合应用类型	不要为服务器端应用使用SPA SDK，反之亦然

auth0-quickstart

Original

Translation

Auth0 Quickstart

Auth0 快速入门

Step 1: Detect Your Framework

步骤1：检测你的框架

Check package.json dependencies

Check package.json dependencies

Or check project files

Or check project files

Step 2: Auth0 Account Setup

步骤2：Auth0账户设置

Install Auth0 CLI

安装Auth0 CLI

Or: choco install auth0-cli

Or: choco install auth0-cli

Login to Auth0

登录Auth0

Step 3: Create Auth0 Application

步骤3：创建Auth0应用

Step 4: Use Framework-Specific Skill

步骤4：使用框架专属Skill

Tier 1 Frameworks (Dedicated Skills)

一级框架（专属Skill）

Tier 2 Frameworks (Use Auth0 Docs)

二级框架（使用Auth0文档）

Migration from Other Providers

从其他服务商迁移

Reference Documentation

参考文档

Environment Variables

环境变量

Auth0 Concepts

Auth0核心概念

CLI Commands

CLI命令

Common Mistakes

常见错误

Related Skills

相关Skill

Core Integration

核心集成

SDK Skills

SDK Skill

Advanced Features

高级功能

References

参考链接