Environment Variables

Environment variables are stored in .env.local at the root of your project. This file is gitignored and should never be committed to version control.

Required Variables

Whop API Key

WHOP_API_KEY=your_api_key_here

Get your API key from the Whop Developer Dashboard.

Usage:

// lib/whop-sdk.ts
import { WhopSDK } from '@whop/sdk';

export const whop = new WhopSDK({
  apiKey: process.env.WHOP_API_KEY!
});

Database URL

DATABASE_URL=postgresql://user:password@host:port/database

Your PostgreSQL connection string. Get this from your database provider:

Neon: Dashboard → Connection String
Supabase: Settings → Database → Connection String (Session mode)
PlanetScale: Overview → Connect → Prisma
Turso: Dashboard → Database → Connection URL

Usage:

// db/index.ts
import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';

const client = postgres(process.env.DATABASE_URL!);
export const db = drizzle(client);

Optional Variables

Whop OAuth (for authentication flows)

WHOP_CLIENT_ID=your_client_id
WHOP_CLIENT_SECRET=your_client_secret

Required if you implement custom OAuth flows. Get these from your Whop app settings.

Application URL

NEXT_PUBLIC_APP_URL=http://localhost:3000

Your application's URL. Used for redirects and webhooks.

Development: http://localhost:3000
Production: https://yourdomain.com

Usage in client components:

const appUrl = process.env.NEXT_PUBLIC_APP_URL;

Webhook Secret

WHOP_WEBHOOK_SECRET=whsec_your_secret_here

Used to verify webhook signatures. You'll get this when creating a webhook:

import { createWebhook } from '@/lib/whop/webhooks';

const result = await createWebhook({
  url: `${process.env.NEXT_PUBLIC_APP_URL}/api/webhooks`,
  events: ['membership.went_valid', 'payment.succeeded']
});

// Store this secret in your .env.local
console.log(result.webhookSecret);

Company ID

WHOP_COMPANY_ID=biz_your_company_id

Your Whop company/business ID. Makes it easier to reference in your code without hardcoding.

Usage:

const companyId = process.env.WHOP_COMPANY_ID!;
const members = await getActiveMembers(companyId);

Environment Variable Reference

Variable	Required	Description	Example
`WHOP_API_KEY`	✅ Yes	Whop API key from developer dashboard	`sk_...`
`DATABASE_URL`	✅ Yes	PostgreSQL connection string	`postgresql://...`
`WHOP_CLIENT_ID`	❌ No	OAuth client ID	`oauth_...`
`WHOP_CLIENT_SECRET`	❌ No	OAuth client secret	`secret_...`
`NEXT_PUBLIC_APP_URL`	❌ No	Your app's URL	`https://app.com`
`WHOP_WEBHOOK_SECRET`	❌ No	Webhook signature verification	`whsec_...`
`WHOP_COMPANY_ID`	❌ No	Your company ID	`biz_...`

Setup Guide

1. Create `.env.local`

In your project root, create a .env.local file:

touch .env.local

2. Add Required Variables

# .env.local

# Required
WHOP_API_KEY=sk_your_api_key_here
DATABASE_URL=postgresql://user:password@host:port/database

# Optional but recommended
NEXT_PUBLIC_APP_URL=http://localhost:3000
WHOP_COMPANY_ID=biz_your_company_id

3. Verify Configuration

Create a test API route to verify:

// app/api/test-env/route.ts
export async function GET() {
  return Response.json({
    hasApiKey: !!process.env.WHOP_API_KEY,
    hasDatabase: !!process.env.DATABASE_URL,
    appUrl: process.env.NEXT_PUBLIC_APP_URL
  });
}

Visit /api/test-env to check your configuration.

Development vs Production

Development (`.env.local`)

WHOP_API_KEY=sk_test_...
DATABASE_URL=postgresql://localhost:5432/dev
NEXT_PUBLIC_APP_URL=http://localhost:3000

Production (Vercel/Hosting Platform)

Set environment variables in your hosting platform's dashboard:

Vercel:

Project Settings → Environment Variables
Add each variable
Select Production/Preview/Development environments
Redeploy

Important: Use production API keys and database URLs in production!

Client vs Server Variables

Server-Side Only

These are only accessible in server components and API routes:

// ✅ Available server-side
process.env.WHOP_API_KEY
process.env.DATABASE_URL
process.env.WHOP_WEBHOOK_SECRET

Never expose these to the client!

Client-Side (`NEXT_PUBLIC_*`)

Variables prefixed with NEXT_PUBLIC_ are available in browser:

// ✅ Available client-side
process.env.NEXT_PUBLIC_APP_URL

// ❌ NOT available client-side
process.env.WHOP_API_KEY // undefined in browser

Example:

'use client';

export function RedirectButton() {
  const handleClick = () => {
    // This works - NEXT_PUBLIC_ prefix
    window.location.href = `${process.env.NEXT_PUBLIC_APP_URL}/dashboard`;
  };
  
  return <button onClick={handleClick}>Go to Dashboard</button>;
}

Security Best Practices

1. Never Commit `.env.local`

Your .gitignore should include:

# .gitignore
.env*.local
.env.local
.env

2. Rotate API Keys Regularly

If an API key is compromised:

Generate new key in Whop dashboard
Update .env.local and production environment
Revoke old key

3. Use Different Keys Per Environment

# Development
WHOP_API_KEY=sk_test_...

# Production  
WHOP_API_KEY=sk_live_...

4. Validate Environment Variables

Add runtime validation:

// lib/env.ts
function validateEnv() {
  const required = ['WHOP_API_KEY', 'DATABASE_URL'];
  
  for (const key of required) {
    if (!process.env[key]) {
      throw new Error(`Missing required environment variable: ${key}`);
    }
  }
}

validateEnv();

5. Use Secrets Management

For team environments, consider:

Vercel: Built-in environment variables
1Password: Team secret sharing
AWS Secrets Manager: For AWS deployments
HashiCorp Vault: Enterprise solutions

Troubleshooting

"Missing API Key" Error

Problem: Error: Whop API key is required

Solution:

Check .env.local exists
Verify WHOP_API_KEY is set
Restart dev server (pnpm dev)

Database Connection Failed

Problem: Error: connect ECONNREFUSED

Solution:

Verify DATABASE_URL is correct
Check database is running
Test connection with psql or database client
For Neon/Supabase, verify project is active

Environment Variable is `undefined`

Problem: Variable shows as undefined in code

Solutions:

Server-side: Restart dev server after changing .env.local
Client-side: Add NEXT_PUBLIC_ prefix
Production: Redeploy after changing environment variables

Changes Not Taking Effect

Problem: Updated .env.local but changes don't work

Solution:

Kill dev server completely
Clear Next.js cache: rm -rf .next
Restart: pnpm dev

Example `.env.local`

Complete example for a production-ready app:

# Whop Configuration
WHOP_API_KEY=sk_live_abc123xyz789
WHOP_CLIENT_ID=oauth_abc123
WHOP_CLIENT_SECRET=secret_xyz789
WHOP_COMPANY_ID=biz_mycompany123
WHOP_WEBHOOK_SECRET=whsec_webhook789

# Database
DATABASE_URL=postgresql://user:pass@db.example.com:5432/production

# Application
NEXT_PUBLIC_APP_URL=https://myapp.com
NODE_ENV=production

# Optional: Analytics
NEXT_PUBLIC_ANALYTICS_ID=GA-123456789

# Optional: Feature Flags
ENABLE_BETA_FEATURES=false

Installation - Initial setup guide
Database - Database configuration
Project Structure - File organization

Environment Variables

On this page