Environment Variables

SaaSStinger Lite uses environment variables to securely configure Firebase for both client-side and server-side operations.

Instead of hardcoding sensitive information into your application, configuration is loaded from environment variables at runtime.

By the end of this guide, you'll have your local development environment configured correctly and understand how these variables are used in production.

What You'll Learn

In this guide you'll learn:

• Why environment variables are important
• How to create your local environment file
• The difference between client and server variables
• What each Firebase variable is used for
• Common mistakes to avoid
• Best practices for production deployments

Before You Begin

Complete the following guides first:

• Installation
• Firebase Setup

You should already have:

• A Firebase project
• Firebase Authentication configured
• Cloud Firestore created
• Firebase Admin SDK credentials

Create Your Environment File

SaaSStinger Lite includes an example environment file.

Copy it into a local environment file.

cp .env.example .env.local

Open .env.local using your preferred editor.

Client-side Environment Variables

These variables are exposed to the browser and are used by the Firebase Client SDK.

NEXT_PUBLIC_FIREBASE_API_KEY=

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=

NEXT_PUBLIC_FIREBASE_PROJECT_ID=

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=

NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=

NEXT_PUBLIC_FIREBASE_APP_ID=

Although these values are public, they should still belong only to your Firebase project.

Variable Reference

NEXT_PUBLIC_FIREBASE_API_KEY

Identifies your Firebase application.

Example:

NEXT_PUBLIC_FIREBASE_API_KEY=AIza...

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN

Specifies the Authentication domain used by Firebase Authentication.

Example:

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=my-project.firebaseapp.com

NEXT_PUBLIC_FIREBASE_PROJECT_ID

Your Firebase project identifier.

Example:

NEXT_PUBLIC_FIREBASE_PROJECT_ID=my-project

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET

Identifies the Firebase Storage bucket associated with your project.

Example:

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=my-project.appspot.com

NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID

Used internally by Firebase services.

Example:

NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789012

NEXT_PUBLIC_FIREBASE_APP_ID

Identifies your registered Firebase application.

Example:

NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abcdef123456

Server-side Environment Variables

These variables are never exposed to the browser.

They are used exclusively by the Firebase Admin SDK.

FIREBASE_PROJECT_ID=

FIREBASE_CLIENT_EMAIL=

FIREBASE_PRIVATE_KEY=

FIREBASE_PROJECT_ID

The Firebase project ID.

Example:

FIREBASE_PROJECT_ID=my-project

FIREBASE_CLIENT_EMAIL

The service account email generated by Firebase.

Example:

FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxxx@my-project.iam.gserviceaccount.com

FIREBASE_PRIVATE_KEY

The private key from your Firebase service account.

Because private keys contain newline characters, ensure they are copied exactly as required by your project configuration.

Never expose this value to the browser or commit it to version control.

Where These Variables Are Used

Client SDK

The client-side variables power:

• User authentication
• Firestore reads
• Firestore writes
• User profile management
• Workspace management
• Team collaboration

Admin SDK

The server-side variables are used for privileged operations that should never run in the browser.

These operations include secure administrative access to Firebase services.

Local Development

Your local environment should contain:

.env.local

This file should remain on your machine and should not be committed to your repository.

Production Environments

When deploying SaaSStinger Lite, configure the same environment variables in your hosting provider.

This ensures your application can connect to Firebase in production without storing secrets in your source code.

Security Best Practices

Follow these recommendations when working with environment variables.

• Never commit .env.local
• Never expose Admin SDK credentials
• Keep service account credentials private
• Rotate credentials if they are ever compromised
• Use separate Firebase projects for development and production

Common Mistakes

Forgetting to Copy .env.example

Always start by copying the provided example file.

cp .env.example .env.local

Editing the Wrong File

Update:

.env.local

Do not edit .env.example.

The example file exists only as a template.

Restarting the Development Server

After changing environment variables, restart the development server.

pnpm dev

Environment variables are loaded when the application starts.

Exposing Admin Credentials

Only variables prefixed with NEXT_PUBLIC_ are intended for client-side use.

Never expose:

• FIREBASE_PROJECT_ID
• FIREBASE_CLIENT_EMAIL
• FIREBASE_PRIVATE_KEY

to the browser.

Verify Your Configuration

Start the development server.

pnpm dev

If everything has been configured correctly:

• Firebase initializes successfully
• Authentication loads
• Firestore connects
• No missing environment variable errors appear

Related Articles

• Firebase Setup
• Authentication
• Firestore Data Model
• Deployment

Next Steps

Your environment is now configured.

Continue with Project Structure to learn how SaaSStinger Lite is organized and where to find the most important parts of the application.