Environment Variables

Overview

The Plugin Agency contact form requires several environment variables for email delivery and spam protection via Google reCAPTCHA. This guide covers all required and optional variables, plus setup instructions.

Required Variables

Critical - The contact form will not work without these variables configured:

EMAIL_USER

Description: Email account username for sending contact form submissions.

.env

EMAIL_USER=[email protected]

Usage: Authenticates with the SMTP server to send emails.

EMAIL_PASS

Description: Email account password or app-specific password.

.env

EMAIL_PASS=your-app-password-here

Security: Never commit .env files to Git. Use .env.local for local development and configure variables in Vercel for production.

For Gmail: Use an App Password, not your regular Gmail password.

VITE_RECAPTCHA_SITE_KEY

Description: Google reCAPTCHA v2 site key (public key).

.env

VITE_RECAPTCHA_SITE_KEY=6LdXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Variables prefixed with VITE_ are exposed to the browser. This is intentional for the site key (it’s public).

Usage: Renders the reCAPTCHA widget on the contact form.

RECAPTCHA_SECRET_KEY

Description: Google reCAPTCHA v2 secret key (private key).

.env

RECAPTCHA_SECRET_KEY=6LdXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Security: This key must remain secret. Do NOT prefix it with VITE_ or it will be exposed to the browser.

Usage: Server-side validation of reCAPTCHA responses.

Optional Variables

EMAIL_TO

Description: Comma-separated list of recipient email addresses.

.env

EMAIL_TO=[email protected],[email protected]

Default: If not set, emails are sent to:

[email protected]
[email protected]

Code Reference:

api/send-email.js

to: process.env.EMAIL_TO 
  ? process.env.EMAIL_TO.split(',').map(e => e.trim()) 
  : ['[email protected]', '[email protected]']

EMAIL_CC

Description: CC recipients for contact form emails (currently commented out).

.env

EMAIL_CC=[email protected]

Code Reference:

api/send-email.js

// If uncommented:
if (process.env.EMAIL_CC) { 
  mailOptions.cc = process.env.EMAIL_CC; 
}

Setup Guides

Gmail App Password Setup

Google requires app-specific passwords for third-party applications.

Enable 2-Factor Authentication

Go to Google Account Security
Enable 2-Step Verification if not already enabled
Complete the setup process

Generate App Password

Go to App Passwords
Select App: “Mail”
Select Device: “Other (Custom name)”
Enter name: “Plugin Agency Contact Form”
Click Generate

Copy Password

Google will display a 16-character password:

abcd efgh ijkl mnop

Copy this password (without spaces) to your .env file:

.env

EMAIL_PASS=abcdefghijklmnop

Test Configuration

Run your development server and test the contact form:

npm run dev

Submit a test message to verify email delivery.

Security Note: App passwords bypass 2FA. Treat them like your main password. If compromised, revoke them immediately in your Google Account settings.

reCAPTCHA Key Setup

Protect your contact form from spam with Google reCAPTCHA v2.

Create reCAPTCHA Site

Go to Google reCAPTCHA Admin
Sign in with your Google account
Fill out the registration form:
- Label: “Plugin Agency Contact Form”
- reCAPTCHA type: reCAPTCHA v2 → “I’m not a robot” Checkbox
- Domains:
  - localhost (for development)
  - plugin.uy (your production domain)
  - *.vercel.app (for Vercel preview deployments)
Accept the Terms of Service
Click Submit

Copy Keys

Google will display two keys:Site Key (Public)

6LdXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Secret Key (Private)

6LdYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

Add to Environment

Add both keys to your .env file:

.env

VITE_RECAPTCHA_SITE_KEY=6LdXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
RECAPTCHA_SECRET_KEY=6LdYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

The site key has the VITE_ prefix (exposed to browser). The secret key does NOT (server-side only).

Configure in Vercel

For production deployment:

Go to Vercel project → Settings → Environment Variables
Add both keys
Set environment: Production, Preview, and Development
Redeploy the site

How reCAPTCHA Works in the Code

Client-side (Contact.jsx):

import ReCAPTCHA from 'react-google-recaptcha'

<ReCAPTCHA
  sitekey={import.meta.env.VITE_RECAPTCHA_SITE_KEY}
  onChange={(token) => setCaptchaToken(token)}
/>

Server-side (api/send-email.js):

const verifyUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${captchaToken}`

const captchaRes = await fetch(verifyUrl, { method: 'POST' })
const captchaData = await captchaRes.json()

if (!captchaData.success) {
  return res.status(400).json({ error: 'Captcha inválido' })
}

Email Configuration Details

The contact form uses Nodemailer with custom SMTP settings.

SMTP Configuration

api/send-email.js

const transporter = nodemailer.createTransport({
  host: 'mail.plugin.uy',
  port: 465,
  secure: true, // true for port 465, false for other ports
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASS,
  },
})

Using Gmail SMTP Instead

If you want to use Gmail’s SMTP server instead of a custom domain:

const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASS,
  },
})

Or with explicit settings:

const transporter = nodemailer.createTransport({
  host: 'smtp.gmail.com',
  port: 587,
  secure: false, // Use TLS
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASS,
  },
})

Email Template

api/send-email.js

const mailOptions = {
  from: `"Plugin Contacto" <${process.env.EMAIL_USER}>`,
  replyTo: email, // User's email from form
  to: process.env.EMAIL_TO ? process.env.EMAIL_TO.split(',').map(e => e.trim()) : ['[email protected]', '[email protected]'],
  subject: `Nuevo mensaje de contacto de: ${nombre} ${apellido}`,
  text: `
    Has recibido un nuevo mensaje desde el formulario de contacto:
    
    Nombre: ${nombre} ${apellido}
    Email: ${email}
    Teléfono: ${telefono}
    
    Mensaje:
    ${message}
  `,
  html: `
    <h3>Nuevo mensaje de contacto</h3>
    <p><strong>De:</strong> ${nombre} ${apellido}</p>
    <p><strong>Email:</strong> ${email}</p>
    <p><strong>Teléfono:</strong> ${telefono}</p>
    <p><strong>Mensaje:</strong><br/>${message}</p>
  `,
}

Security Best Practices

Never Commit Secrets

Add .env* to .gitignore. Never commit API keys, passwords, or tokens to version control.

Use App Passwords

For Gmail, always use app-specific passwords instead of your main account password.

Rotate Keys Regularly

Periodically regenerate reCAPTCHA keys and email passwords, especially after team changes.

Limit Domain Access

Configure reCAPTCHA to only work on your specific domains to prevent unauthorized use.

Vercel Configuration

For production deployment, add variables in Vercel:

Open Project Settings

Navigate to your project in Vercel → Settings → Environment Variables

Add Each Variable

For each variable:

Enter Key: e.g., EMAIL_USER
Enter Value: e.g., [email protected]
Select environments: Production, Preview, Development
Click Save

Redeploy

After adding all variables:

Go to Deployments tab
Click ··· on latest deployment
Select Redeploy

Or push a new commit to trigger automatic deployment.

Environment variables are encrypted at rest and in transit by Vercel. They are only decrypted during build and runtime.

Troubleshooting

Email not sending

Check:

EMAIL_USER and EMAIL_PASS are correctly set
App password is valid (not regular Gmail password)
SMTP host and port are correct
No firewall blocking port 465/587

Test locally:

npm run dev

Check console for error messages.

reCAPTCHA validation failing

Check:

Both VITE_RECAPTCHA_SITE_KEY and RECAPTCHA_SECRET_KEY are set
Keys match the reCAPTCHA version (v2)
Domain is registered in reCAPTCHA admin
localhost is added for local development

Test in browser console:

console.log(import.meta.env.VITE_RECAPTCHA_SITE_KEY)

Should output the site key (not undefined).

Variables not loading in Vercel

Check:

Variables are set for correct environment (Production/Preview)
Site has been redeployed after adding variables
Variable names match exactly (case-sensitive)
No typos in variable values

View build logs: Go to Vercel deployment → Building → View logs to see if variables are detected.

VITE_ prefix confusion

Rule:

VITE_ prefix = exposed to browser (public)
No prefix = server-side only (secret)

Example:

✅ VITE_RECAPTCHA_SITE_KEY - Safe to expose (public key)
❌ VITE_RECAPTCHA_SECRET_KEY - NEVER expose (private key)
✅ RECAPTCHA_SECRET_KEY - Correct (server-side only)

Example .env File

.env

# Email Configuration
EMAIL_USER=[email protected]
EMAIL_PASS=abcdefghijklmnop

# Optional: Override default recipients
EMAIL_TO=[email protected],[email protected]

# reCAPTCHA Keys
VITE_RECAPTCHA_SITE_KEY=6LdXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
RECAPTCHA_SECRET_KEY=6LdYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

Never commit this file! Add to .gitignore:

.env
.env.local
.env*.local

Get Started

Components

Guides

Overview

Required Variables

EMAIL_USER

EMAIL_PASS

VITE_RECAPTCHA_SITE_KEY

RECAPTCHA_SECRET_KEY

Optional Variables

EMAIL_TO

EMAIL_CC

Setup Guides

Gmail App Password Setup

reCAPTCHA Key Setup

Email Configuration Details

SMTP Configuration

Email Template

Security Best Practices

Never Commit Secrets

Use App Passwords

Rotate Keys Regularly

Limit Domain Access

Vercel Configuration

Troubleshooting

Example .env File

Next Steps

Deployment Guide

Contact Component

Build docs developers (and LLMs) love

Get Started

Components

Guides

​Overview

​Required Variables

​EMAIL_USER

​EMAIL_PASS

​VITE_RECAPTCHA_SITE_KEY

​RECAPTCHA_SECRET_KEY

​Optional Variables

​EMAIL_TO

​EMAIL_CC

​Setup Guides

​Gmail App Password Setup

​reCAPTCHA Key Setup

​Email Configuration Details

​SMTP Configuration

​Email Template

​Security Best Practices

Never Commit Secrets

Use App Passwords

Rotate Keys Regularly

Limit Domain Access

​Vercel Configuration

​Troubleshooting

​Example .env File

​Next Steps

Deployment Guide

Contact Component

Build docs developers (and LLMs) love

Overview

Required Variables

EMAIL_USER

EMAIL_PASS

VITE_RECAPTCHA_SITE_KEY

RECAPTCHA_SECRET_KEY

Optional Variables

EMAIL_TO

EMAIL_CC

Setup Guides

Gmail App Password Setup

reCAPTCHA Key Setup

Email Configuration Details

SMTP Configuration

Email Template

Security Best Practices

Vercel Configuration

Troubleshooting

Example .env File

Next Steps