AgentSkillsCN

auth0-quickstart

在任何框架中开始 Auth0 集成时使用——自动检测您的技术栈(React、Next.js、Vue、Angular、Express、React Native),并引导您进入正确的 SDK 设置流程。

SKILL.md
--- frontmatter
name: auth0-quickstart
description: Use when starting Auth0 integration in any framework - detects your stack (React, Next.js, Vue, Angular, Express, React Native) and routes to correct SDK setup workflow

Auth0 Quickstart

Detect your framework and get started with Auth0 authentication.


Step 1: Detect Your Framework

Run this command to identify your framework:

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

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

Framework Detection Table:

FrameworkDetectionSkill to Use
React (Vite/CRA)"react" in package.json, no Next.jsauth0-react
Next.js"next" in package.jsonauth0-nextjs
Vue.js"vue" in package.json, no Nuxtauth0-vue
Angularangular.json exists or "@angular/core"auth0-angular
Express.js"express" in package.jsonauth0-express
React Native"react-native" or "expo" in package.jsonauth0-react-native

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


Step 2: Auth0 Account Setup

Install Auth0 CLI

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

Login to Auth0

bash
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):

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


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

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

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

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-react-native - React Native/Expo integration

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

References