Back to Details

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

Check package.json dependencies

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

Or check project files

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

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

常见错误

MistakeFix
Wrong application typeSPAs need "Single Page Application", server apps need "Regular Web Application", mobile needs "Native"
Callback URL not configuredAdd your app's callback URL to Allowed Callback URLs in Auth0 Dashboard
Using wrong credentialsClient Secret only needed for Regular Web Apps, not SPAs
Hardcoding credentials in codeAlways use environment variables, never commit secrets to git
Not testing locally firstSet up localhost URLs in Auth0 before deploying to production
Mixing application typesDon'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，反之亦然

Related Skills

相关Skill

Core Integration

核心集成

  • auth0-migration
    - Migrate from other auth providers
  • auth0-migration
    - 从其他认证服务商迁移

SDK Skills

SDK Skill

  • 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-react-native
    - React Native/Expo integration
  • auth0-react
    - React单页应用集成
  • auth0-nextjs
    - Next.js集成
  • auth0-vue
    - Vue.js集成
  • auth0-angular
    - Angular集成
  • auth0-express
    - Express.js集成
  • auth0-react-native
    - React Native/Expo集成

Advanced Features

高级功能

  • auth0-mfa
    - Multi-Factor Authentication
  • auth0-organizations
    - B2B multi-tenancy
  • auth0-passkeys
    - Passwordless authentication
  • auth0-flows
    - Customize login flows
  • auth0-enterprise
    - SAML, OIDC connections
  • auth0-mfa
    - 多因素认证
  • auth0-organizations
    - B2B多租户
  • auth0-passkeys
    - 无密码认证
  • auth0-flows
    - 自定义登录流程
  • auth0-enterprise
    - SAML、OIDC连接

References

参考链接