Initial commit: OAuth 2.0 인증 시스템 with APISIX API Gateway

- FastAPI 백엔드 + MongoDB + Redis 구성 - React + Vite + TypeScript + shadcn/ui 프론트엔드 - Apache APISIX API Gateway 통합 - Docker Compose 기반 개발 환경 - 3단계 권한 체계 (System Admin, Group Admin, User) - 동적 테마 지원 - 환경별 설정 (dev/vei/prod) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-31 10:16:41 +09:00
commit f53d55e712
55 changed files with 6798 additions and 0 deletions
--- a/oauth/backend/.env.example
+++ b/oauth/backend/.env.example
@ -0,0 +1,13 @@
+SECRET_KEY=0198fd96-f538-7a81-be14-d9e4cb81f60d
+MONGODB_URL=mongodb://localhost:27017
+DATABASE_NAME=oauth_db
+REDIS_URL=redis://localhost:6379
+ENVIRONMENT=dev
+BACKUP_PATH=/var/backups/oauth
+ARCHIVE_PATH=/var/archives/oauth
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your-email@gmail.com
+SMTP_PASSWORD=your-app-password
+NEXUS_URL=http://nexus.local:8081
+NEXUS_REPOSITORY=oauth-artifacts
--- a/oauth/backend/Dockerfile
+++ b/oauth/backend/Dockerfile
@ -0,0 +1,16 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8000
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
--- a/oauth/backend/Dockerfile.dev
+++ b/oauth/backend/Dockerfile.dev
@ -0,0 +1,15 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    gcc \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+EXPOSE 8000
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
--- a/oauth/backend/app/init.py
+++ b/oauth/backend/app/init.py
--- a/oauth/backend/app/api/v1/router.py
+++ b/oauth/backend/app/api/v1/router.py
@ -0,0 +1,9 @@
+from fastapi import APIRouter
+from app.api.v1.endpoints import auth, users, applications, admin
+
+api_router = APIRouter()
+
+api_router.include_router(auth.router, prefix="/auth", tags=["authentication"])
+api_router.include_router(users.router, prefix="/users", tags=["users"])
+api_router.include_router(applications.router, prefix="/applications", tags=["applications"])
+api_router.include_router(admin.router, prefix="/admin", tags=["admin"])
--- a/oauth/backend/app/core/config.py
+++ b/oauth/backend/app/core/config.py
@ -0,0 +1,49 @@
+from typing import List, Union
+from pydantic_settings import BaseSettings
+from pydantic import field_validator
+import os
+
+class Settings(BaseSettings):
+    PROJECT_NAME: str = "OAuth Authentication System"
+    VERSION: str = "1.0.0"
+    API_V1_STR: str = "/api/v1"
+    
+    SECRET_KEY: str = os.getenv("SECRET_KEY", "0198fda4-294e-77b0-a95d-2b601d2c594d")
+    ALGORITHM: str = "HS256"
+    ACCESS_TOKEN_EXPIRE_MINUTES: int = 30
+    REFRESH_TOKEN_EXPIRE_DAYS: int = 7
+    
+    MONGODB_URL: str = os.getenv("MONGODB_URL", "mongodb://localhost:27017")
+    DATABASE_NAME: str = os.getenv("DATABASE_NAME", "oauth_db")
+    
+    REDIS_URL: str = os.getenv("REDIS_URL", "redis://localhost:6379")
+    
+    BACKEND_CORS_ORIGINS: List[str] = ["http://localhost:3000", "http://localhost:5173"]
+    
+    ENVIRONMENT: str = os.getenv("ENVIRONMENT", "dev")
+    
+    BACKUP_PATH: str = os.getenv("BACKUP_PATH", "/var/backups/oauth")
+    ARCHIVE_PATH: str = os.getenv("ARCHIVE_PATH", "/var/archives/oauth")
+    
+    SMTP_HOST: str = os.getenv("SMTP_HOST", "")
+    SMTP_PORT: int = int(os.getenv("SMTP_PORT", "587"))
+    SMTP_USER: str = os.getenv("SMTP_USER", "")
+    SMTP_PASSWORD: str = os.getenv("SMTP_PASSWORD", "")
+    
+    NEXUS_URL: str = os.getenv("NEXUS_URL", "")
+    NEXUS_REPOSITORY: str = os.getenv("NEXUS_REPOSITORY", "")
+    
+    @field_validator("BACKEND_CORS_ORIGINS", mode="before")
+    @classmethod
+    def assemble_cors_origins(cls, v: Union[str, List[str]]) -> Union[List[str], str]:
+        if isinstance(v, str) and not v.startswith("["):
+            return [i.strip() for i in v.split(",")]
+        elif isinstance(v, (list, str)):
+            return v
+        raise ValueError(v)
+    
+    class Config:
+        env_file = ".env"
+        case_sensitive = True
+
+settings = Settings()
--- a/oauth/backend/app/core/database.py
+++ b/oauth/backend/app/core/database.py
@ -0,0 +1,38 @@
+from motor.motor_asyncio import AsyncIOMotorClient
+from app.core.config import settings
+import redis.asyncio as redis
+from typing import Optional
+
+class Database:
+    client: Optional[AsyncIOMotorClient] = None
+    database = None
+    redis_client: Optional[redis.Redis] = None
+
+db = Database()
+
+async def init_db():
+    db.client = AsyncIOMotorClient(settings.MONGODB_URL)
+    db.database = db.client[settings.DATABASE_NAME]
+    db.redis_client = await redis.from_url(settings.REDIS_URL, decode_responses=True)
+    
+    await create_indexes()
+
+async def close_db():
+    if db.client:
+        db.client.close()
+    if db.redis_client:
+        await db.redis_client.close()
+
+async def create_indexes():
+    await db.database.users.create_index("email", unique=True)
+    await db.database.users.create_index("username", unique=True)
+    await db.database.applications.create_index("client_id", unique=True)
+    await db.database.applications.create_index("app_name", unique=True)
+    await db.database.auth_history.create_index([("user_id", 1), ("created_at", -1)])
+    await db.database.auth_history.create_index("created_at")
+
+def get_database():
+    return db.database
+
+def get_redis():
+    return db.redis_client
--- a/oauth/backend/app/main.py
+++ b/oauth/backend/app/main.py
@ -0,0 +1,38 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from contextlib import asynccontextmanager
+from app.core.config import settings
+from app.core.database import init_db, close_db
+from app.api.v1.router import api_router
+import logging
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    await init_db()
+    logger.info("Database initialized")
+    yield
+    await close_db()
+    logger.info("Database connection closed")
+
+app = FastAPI(
+    title=settings.PROJECT_NAME,
+    version=settings.VERSION,
+    lifespan=lifespan
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=settings.BACKEND_CORS_ORIGINS,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(api_router, prefix=settings.API_V1_STR)
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "service": "OAuth Authentication System"}
--- a/oauth/backend/app/models/application.py
+++ b/oauth/backend/app/models/application.py
@ -0,0 +1,54 @@
+from pydantic import BaseModel, Field
+from datetime import datetime
+from typing import Optional, Dict, Any
+
+class ApplicationTheme(BaseModel):
+    primary_color: str = "#1976d2"
+    secondary_color: str = "#dc004e"
+    background_color: str = "#ffffff"
+    text_color: str = "#000000"
+    logo_url: Optional[str] = None
+    background_image_url: Optional[str] = None
+    font_family: str = "Roboto, sans-serif"
+    border_radius: str = "8px"
+    custom_css: Optional[str] = None
+
+class ApplicationBase(BaseModel):
+    app_name: str
+    description: str
+    redirect_uris: list[str]
+    allowed_origins: list[str]
+    theme: ApplicationTheme = ApplicationTheme()
+    is_active: bool = True
+    allow_registration: bool = True
+    require_email_verification: bool = False
+
+class ApplicationCreate(ApplicationBase):
+    pass
+
+class ApplicationUpdate(BaseModel):
+    app_name: Optional[str] = None
+    description: Optional[str] = None
+    redirect_uris: Optional[list[str]] = None
+    allowed_origins: Optional[list[str]] = None
+    theme: Optional[ApplicationTheme] = None
+    is_active: Optional[bool] = None
+    allow_registration: Optional[bool] = None
+    require_email_verification: Optional[bool] = None
+
+class ApplicationInDB(ApplicationBase):
+    id: str = Field(alias="_id")
+    client_id: str
+    client_secret: str
+    created_at: datetime
+    updated_at: datetime
+    created_by: str
+    
+    class Config:
+        populate_by_name = True
+
+class Application(ApplicationBase):
+    id: str
+    client_id: str
+    created_at: datetime
+    updated_at: datetime
--- a/oauth/backend/app/models/user.py
+++ b/oauth/backend/app/models/user.py
@ -0,0 +1,54 @@
+from pydantic import BaseModel, EmailStr, Field
+from datetime import datetime
+from typing import Optional, List
+from enum import Enum
+
+class UserRole(str, Enum):
+    SYSTEM_ADMIN = "system_admin"
+    GROUP_ADMIN = "group_admin"
+    USER = "user"
+
+class UserBase(BaseModel):
+    email: EmailStr
+    username: str
+    full_name: str
+    role: UserRole = UserRole.USER
+    is_active: bool = True
+    phone_number: Optional[str] = None
+    birth_date: Optional[str] = None
+    gender: Optional[str] = None
+    profile_picture: Optional[str] = None
+
+class UserCreate(UserBase):
+    password: str
+
+class UserUpdate(BaseModel):
+    full_name: Optional[str] = None
+    phone_number: Optional[str] = None
+    birth_date: Optional[str] = None
+    gender: Optional[str] = None
+    profile_picture: Optional[str] = None
+
+class UserInDB(UserBase):
+    id: str = Field(alias="_id")
+    hashed_password: str
+    created_at: datetime
+    updated_at: datetime
+    last_login: Optional[datetime] = None
+    
+    class Config:
+        populate_by_name = True
+
+class User(UserBase):
+    id: str
+    created_at: datetime
+    updated_at: datetime
+    last_login: Optional[datetime] = None
+
+class UserPermissions(BaseModel):
+    single_sign_on: bool = True
+    share_name: bool = True
+    share_gender: bool = False
+    share_birth_date: bool = False
+    share_email: bool = True
+    share_phone: bool = False
--- a/oauth/backend/requirements.txt
+++ b/oauth/backend/requirements.txt
@ -0,0 +1,25 @@
+fastapi==0.115.0
+uvicorn[standard]==0.30.6
+python-multipart==0.0.9
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+motor==3.5.1
+redis==5.0.7
+pydantic==2.9.1
+pydantic-settings==2.4.0
+python-dotenv==1.0.1
+httpx==0.27.0
+celery==5.4.0
+flower==2.0.1
+pytest==8.3.2
+pytest-asyncio==0.24.0
+black==24.8.0
+ruff==0.6.3
+authlib==1.3.1
+itsdangerous==2.2.0
+email-validator==2.2.0
+Pillow==10.4.0
+cryptography==42.0.8
+aiofiles==24.1.0
+python-dateutil==2.9.0
+pytz==2024.1
--- a/oauth/configs/dev/.env
+++ b/oauth/configs/dev/.env
@ -0,0 +1,9 @@
+ENVIRONMENT=dev
+SECRET_KEY=dev-secret-key-change-in-production
+MONGODB_URL=mongodb://localhost:27017
+DATABASE_NAME=oauth_db_dev
+REDIS_URL=redis://localhost:6379
+BACKUP_PATH=/var/backups/oauth/dev
+ARCHIVE_PATH=/var/archives/oauth/dev
+FRONTEND_URL=http://localhost:5173
+BACKEND_URL=http://localhost:8000
--- a/oauth/configs/prod/.env
+++ b/oauth/configs/prod/.env
@ -0,0 +1,9 @@
+ENVIRONMENT=prod
+SECRET_KEY=${PROD_SECRET_KEY}
+MONGODB_URL=${PROD_MONGODB_URL}
+DATABASE_NAME=oauth_db_prod
+REDIS_URL=${PROD_REDIS_URL}
+BACKUP_PATH=/var/backups/oauth/prod
+ARCHIVE_PATH=/var/archives/oauth/prod
+FRONTEND_URL=https://oauth.example.com
+BACKEND_URL=https://api-oauth.example.com
--- a/oauth/configs/vei/.env
+++ b/oauth/configs/vei/.env
@ -0,0 +1,9 @@
+ENVIRONMENT=vei
+SECRET_KEY=${VEI_SECRET_KEY}
+MONGODB_URL=mongodb://mongodb:27017
+DATABASE_NAME=oauth_db_vei
+REDIS_URL=redis://redis:6379
+BACKUP_PATH=/var/backups/oauth/vei
+ARCHIVE_PATH=/var/archives/oauth/vei
+FRONTEND_URL=https://vei-oauth.example.com
+BACKEND_URL=https://vei-oauth-api.example.com
--- a/oauth/configs/vei/docker-compose.yml
+++ b/oauth/configs/vei/docker-compose.yml
@ -0,0 +1,73 @@
+version: '3.8'
+
+services:
+  mongodb:
+    image: mongo:7.0
+    container_name: vei-oauth-mongodb
+    restart: always
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: ${MONGO_USER}
+      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_PASSWORD}
+      MONGO_INITDB_DATABASE: oauth_db_vei
+    volumes:
+      - vei_mongodb_data:/data/db
+    networks:
+      - vei-oauth-network
+
+  redis:
+    image: redis:7-alpine
+    container_name: vei-oauth-redis
+    restart: always
+    command: redis-server --requirepass ${REDIS_PASSWORD} --appendonly yes
+    volumes:
+      - vei_redis_data:/data
+    networks:
+      - vei-oauth-network
+
+  backend:
+    image: ${NEXUS_URL}/oauth-backend:${VERSION}
+    container_name: vei-oauth-backend
+    restart: always
+    env_file:
+      - .env
+    environment:
+      - MONGODB_URL=mongodb://${MONGO_USER}:${MONGO_PASSWORD}@mongodb:27017/oauth_db_vei?authSource=admin
+      - REDIS_URL=redis://:${REDIS_PASSWORD}@redis:6379
+    depends_on:
+      - mongodb
+      - redis
+    networks:
+      - vei-oauth-network
+
+  frontend:
+    image: ${NEXUS_URL}/oauth-frontend:${VERSION}
+    container_name: vei-oauth-frontend
+    restart: always
+    depends_on:
+      - backend
+    networks:
+      - vei-oauth-network
+
+  nginx:
+    image: nginx:alpine
+    container_name: vei-oauth-nginx
+    restart: always
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./nginx/ssl:/etc/nginx/ssl:ro
+    depends_on:
+      - frontend
+      - backend
+    networks:
+      - vei-oauth-network
+
+volumes:
+  vei_mongodb_data:
+  vei_redis_data:
+
+networks:
+  vei-oauth-network:
+    driver: bridge
--- a/oauth/docs/api-specification.md
+++ b/oauth/docs/api-specification.md
@ -0,0 +1,349 @@
+# OAuth API 명세서
+
+## Base URL
+- Development: `http://localhost:8000/api/v1`
+- Verification: `https://vei-oauth-api.example.com/api/v1`
+- Production: `https://api-oauth.example.com/api/v1`
+
+## 인증 헤더
+```
+Authorization: Bearer {access_token}
+```
+
+## API 엔드포인트
+
+### 인증 (Authentication)
+
+#### POST /auth/login
+사용자 로그인
+
+**Request Body:**
+```json
+{
+  "email": "user@example.com",
+  "password": "password123"
+}
+```
+
+**Response:**
+```json
+{
+  "access_token": "eyJ...",
+  "refresh_token": "eyJ...",
+  "token_type": "bearer",
+  "expires_in": 1800
+}
+```
+
+#### POST /auth/logout
+사용자 로그아웃
+
+**Headers:**
+- Authorization: Bearer {access_token}
+
+**Response:**
+```json
+{
+  "message": "Successfully logged out"
+}
+```
+
+#### POST /auth/refresh
+토큰 갱신
+
+**Request Body:**
+```json
+{
+  "refresh_token": "eyJ..."
+}
+```
+
+**Response:**
+```json
+{
+  "access_token": "eyJ...",
+  "token_type": "bearer",
+  "expires_in": 1800
+}
+```
+
+#### POST /auth/authorize
+OAuth 인증 요청
+
+**Query Parameters:**
+- `response_type`: "code"
+- `client_id`: Application Client ID
+- `redirect_uri`: Redirect URI
+- `scope`: 요청 권한 (space 구분)
+- `state`: CSRF 방지용 상태값
+
+**Response:**
+- 302 Redirect to `{redirect_uri}?code={auth_code}&state={state}`
+
+#### POST /auth/token
+Access Token 발급
+
+**Request Body:**
+```json
+{
+  "grant_type": "authorization_code",
+  "code": "auth_code",
+  "client_id": "client_id",
+  "client_secret": "client_secret",
+  "redirect_uri": "redirect_uri"
+}
+```
+
+**Response:**
+```json
+{
+  "access_token": "eyJ...",
+  "refresh_token": "eyJ...",
+  "token_type": "bearer",
+  "expires_in": 1800,
+  "scope": "read write"
+}
+```
+
+### 사용자 관리 (Users)
+
+#### GET /users/me
+현재 사용자 정보 조회
+
+**Response:**
+```json
+{
+  "id": "user_id",
+  "email": "user@example.com",
+  "username": "username",
+  "full_name": "John Doe",
+  "role": "user",
+  "profile_picture": "https://...",
+  "created_at": "2024-01-01T00:00:00Z",
+  "last_login": "2024-01-01T00:00:00Z"
+}
+```
+
+#### PUT /users/me
+사용자 정보 수정
+
+**Request Body:**
+```json
+{
+  "full_name": "Jane Doe",
+  "phone_number": "+1234567890",
+  "birth_date": "1990-01-01",
+  "gender": "female"
+}
+```
+
+#### POST /users/me/password
+패스워드 변경
+
+**Request Body:**
+```json
+{
+  "current_password": "old_password",
+  "new_password": "new_password"
+}
+```
+
+#### POST /users/me/profile-picture
+프로필 사진 업로드
+
+**Request:**
+- Content-Type: multipart/form-data
+- File: image file
+
+#### GET /users/me/permissions
+사용자 권한 조회
+
+**Response:**
+```json
+{
+  "single_sign_on": true,
+  "share_name": true,
+  "share_gender": false,
+  "share_birth_date": false,
+  "share_email": true,
+  "share_phone": false
+}
+```
+
+#### PUT /users/me/permissions
+사용자 권한 수정
+
+**Request Body:**
+```json
+{
+  "share_gender": true,
+  "share_birth_date": true
+}
+```
+
+#### GET /users/me/applications
+인증된 애플리케이션 목록
+
+**Response:**
+```json
+{
+  "applications": [
+    {
+      "id": "app_id",
+      "name": "Application Name",
+      "logo_url": "https://...",
+      "authorized_at": "2024-01-01T00:00:00Z",
+      "last_used": "2024-01-01T00:00:00Z",
+      "permissions": ["read", "write"]
+    }
+  ]
+}
+```
+
+#### DELETE /users/me/applications/{app_id}
+애플리케이션 인증 해제
+
+### 애플리케이션 관리 (Applications)
+
+#### GET /applications
+애플리케이션 목록 조회 (Admin only)
+
+#### POST /applications
+애플리케이션 등록 (Admin only)
+
+**Request Body:**
+```json
+{
+  "app_name": "My Application",
+  "description": "Application description",
+  "redirect_uris": ["https://app.example.com/callback"],
+  "allowed_origins": ["https://app.example.com"],
+  "theme": {
+    "primary_color": "#1976d2",
+    "secondary_color": "#dc004e",
+    "logo_url": "https://...",
+    "background_image_url": "https://..."
+  }
+}
+```
+
+**Response:**
+```json
+{
+  "id": "app_id",
+  "client_id": "generated_client_id",
+  "client_secret": "generated_client_secret",
+  "app_name": "My Application",
+  "created_at": "2024-01-01T00:00:00Z"
+}
+```
+
+#### GET /applications/{app_id}
+애플리케이션 상세 조회
+
+#### PUT /applications/{app_id}
+애플리케이션 수정 (Admin only)
+
+#### DELETE /applications/{app_id}
+애플리케이션 삭제 (Admin only)
+
+#### POST /applications/{app_id}/regenerate-secret
+Client Secret 재생성 (Admin only)
+
+### 관리자 (Admin)
+
+#### GET /admin/users
+전체 사용자 목록 (System Admin only)
+
+**Query Parameters:**
+- `page`: 페이지 번호 (default: 1)
+- `limit`: 페이지당 항목 수 (default: 20)
+- `role`: 역할 필터
+- `search`: 검색어
+
+#### GET /admin/users/{user_id}
+사용자 상세 조회 (Admin only)
+
+#### PUT /admin/users/{user_id}/role
+사용자 역할 변경 (System Admin only)
+
+**Request Body:**
+```json
+{
+  "role": "group_admin"
+}
+```
+
+#### GET /admin/audit-logs
+감사 로그 조회 (Admin only)
+
+**Query Parameters:**
+- `user_id`: 사용자 ID
+- `app_id`: 애플리케이션 ID
+- `action`: 액션 타입
+- `start_date`: 시작일
+- `end_date`: 종료일
+
+#### GET /admin/statistics
+통계 정보 조회 (Admin only)
+
+**Response:**
+```json
+{
+  "total_users": 1000,
+  "active_users_today": 150,
+  "total_applications": 25,
+  "total_authentications_today": 5000,
+  "top_applications": [...]
+}
+```
+
+## 에러 응답
+
+### 에러 응답 형식
+```json
+{
+  "error": "error_code",
+  "message": "Error message",
+  "details": {}
+}
+```
+
+### 에러 코드
+- `400`: Bad Request
+- `401`: Unauthorized
+- `403`: Forbidden
+- `404`: Not Found
+- `409`: Conflict
+- `422`: Unprocessable Entity
+- `429`: Too Many Requests
+- `500`: Internal Server Error
+
+## Rate Limiting
+- 일반 API: 100 requests/minute
+- 인증 API: 10 requests/minute
+- 관리자 API: 1000 requests/minute
+
+## Webhooks
+
+### 이벤트 타입
+- `user.created`
+- `user.updated`
+- `user.deleted`
+- `user.login`
+- `user.logout`
+- `application.authorized`
+- `application.revoked`
+
+### Webhook 페이로드
+```json
+{
+  "event": "user.login",
+  "timestamp": "2024-01-01T00:00:00Z",
+  "data": {
+    "user_id": "user_id",
+    "application_id": "app_id",
+    "ip_address": "192.168.1.1"
+  }
+}
+```
--- a/oauth/docs/apisix-guide.md
+++ b/oauth/docs/apisix-guide.md
@ -0,0 +1,173 @@
+# APISIX API Gateway 가이드
+
+## 개요
+Apache APISIX는 고성능 API Gateway로 OAuth 시스템의 모든 API 트래픽을 관리합니다.
+
+## 주요 기능
+
+### 1. API 라우팅
+```mermaid
+graph LR
+    Client[클라이언트] --> APISIX[APISIX Gateway]
+    APISIX --> |/api/v1/auth/*| Auth[인증 서비스]
+    APISIX --> |/api/v1/users/*| Users[사용자 서비스]
+    APISIX --> |/api/v1/applications/*| Apps[애플리케이션 서비스]
+    APISIX --> |/api/v1/admin/*| Admin[관리자 서비스]
+    APISIX --> |/*| Frontend[프론트엔드]
+```
+
+### 2. Rate Limiting 정책
+- **인증 API**: 10 req/s (burst: 20)
+- **사용자 API**: 100 req/s (burst: 50)
+- **애플리케이션 API**: 50 req/s (burst: 25)
+- **관리자 API**: 200 req/s (burst: 100)
+- **Health Check**: 1000 req/s (burst: 500)
+
+### 3. 보안 플러그인
+
+#### JWT 인증
+```yaml
+jwt-auth:
+  key: "user-key"
+  secret: "my-secret-key"
+  algorithm: "HS256"
+```
+
+#### IP 제한 (관리자 API)
+```yaml
+ip-restriction:
+  whitelist:
+    - 10.0.0.0/8
+    - 172.16.0.0/12
+    - 192.168.0.0/16
+```
+
+#### CORS 설정
+```yaml
+cors:
+  allow_origins: "*"
+  allow_methods: "GET,POST,PUT,DELETE,OPTIONS"
+  allow_headers: "*"
+  expose_headers: "*"
+```
+
+### 4. 캐싱 전략
+프론트엔드 정적 리소스에 대한 캐싱:
+- 캐시 크기: 메모리 50MB, 디스크 1GB
+- 캐시 TTL: 300초
+- 캐시 대상: GET, HEAD 요청
+- 캐시 상태 코드: 200, 301, 404
+
+## APISIX 대시보드
+
+### 접속 정보
+- URL: http://localhost:9000
+- 계정: admin / admin123
+
+### 주요 기능
+1. **라우트 관리**: API 라우팅 규칙 설정
+2. **업스트림 관리**: 백엔드 서비스 설정
+3. **플러그인 설정**: 보안, 캐싱, 모니터링 플러그인
+4. **모니터링**: 실시간 트래픽 모니터링
+
+## API 호출 예시
+
+### 1. Health Check
+```bash
+curl http://localhost:9080/health
+```
+
+### 2. 인증 API
+```bash
+# 로그인
+curl -X POST http://localhost:9080/api/v1/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{"email":"user@example.com","password":"password123"}'
+```
+
+### 3. 사용자 API (JWT 토큰 필요)
+```bash
+curl -X GET http://localhost:9080/api/v1/users/me \
+  -H "Authorization: Bearer YOUR_JWT_TOKEN"
+```
+
+### 4. 관리자 API (IP 제한 + JWT)
+```bash
+curl -X GET http://localhost:9080/api/v1/admin/users \
+  -H "Authorization: Bearer ADMIN_JWT_TOKEN"
+```
+
+## 프로메테우스 메트릭
+APISIX는 Prometheus 메트릭을 제공합니다:
+- Endpoint: http://localhost:9091/metrics
+- 주요 메트릭:
+  - `apisix_http_status`: HTTP 상태 코드별 요청 수
+  - `apisix_http_latency`: 요청 지연 시간
+  - `apisix_bandwidth`: 대역폭 사용량
+
+## 트러블슈팅
+
+### 1. etcd 연결 실패
+```bash
+# etcd 상태 확인
+docker-compose exec etcd etcdctl endpoint health
+
+# etcd 로그 확인
+docker-compose logs etcd
+```
+
+### 2. 라우트가 작동하지 않음
+```bash
+# APISIX Admin API로 라우트 확인
+curl http://localhost:9092/apisix/admin/routes
+```
+
+### 3. Rate Limiting 디버깅
+```bash
+# Rate limit 헤더 확인
+curl -i http://localhost:9080/api/v1/auth/login
+# X-RateLimit-Limit, X-RateLimit-Remaining 헤더 확인
+```
+
+## 성능 최적화
+
+### 1. 연결 풀 설정
+```yaml
+upstream:
+  keepalive: 320
+  keepalive_requests: 10000
+  keepalive_timeout: 60s
+```
+
+### 2. 캐시 최적화
+```yaml
+proxy-cache:
+  cache_zone:
+    memory_size: 100m  # 메모리 캐시 증가
+    disk_size: 5G      # 디스크 캐시 증가
+```
+
+### 3. 로드 밸런싱 알고리즘
+- `roundrobin`: 기본 라운드 로빈
+- `chash`: 일관된 해싱
+- `ewma`: 지수 가중 이동 평균
+
+## 보안 Best Practices
+
+1. **Admin API 보호**
+   - 프로덕션에서는 Admin API를 내부 네트워크에서만 접근 가능하도록 설정
+   - Admin Key를 환경 변수로 관리
+
+2. **SSL/TLS 설정**
+   - 프로덕션에서는 반드시 HTTPS 사용
+   - Let's Encrypt 또는 상용 인증서 적용
+
+3. **WAF 플러그인 활용**
+   - SQL Injection 방지
+   - XSS 공격 방지
+   - CSRF 토큰 검증
+
+4. **로그 모니터링**
+   - 비정상적인 트래픽 패턴 감지
+   - 실패한 인증 시도 추적
+   - Rate limit 초과 모니터링
--- a/oauth/docs/architecture.md
+++ b/oauth/docs/architecture.md
@ -0,0 +1,209 @@
+# OAuth 시스템 아키텍처
+
+## 시스템 구성도
+
+```mermaid
+graph TB
+    subgraph "Client Layer"
+        Browser[사용자 브라우저]
+    end
+    
+    subgraph "API Gateway Layer"
+        APISIX[Apache APISIX<br/>- API Gateway<br/>- Rate Limiting<br/>- Authentication<br/>- Load Balancing]
+        etcd[etcd<br/>- Service Discovery<br/>- Configuration Store]
+    end
+    
+    subgraph "Application Layer"
+        Backend[FastAPI Backend<br/>- Auth Logic<br/>- JWT Handling<br/>- Business Logic]
+        Frontend[React Frontend<br/>- Dynamic UI<br/>- Theme Engine<br/>- SPA Routing]
+    end
+    
+    subgraph "Data Layer"
+        MongoDB[MongoDB<br/>- Users<br/>- Apps<br/>- History]
+        Redis[Redis<br/>- Cache<br/>- Queue<br/>- Session]
+        Celery[Celery<br/>- Tasks<br/>- Jobs]
+        Backup[Backup Service<br/>- Cron Jobs<br/>- Archives]
+    end
+    
+    Browser -->|HTTP/HTTPS| APISIX
+    APISIX -->|/api/v1/*| Backend
+    APISIX -->|/*| Frontend
+    APISIX <--> etcd
+    Backend --> MongoDB
+    Backend --> Redis
+    Backend --> Celery
+    Backend --> Backup
+```
+
+## 데이터 플로우
+
+### 1. 인증 플로우
+
+```mermaid
+sequenceDiagram
+    participant User as 사용자
+    participant App as 애플리케이션
+    participant OAuth as OAuth 서버
+    participant DB as Database
+    
+    User->>App: 1. 접속
+    App->>OAuth: 2. 리다이렉트 (client_id, redirect_uri)
+    OAuth->>User: 3. 동적 로그인 페이지 렌더링
+    User->>OAuth: 4. 인증 정보 입력
+    OAuth->>DB: 5. 인증 검증
+    OAuth->>User: 6. Authorization Code 발급
+    User->>App: 7. Code 전달
+    App->>OAuth: 8. Access Token 요청
+    OAuth->>App: 9. Access Token 발급
+    App->>OAuth: 10. 사용자 정보 요청
+    OAuth->>App: 11. 권한별 사용자 정보 제공
+```
+
+### 2. 토큰 관리
+- Access Token: 30분 유효
+- Refresh Token: 7일 유효
+- Token Rotation 정책 적용
+
+## 마이크로서비스 구조
+
+```mermaid
+graph LR
+    subgraph "Core Services"
+        Auth[Authentication Service]
+        Authz[Authorization Service]
+        UserMgmt[User Management Service]
+        AppService[Application Service]
+        Audit[Audit Service]
+    end
+    
+    subgraph "Support Services"
+        Cache[Cache Service]
+        Queue[Queue Service]
+        Backup[Backup Service]
+    end
+    
+    Auth --> Cache
+    Auth --> Queue
+    Authz --> Cache
+    UserMgmt --> Audit
+    AppService --> Audit
+```
+
+### Core Services
+1. **Authentication Service**
+   - 사용자 인증
+   - 토큰 발급/검증
+   - 세션 관리
+
+2. **Authorization Service**
+   - 권한 확인
+   - 역할 기반 접근 제어 (RBAC)
+   - 리소스 접근 관리
+
+3. **User Management Service**
+   - 사용자 CRUD
+   - 프로필 관리
+   - 패스워드 관리
+
+4. **Application Service**
+   - 애플리케이션 등록/관리
+   - Client Credentials 관리
+   - 테마 설정 관리
+
+5. **Audit Service**
+   - 접속 로그
+   - 인증 히스토리
+   - 보안 이벤트 추적
+
+## 확장성 고려사항
+
+### Horizontal Scaling
+```mermaid
+graph TB
+    LB[Load Balancer]
+    
+    subgraph "Application Instances"
+        App1[App Instance 1]
+        App2[App Instance 2]
+        App3[App Instance 3]
+    end
+    
+    subgraph "Shared State"
+        Redis[Redis Session Store]
+        MongoDB[MongoDB Cluster]
+    end
+    
+    LB --> App1
+    LB --> App2
+    LB --> App3
+    
+    App1 --> Redis
+    App1 --> MongoDB
+    App2 --> Redis
+    App2 --> MongoDB
+    App3 --> Redis
+    App3 --> MongoDB
+```
+
+### Database Sharding
+- User ID 기반 샤딩
+- Application ID 기반 샤딩
+- 시간 기반 파티셔닝 (히스토리)
+
+### Caching Strategy
+- User Profile 캐싱
+- Application Settings 캐싱
+- Token 캐싱
+
+## 보안 아키텍처
+
+```mermaid
+graph TB
+    subgraph "External"
+        Internet[Internet]
+    end
+    
+    subgraph "DMZ"
+        WAF[WAF]
+        CDN[CDN]
+    end
+    
+    subgraph "Public Subnet"
+        ALB[Application Load Balancer]
+        NAT[NAT Gateway]
+    end
+    
+    subgraph "Private Subnet"
+        App[Application Servers]
+        Cache[Cache Layer]
+    end
+    
+    subgraph "Data Subnet"
+        DB[(Database)]
+        Backup[(Backup Storage)]
+    end
+    
+    Internet --> WAF
+    WAF --> CDN
+    CDN --> ALB
+    ALB --> App
+    App --> Cache
+    App --> NAT
+    App --> DB
+    DB --> Backup
+```
+
+### Network Security
+- VPC 격리
+- Security Groups
+- Private Subnets
+
+### Application Security
+- Rate Limiting
+- DDoS Protection
+- WAF Rules
+
+### Data Security
+- Encryption at Rest
+- Encryption in Transit
+- Key Management Service (KMS)
--- a/oauth/frontend/.gitignore
+++ b/oauth/frontend/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/oauth/frontend/Dockerfile
+++ b/oauth/frontend/Dockerfile
@ -0,0 +1,18 @@
+FROM node:20-alpine as builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/oauth/frontend/Dockerfile.dev
+++ b/oauth/frontend/Dockerfile.dev
@ -0,0 +1,10 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
--- a/oauth/frontend/README.md
+++ b/oauth/frontend/README.md
@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/oauth/frontend/eslint.config.js
+++ b/oauth/frontend/eslint.config.js
@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/oauth/frontend/index.html
+++ b/oauth/frontend/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/oauth/frontend/nginx.conf
+++ b/oauth/frontend/nginx.conf
@ -0,0 +1,29 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_pass http://backend:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 10240;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
+    gzip_disable "MSIE [1-6]\.";
+}
--- a/oauth/frontend/package-lock.json
+++ b/oauth/frontend/package-lock.json
--- a/oauth/frontend/package.json
+++ b/oauth/frontend/package.json
@ -0,0 +1,44 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
+    "@tanstack/react-query": "^5.85.6",
+    "axios": "^1.11.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.62.0",
+    "react-router-dom": "^7.8.2",
+    "zod": "^4.1.5",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "lucide-react": "^0.542.0",
+    "postcss": "^8.5.6",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.12",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
+  }
+}
--- a/oauth/frontend/public/vite.svg
+++ b/oauth/frontend/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/oauth/frontend/src/App.css
+++ b/oauth/frontend/src/App.css
@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/oauth/frontend/src/App.tsx
+++ b/oauth/frontend/src/App.tsx
@ -0,0 +1,35 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App
--- a/oauth/frontend/src/assets/react.svg
+++ b/oauth/frontend/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/oauth/frontend/src/index.css
+++ b/oauth/frontend/src/index.css
@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/oauth/frontend/src/main.tsx
+++ b/oauth/frontend/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/oauth/frontend/src/vite-env.d.ts
+++ b/oauth/frontend/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/oauth/frontend/tsconfig.app.json
+++ b/oauth/frontend/tsconfig.app.json
@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/oauth/frontend/tsconfig.json
+++ b/oauth/frontend/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/oauth/frontend/tsconfig.node.json
+++ b/oauth/frontend/tsconfig.node.json
@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/oauth/frontend/vite.config.ts
+++ b/oauth/frontend/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>