Back to skills
extension
Category: Development & EngineeringNo API key required

auth0-quickstart

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

personAuthor: jakexiaohubgithub

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

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

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-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