# Quick Start

Create your first StackPatch project in minutes

## 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](https://nodejs.org/)
- **Bun 1.0+** (optional) - [Download from bun.sh](https://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

[**Commands** \ \
\ Complete CLI reference with all options](/content/docs/cli/commands/index.html) [**Guides** \ \
\ Practical guides for common setups](/content/docs/guides/index.html) [**Project Structure** \ \
\ Understand how StackPatch organizes your project](/content/docs/project-structure/index.html) [**Contributing** \ \
\ Learn how to contribute to StackPatch](/content/docs/contribution/index.html) [**FAQ** \ \
\ Frequently asked questions](/content/docs/faq/index.html)