Echo

API Keys Setup

Configure all the necessary API keys and accounts for your Echo website

Account Setup Checklist

Services you can configure

SupabaseRequired

Database and user management

StripeOptional

Payments and subscriptions

ResendOptional

Email sending

Google OAuthOptional

Sign in with Google

GitHub OAuthOptional

Sign in with GitHub

Supabase (Required)

Required

Database and user management

  1. Go to supabase.com and create a project
  2. Get credentials from Settings → API
  3. Get database connection string from Settings → Database
# Add to .env.local:
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGc...
SUPABASE_DB_URL=postgresql://postgres:[password]@db.xxx.supabase.co:5432/postgres

Stripe (Optional)

Optional

Payments and subscriptions

  1. Go to stripe.com and create an account
  2. Get API keys from Developers → API keys
  3. Create a product and price in Stripe dashboard
  4. Set up webhook (see Stripe Setup guide)
# Add to .env.local:
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_PRICE_ID=price_...
STRIPE_WEBHOOK_SECRET=whsec_...

Resend (Optional)

Optional

Send transactional emails

  1. Go to resend.com and create an account
  2. Go to API Keys and create a new key
  3. Add your sending domain (optional but recommended)
# Add to .env.local:
RESEND_API_KEY=re_...
EMAIL_FROM=noreply@yourdomain.com

OAuth Providers (Optional)

Allow users to sign in with Google or GitHub

Google OAuth

  1. Go to Google Cloud Console
  2. Create OAuth client ID
  3. Add redirect URI: http://localhost:3000/api/auth/callback/google

GitHub OAuth

  1. Go to GitHub → Settings → Developer settings → OAuth Apps
  2. Create new OAuth App
  3. Set callback URL: http://localhost:3000/api/auth/callback/github

Security Best Practices

  • Never commit .env.local to git
  • Use different keys for development and production
  • Rotate keys regularly (every 3-6 months)
  • Use test keys during development
  • Monitor API usage for unusual activity

Quick Reference

All environment variables at a glance

# Required
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
SUPABASE_DB_URL=...
SUPABASE_SERVICE_ROLE_KEY=...
# Optional - Authentication
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
GITHUB_CLIENT_ID=...
GITHUB_CLIENT_SECRET=...
# Optional - Payments
STRIPE_SECRET_KEY=...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=...
STRIPE_PRICE_ID=...
# Optional - Emails
RESEND_API_KEY=...
EMAIL_FROM=noreply@yourdomain.com

Next Steps

After adding all keys, restart your development server:

pnpm dev
→ Authentication Setup→ Stripe Setup Guide