Gated Content Template

A production-ready Next.js template demonstrating how to monetize content with Salable billing integration. This template shows the complete implementation of a gated content platform with free and premium articles, subscription management, and checkout flows.

What This Template Demonstrates

This is a reference implementation for content monetization. It showcases:

• Freemium Content Model - Free articles accessible to everyone, premium articles gated behind authentication and subscriptions
• Metered Access - Logged-in users get 3 free premium article reads per month before requiring a subscription
• Subscription Billing - Seamless upgrade flow from free tier to paid subscription via Stripe
• Entitlement Checking - Real-time verification of user access rights through Salable's entitlement API
• Subscription Management - Users can view and cancel their subscriptions from their account page

How Salable Monetizes Content

Salable handles the complexity of subscription billing so you can focus on your content. Here's how it works:

The Commercial Model

Tier	Price	What Users Get
Free (Signed Out)	$0	Access to free articles only
Free (Signed In)	$0	Free articles + 3 premium reads/month
Unlimited	$12.99/mo	Unlimited access to all content

Key Concepts

• Entitlements - Feature flags that control access. This template uses basic_reading (read articles) and unlimited_reading (bypass the 3-read limit)
• Plans - Pricing tiers that bundle entitlements. The Free plan includes basic_reading; the Unlimited plan includes both
• Owner/Grantee - Who pays vs. who uses. In this B2C model, the same user is both owner and grantee
• Checkout - Salable generates Stripe checkout sessions. Users complete payment on Stripe, then Salable grants entitlements automatically

The User Journey

Anonymous User
     │
     ▼
┌─────────────────────┐
│  Browses free       │
│  articles freely    │
└──────────┬──────────┘
           │ Clicks premium article
           ▼
┌─────────────────────┐
│  Sees paywall:      │
│  "Sign in to        │
│   continue reading" │
└──────────┬──────────┘
           │ Signs in with GitHub
           ▼
┌─────────────────────┐
│  Can use 3 free     │
│  premium reads      │
│  per month          │
└──────────┬──────────┘
           │ Uses all 3 reads
           ▼
┌─────────────────────┐
│  Sees upgrade       │
│  prompt             │
└──────────┬──────────┘
           │ Clicks "Upgrade"
           ▼
┌─────────────────────┐
│  Completes Stripe   │
│  checkout ($12.99)  │
└──────────┬──────────┘
           │ Subscription created
           ▼
┌─────────────────────┐
│  Unlimited access   │
│  to all content     │
└─────────────────────┘

Tech Stack

• Framework: Next.js 15 (Pages Router)
• Authentication: NextAuth.js with GitHub OAuth
• Styling: Tailwind CSS + shadcn/ui components
• Billing: Salable (wraps Stripe)
• Testing: Playwright for e2e tests

Getting Started

Option A: Build Your Product in Salable Dashboard

1. Create a Salable account at beta.salable.app

2. Follow PRODUCT.md to set up your commercial model:

   • Create entitlements (basic_reading, unlimited_reading)
   • Create a product ("Gated Content Template")
   • Create plans (Free at $0/mo, Unlimited at $12.99/mo)
   • The file includes exact API commands and expected responses

3. Set up GitHub OAuth following SETUP_GITHUB_OAUTH.md

4. Configure environment variables - copy .env.example to .env.local and fill in:

   cp .env.example .env.local

5. Install and run:

   npm install
   npm run dev

Option B: Use AI Assistance

This template includes comprehensive documentation designed for AI coding assistants:

• CLAUDE.md - For Claude Code CLI
• AGENTS.md - For ChatGPT, Cursor, and other AI tools

Simply ask your AI assistant:

"Read CLAUDE.md and help me set up the Salable commercial model for this template"

The AI will guide you through creating entitlements, products, and plans via the Salable API.

Project Structure

gated-content-template/
├── components/
│   ├── layout.tsx          # Page wrapper with header/footer
│   ├── header.tsx          # Navigation with auth state
│   ├── footer.tsx          # Site footer
│   ├── paywall.tsx         # Premium content gate
│   ├── article-card.tsx    # Article preview card
│   └── ui/                 # shadcn/ui components
│
├── lib/
│   ├── articles.ts         # Article data and helpers
│   ├── salable.ts          # Salable API client
│   └── hooks/              # React hooks for entitlements
│
├── pages/
│   ├── index.tsx           # Landing page
│   ├── login.tsx           # GitHub OAuth login
│   ├── pricing.tsx         # Plan comparison + checkout
│   ├── account.tsx         # Subscription management
│   ├── articles/
│   │   ├── index.tsx       # Article listing
│   │   └── [slug].tsx      # Article detail (gated)
│   └── api/
│       ├── auth/           # NextAuth endpoints
│       ├── checkout.ts     # Generate checkout links
│       ├── entitlements.ts # Check user entitlements
│       ├── subscription.ts # Get subscription details
│       └── cancel.ts       # Cancel subscription
│
├── e2e/                    # Playwright tests
├── CLAUDE.md               # AI agent documentation
├── AGENTS.md               # AI agent documentation (copy)
├── PRODUCT.md              # Commercial model specification
└── .env.example            # Environment variable template

Environment Variables

Variable	Description
NEXTAUTH_SECRET	Random string for session encryption
NEXTAUTH_URL	Your app URL (http://localhost:3000 for dev)
AUTH_GITHUB_ID	GitHub OAuth app client ID
AUTH_GITHUB_SECRET	GitHub OAuth app client secret
SALABLE_API_KEY	Your Salable API key (TEST mode for dev)
SALABLE_FREE_PLAN_ID	Plan ID for the Free tier
SALABLE_UNLIMITED_PLAN_ID	Plan ID for the Unlimited tier

The Articles

This template includes 9 instructional articles that explain each component:

Free Articles (5):

1. Welcome to Your Gated Content Platform
2. Understanding the Article List
3. Authentication with NextAuth
4. Free vs Premium Content
5. The Pricing Page

Premium Articles (4): 6. Salable Integration Deep Dive 7. Subscription Management 8. Webhook Handling 9. Customizing This Template

Each article describes what that part of the system does, making the template self-documenting.

Testing

Run the Playwright e2e tests:

# Install Playwright browsers
npx playwright install chromium

# Run tests
npx playwright test

# Run tests with UI
npx playwright test --ui

Test coverage includes:

• Article browsing (free vs premium)
• Authentication flow
• Premium content gating
• Free reads exhaustion
• Pricing page and checkout initiation

Stripe Test Cards

When testing checkout in TEST mode:

Card Number	Result
4242 4242 4242 4242	Successful payment
4000 0000 0000 0002	Declined

Use any future expiry date, any CVC, and any ZIP code.

Customizing for Your Use Case

1. Replace the articles - Edit lib/articles.ts with your content
2. Update branding - Modify components/header.tsx and components/footer.tsx
3. Adjust pricing - Update your Salable plans and the pricing page
4. Add content types - Extend the article model for videos, courses, etc.
5. Change auth provider - NextAuth supports Google, Twitter, email, and more

See the "Customizing This Template" premium article for detailed guidance.

Documentation

File	Purpose
PRODUCT.md	Commercial model specification with API commands
CLAUDE.md	Comprehensive Salable API guide for Claude Code
AGENTS.md	Same guide for other AI assistants
ARCHITECTURE.md	System design and data flows
IMPLEMENTATION_PLAN.md	Build phases and decisions
SETUP_GITHUB_OAUTH.md	Step-by-step OAuth setup

License

MIT