Environment Variables

Overview

JCV Fitness uses environment variables to configure connections to Supabase, payment providers, and deployment platforms. All environment variables should be stored in .env.local for local development.

Never commit .env.local or any file containing secrets to version control. These files are already in .gitignore.

Environment File Setup

Create a .env.local file in the root of your project:

touch .env.local

Required Variables

Supabase Configuration

These variables are required for authentication, database access, and storage.

.env.local

# Supabase - Get these from https://app.supabase.com/project/_/settings/api
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Service Role Key (server-side only, never expose to client)
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Get Supabase URL

Go to Supabase Dashboard
Select your project
Navigate to Settings → API
Copy the Project URL as NEXT_PUBLIC_SUPABASE_URL

Get Anonymous Key

From the same API settings page:

Copy the anon public key as NEXT_PUBLIC_SUPABASE_ANON_KEY

Get Service Role Key

The Service Role Key bypasses Row Level Security. Never expose it to the client or commit it to version control.

From the API settings page:

Copy the service_role key as SUPABASE_SERVICE_ROLE_KEY

MercadoPago Configuration

Required for payment processing (primary payment provider).

.env.local

# MercadoPago - Get from https://www.mercadopago.com/developers/panel
NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY=APP_USR-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
MERCADOPAGO_ACCESS_TOKEN=APP_USR-xxxxxxxxxxxx-xxxxxx-xxxxxxxxxxxx

Create MercadoPago Application

Go to MercadoPago Developer Panel
Create a new application or select existing one
Copy your Public Key (for client-side)
Copy your Access Token (for server-side)

Test vs Production

MercadoPago provides different keys for testing and production:

Test keys: Start with TEST-
Production keys: Start with APP_USR-

Use test keys during development.

Optional Variables

Wompi Configuration

Future payment provider integration (currently not active).

.env.local

# Wompi (Future)
NEXT_PUBLIC_WOMPI_PUBLIC_KEY=pub_test_xxxxx
WOMPI_PRIVATE_KEY=prv_test_xxxxx

Email Service (Resend)

For sending subscription reminder emails.

.env.local

# Resend - Get from https://resend.com/api-keys
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxx

How to get a Resend API key

Sign up at Resend
Navigate to API Keys in the dashboard
Create a new API key
Copy and paste it as RESEND_API_KEY

Cloudflare Configuration

For deploying the webhook worker and hosting on Cloudflare Pages.

.env.local

# Cloudflare (for deployment)
CLOUDFLARE_API_TOKEN=your-api-token
CLOUDFLARE_ACCOUNT_ID=your-account-id

Environment Variable Prefixes

Next.js requires the NEXT_PUBLIC_ prefix for any variable that should be accessible in the browser.

Prefix	Access	Use Case
`NEXT_PUBLIC_`	Client + Server	Public configuration (API URLs, public keys)
No prefix	Server only	Secrets (service keys, tokens, private keys)

Example Configuration

Here’s a complete example .env.local file:

.env.local

# ===========================================
# JCV FITNESS - ENVIRONMENT VARIABLES
# ===========================================

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://chqgylghpuzcqzkbuhsk.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNocWd5bGdocHV6Y3F6a2J1aHNrIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODk3Mjc0OTAsImV4cCI6MjAwNTMwMzQ5MH0.example-key
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.example-service-role-key

# MercadoPago (Test Mode)
NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY=TEST-xxxx-xxxx-xxxx-xxxx
MERCADOPAGO_ACCESS_TOKEN=TEST-xxxx-xxxx-xxxx-xxxx

# Optional: Email Service
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxx

# Optional: Cloudflare
CLOUDFLARE_API_TOKEN=your-token
CLOUDFLARE_ACCOUNT_ID=your-account-id

Validation

You can verify your environment variables are loaded correctly:

// Check in any component or API route
console.log('Supabase URL:', process.env.NEXT_PUBLIC_SUPABASE_URL)
console.log('Has Service Key:', !!process.env.SUPABASE_SERVICE_ROLE_KEY)

Never log sensitive keys like SUPABASE_SERVICE_ROLE_KEY or MERCADOPAGO_ACCESS_TOKEN in production.

Deployment Environments

Cloudflare Pages

When deploying to Cloudflare Pages, set these environment variables in the dashboard:

Navigate to Environment Variables

Go to your Cloudflare Pages project
Click Settings → Environment variables

Add variables for each environment

Add all NEXT_PUBLIC_* variables for:

Production (main branch)
Preview (staging branch)

Cloudflare Workers

For the MercadoPago webhook worker, set secrets using Wrangler:

cd cloudflare-worker
wrangler secret put SUPABASE_SERVICE_ROLE_KEY
wrangler secret put MERCADOPAGO_ACCESS_TOKEN

Security Best Practices

Rotate keys regularly

Change Supabase service role keys every 90 days
Update MercadoPago tokens if compromised
Use different keys for staging and production

Never commit secrets

Always use .env.local (already in .gitignore)
Never hardcode keys in source files
Use environment variables for all sensitive data

Limit key permissions

Use anonymous keys for client-side Supabase access
Use service role keys only in server-side code
Enable Row Level Security (RLS) on all tables

Troubleshooting