Quick Start

Philosophy

• Own your code: Every line of code is yours to modify and customize
• Zero vendor lock-in: No SaaS dependencies, everything runs on your infrastructure
• Production-ready: Battle-tested patterns, not toy examples
• Incremental adoption: Add features to existing projects seamlessly
• Fully reversible: Track and revert any installation safely

Get Started

Prerequisites

• Node.js 18+ - Download from nodejs.org
• Bun 1.0+ (optional) - Download from bun.sh - if you want to use Bun
• Next.js project (App Router) - Create new or use existing

Add to Existing Project

Navigate to your Next.js project and run:

npx stackpatch add auth

npm create stackpatch@latest

bunx stackpatch add auth

Follow the interactive prompts to select OAuth providers (Google, GitHub, Email/Password).

Create New Project

Create a new StackPatch project from scratch:

npx stackpatch create my-app

npm create stackpatch@latest my-app

bunx create-stackpatch@latest my-app

Then add patches to your new project:

cd my-app
npx stackpatch add auth

cd my-app
npx stackpatch add auth

cd my-app
bunx stackpatch add auth

Common Setups

Authentication with Google & GitHub

Add authentication with multiple OAuth providers:

npx stackpatch add auth
# Select: Google, GitHub

npm create stackpatch@latest
# Then: npx stackpatch add auth

bunx stackpatch add auth
# Select: Google, GitHub

Email/Password Authentication

Add email/password authentication (demo mode):

npx stackpatch add auth
# Select: Email/Password

npm create stackpatch@latest
# Then: npx stackpatch add auth

bunx stackpatch add auth
# Select: Email/Password

Revert Installation

If you need to undo an installation:

npx stackpatch revert

npx stackpatch revert

bunx stackpatch revert

What Gets Added

When you run npx stackpatch add auth, StackPatch automatically:

• ✅ Detects your project structure (app/ vs src/app/)
• ✅ Adds authentication pages (/auth/login, /auth/signup)
• ✅ Configures NextAuth.js with selected providers
• ✅ Creates protected route components
• ✅ Sets up middleware for route protection
• ✅ Installs dependencies (next-auth, react-hot-toast)
• ✅ Updates your layout.tsx with providers
• ✅ Uses your TypeScript path aliases
• ✅ Tracks all changes for safe reversion

Next Steps