Study Sync uses environment variables to configure various services and integrations. This guide covers all required and optional environment variables.
Environment File Setup
Create a .env.local file in the root of your project:
Copy example file
Copy the .env.example file to .env.local:cp .env.example .env.local
Configure variables
Open .env.local and update the placeholder values with your actual credentials.
Verify configuration
Ensure all required variables are set before starting the application.
Never commit .env.local to version control. The .gitignore file should include this file by default.
Frontend Variables (Public)
These variables are prefixed with NEXT_PUBLIC_ and are accessible in the browser.
Application URL
NEXT_PUBLIC_APP_URL=https://thestudysync.vercel.app
http://localhost:3000 (development)
Firebase Client Configuration
Required for Firebase Authentication on the client side. Get these values from Firebase Console > Project Settings > General.
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
ImgBB API Key
NEXT_PUBLIC_IMGBB_API_KEY=your_imgbb_api_key
Backend Variables (Server-side)
These variables are only accessible on the server and should never be exposed to the client.
MongoDB Connection
MONGDB_URI=mongodb+srv://username:[email protected]/database_name?retryWrites=true&w=majority
mongodb+srv://<username>:<password>@<cluster>/<database>?retryWrites=true&w=majority
See MongoDB Configuration for detailed setup instructions.
Firebase Admin SDK
FIREBASE_SERVICE_ACCOUNT_KEY=your_base64_encoded_service_account_key
Linux/Mac
Windows PowerShell
base64 -w 0 serviceAccountKey.json
[Convert]::ToBase64String([System.IO.File]::ReadAllBytes("serviceAccountKey.json"))
YouTube Data API
YOUTUBE_API_KEY=your_youtube_api_key
Gmail SMTP
Description: Gmail credentials for sending notification emails and reminders.
Use an App Password, not your regular Gmail password. App Passwords are more secure and work with 2FA.
Validation
Study Sync validates environment variables at runtime:
Client-side Validation
From src/lib/firebase.js:14-23:
if (typeof window !== "undefined") {
const missingVars = Object.entries(firebaseConfig)
.filter(([key, value]) => !value)
.map(([key]) => key);
if (missingVars.length > 0) {
console.error("Missing Firebase configuration variables:", missingVars);
console.error("Current config:", firebaseConfig);
}
}
Server-side Validation
From src/lib/mongodb.js:8-10:
if (!process.env.MONGODB_URI) {
throw new Error("Please add your MONGODB_URI to .env.local");
}
Environment-specific Configuration
Development
For local development, use .env.local:
NEXT_PUBLIC_APP_URL=http://localhost:3000
# ... other variables
Production
For production deployment (Vercel, etc.), configure environment variables in your hosting platform:
- Vercel: Project Settings > Environment Variables
- Netlify: Site Settings > Build & Deploy > Environment
- Other platforms: Refer to your platform’s documentation
Always use different credentials for development and production environments.
Security Best Practices
- Never commit secrets: Ensure
.env.local is in .gitignore
- Use different keys: Separate credentials for dev and production
- Rotate regularly: Change API keys and passwords periodically
- Limit permissions: Use service accounts with minimal required permissions
- Monitor usage: Track API usage to detect unauthorized access
Troubleshooting
Variables Not Loading
If environment variables aren’t loading:
- Restart your development server after changing
.env.local
- Verify the file is named
.env.local (not .env)
- Check that variables use the correct prefix (
NEXT_PUBLIC_ for client-side)
- Ensure no extra spaces around
= in variable definitions
Firebase Configuration Errors
Check the browser console for validation errors showing which Firebase variables are missing.
MongoDB Connection Failures
Verify your connection string format and ensure your IP address is whitelisted in MongoDB Atlas.