Environment Variables Reference

Environment Variables

⚠️

Important: Never commit your .env.local file to version control. It's already in .gitignore by default.

Quick Setup

Create a .env.local file in the root of your project and add the following variables:

Complete .env.local Template

# Firebase Configuration
# Get these from Firebase Console → Project Settings → General
NEXT_PUBLIC_APIKEY=your_firebase_api_key
NEXT_PUBLIC_APPID=your_firebase_app_id
NEXT_PUBLIC_AUTHDOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_MESSAGINGSENDERID=your_messaging_sender_id
NEXT_PUBLIC_STORAGEBUCKET=your_project_id.appspot.com
NEXT_PUBLIC_PROJECTID=your_project_id


# Stripe Configuration
# Get these from Stripe Dashboard → Developers → API Keys
NEXT_PUBLIC_PUBLISHABLE_KEY=pk_test_your_publishable_key
STRIPE_SECRET_KEY=sk_test_your_secret_key


# Stripe Price IDs
# Create products in Stripe Dashboard → Products, then copy price IDs
NEXT_PUBLIC_MONTHLY_PRICE_ID=price_monthly_subscription_id
NEXT_PUBLIC_YEARLY_PRICE_ID=price_yearly_subscription_id


# Stripe Webhook Secret
# Development: Run `stripe listen --forward-to localhost:3000/api/stripe/webhook` 
# Production: Get from Stripe Dashboard → Webhooks after creating endpoint
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret


# MailerSend Configuration
# Get these from MailerSend Dashboard → API Tokens
# Free tier: 12,000 emails/month
MAILERSEND_API_KEY=your_mailersend_api_key
MAILERSEND_FROM_EMAIL=noreply@yourdomain.com


# Application Configuration
# Set your pricing (must match Stripe product prices)
NEXT_PUBLIC_MONTHLY_PRICE=9.99
NEXT_PUBLIC_YEARLY_PRICE=99.99


# Base URL
# Development: http://localhost:3000
# Production: https://yourdomain.com
NEXT_PUBLIC_BASE_URL=http://localhost:3000

Variable Breakdown

Firebase Configuration

These variables configure your Firebase project connection.

VariableDescriptionWhere to Find
NEXT_PUBLIC_APIKEYFirebase API keyFirebase Console → Project Settings → General
NEXT_PUBLIC_APPIDFirebase App IDFirebase Console → Project Settings → General
NEXT_PUBLIC_AUTHDOMAINFirebase Auth domainFirebase Console → Project Settings → General
NEXT_PUBLIC_MESSAGINGSENDERIDFirebase Messaging IDFirebase Console → Project Settings → General
NEXT_PUBLIC_STORAGEBUCKETFirebase Storage bucketFirebase Console → Project Settings → General
NEXT_PUBLIC_PROJECTIDFirebase Project IDFirebase Console → Project Settings → General
ℹ️

Why NEXT_PUBLIC_? These Firebase variables are prefixed with NEXT_PUBLIC_ because they're used client-side. This is by design and secure for Firebase.

Stripe Configuration

These variables handle payment processing.

VariableDescriptionSecurity
NEXT_PUBLIC_PUBLISHABLE_KEYStripe publishable key (client-side)✅ Safe to expose
STRIPE_SECRET_KEYStripe secret key (server-side)🔒 Keep secret!
NEXT_PUBLIC_MONTHLY_PRICE_IDMonthly subscription price ID✅ Safe to expose
NEXT_PUBLIC_YEARLY_PRICE_IDYearly subscription price ID✅ Safe to expose
STRIPE_WEBHOOK_SECRETWebhook signing secret🔒 Keep secret!
⚠️

Critical: STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET must NEVER have the NEXT_PUBLIC_ prefix. They should only be accessible server-side.

MailerSend Configuration

These variables configure email sending.

VariableDescriptionWhere to Find
MAILERSEND_API_KEYMailerSend API tokenMailerSend Dashboard → API Tokens
MAILERSEND_FROM_EMAILSender email addressYour verified domain or sandbox

Development: Use the sandbox domain provided by MailerSend (e.g., noreply@trial-xxxxx.mlsender.net)

Production: Use your verified domain (e.g., noreply@yourdomain.com)

Application Configuration

These variables configure your app's pricing and URLs.

VariableDescriptionExample
NEXT_PUBLIC_MONTHLY_PRICEMonthly price display9.99
NEXT_PUBLIC_YEARLY_PRICEYearly price display99.99
NEXT_PUBLIC_BASE_URLYour app's base URLhttp://localhost:3000
💡

Tip: Prices must match your Stripe product prices exactly!

Development vs Production

Development Setup

# Use test mode keys
NEXT_PUBLIC_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...

# Use Stripe CLI for webhooks
STRIPE_WEBHOOK_SECRET=whsec_... (from `stripe listen`)

# Use MailerSend sandbox
MAILERSEND_FROM_EMAIL=noreply@trial-xxxxx.mlsender.net

# Local URL
NEXT_PUBLIC_BASE_URL=http://localhost:3000

Production Setup

# Use live mode keys
NEXT_PUBLIC_PUBLISHABLE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...

# Use production webhook secret
STRIPE_WEBHOOK_SECRET=whsec_... (from Stripe Dashboard)

# Use verified domain
MAILERSEND_FROM_EMAIL=noreply@yourdomain.com

# Production URL
NEXT_PUBLIC_BASE_URL=https://yourdomain.com

Security Best Practices

✅ DO:

  • Keep .env.local in .gitignore
  • Use different keys for development and production
  • Rotate secrets regularly
  • Use environment variables in your hosting platform (Vercel, etc.)
  • Prefix client-side variables with NEXT_PUBLIC_

❌ DON'T:

  • Commit .env.local to Git
  • Share secret keys in public channels
  • Use production keys in development
  • Add NEXT_PUBLIC_ to secret keys
  • Hardcode sensitive values in code

Vercel Deployment

When deploying to Vercel, add environment variables in:

Vercel Dashboard → Your Project → Settings → Environment Variables

Add all variables from your .env.local file, making sure to:

  1. Select the correct environment (Production, Preview, Development)
  2. Use production keys for production environment
  3. Save and redeploy

Troubleshooting

"Firebase: No Firebase App '[DEFAULT]' has been created"

Solution: Check that all Firebase variables are set correctly in .env.local

"Stripe: Invalid API Key"

Solution:

  • Verify STRIPE_SECRET_KEY doesn't have NEXT_PUBLIC_ prefix
  • Check you're using the correct key for your environment (test vs live)

"Webhook signature verification failed"

Solution:

  • Development: Make sure stripe listen is running
  • Production: Verify webhook secret matches Stripe Dashboard

"MailerSend: Unauthorized"

Solution:

  • Check MAILERSEND_API_KEY is correct
  • Verify API token has proper permissions

Quick Reference

Copy this to create your .env.local:

macOS/Linux:

# In your project root
cp .env.example .env.local
 
# Then edit .env.local with your actual values

Windows (PowerShell):

# In your project root
Copy-Item .env.example .env.local
 
# Then edit .env.local with your actual values

Windows (Command Prompt):

# In your project root
copy .env.example .env.local
 
# Then edit .env.local with your actual values
🎉

All set! Your environment variables are configured. Remember to restart your dev server after changing .env.local.

Step 1: Environment SetupStep 2: Firebase Setup