auth0-quickstart

작성자: auth0

9가지 JavaScript 및 백엔드 프레임워크를 위한 프레임워크 탐지 및 Auth0 계정 설정 라우터입니다. 스택(React, Next.js, Vue, Nuxt, Angular, Express, Fastify, React Native)을 탐지하여 올바른 프레임워크별 스킬로 라우팅합니다. SPA, 일반 웹 앱, 네이티브 앱을 위한 Auth0 CLI 설치 및 애플리케이션 생성 명령어를 제공합니다. 각 프레임워크 계층에 대한 환경 변수 설정 가이드와 일반적인 실수 참조를 포함합니다. Firebase, Cognito 등에서의 마이그레이션 패턴을 다룹니다.

npx skills add https://github.com/auth0/agent-skills --skill auth0-quickstart

ZIP 다운로드 GitHub

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

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`
Nuxt	`"nuxt"` in package.json	`auth0-nuxt`
Angular	`angular.json` exists or `"@angular/core"`	`auth0-angular`
Express.js	`"express"` in package.json	`auth0-express`
Fastify (web app)	`"fastify"` in package.json, has `@fastify/view`	`auth0-fastify`
Fastify (API)	`"fastify"` in package.json, no view engine	`auth0-fastify-api`
React Native	`"react-native"` or `"expo"` in package.json	`auth0-react-native`
Flask	`"flask"` in requirements.txt, Pipfile, or pyproject.toml	`auth0-flask`
Node.js API	`"express-oauth2-jwt-bearer"` in package.json	`express-oauth2-jwt-bearer`
ASP.NET Core web app	`*.csproj` exists, has `Views/` or `Pages/` folder	`auth0-aspnetcore-authentication`

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 \
  --auth-method None \
  --callbacks "http://localhost:3000" \
  --logout-urls "http://localhost:3000" \
  --metadata "created_by=agent_skills"

Regular Web Apps (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"

Native Apps (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"

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

Apply Branding (Optional)

After creating your application, apply branding so the Auth0 Universal Login page matches your app:

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"

This ensures users see your app's branding on the login screen instead of the default Auth0 branding. You can also use the acul-screen-generator skill for full custom login screen design.

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-nuxt - Nuxt 3/4 applications
auth0-angular - Angular 12+ applications

Backend:

auth0-express - Express.js web applications
auth0-flask - Flask web applications
auth0-fastify - Fastify web applications
auth0-fastify-api - Fastify API authentication
express-oauth2-jwt-bearer - Node.js/Express API JWT Bearer validation
auth0-aspnetcore-authentication - ASP.NET Core MVC, Razor Pages, Blazor Server 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