Next Firebase Config

A reusable Firebase configuration package for Next.js applications with environment variable support.

Installation

npm install next-firebase-config firebase

Setup

1. Environment Variables

Create a .env.local file in your Next.js project root and add your Firebase configuration:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key_here
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

2. Usage

Option 1: Default Export (Automatic Initialization)

// firebase.ts
import { auth, db, storage, app } from 'next-firebase-config';

export { auth, db, storage, app };

Option 2: Manual Initialization

// firebase.ts
import { initializeFirebase } from 'next-firebase-config';

const { auth, db, storage, app } = initializeFirebase();

export { auth, db, storage, app };

Option 3: Custom Configuration

// firebase.ts
import { initializeFirebase, FirebaseConfig } from 'next-firebase-config';

const customConfig: FirebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-domain.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-bucket.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id",
  measurementId: "your-measurement-id"
};

const { auth, db, storage, app } = initializeFirebase(customConfig);

export { auth, db, storage, app };

Usage in Components

// components/LoginForm.tsx
import { auth } from '../firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

export function LoginForm() {
  const handleLogin = async (email: string, password: string) => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  // ... rest of component
}

// pages/api/users.ts
import { db } from '../../firebase';
import { collection, getDocs } from 'firebase/firestore';

export default async function handler(req, res) {
  try {
    const usersSnapshot = await getDocs(collection(db, 'users'));
    const users = usersSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    res.status(200).json(users);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch users' });
  }
}

API Reference

initializeFirebase(config?: FirebaseConfig): FirebaseServices

Initializes Firebase with the provided configuration or environment variables.

Parameters:

• config (optional): Firebase configuration object

Returns:

• Object containing { app, auth, db, storage }

createConfigFromEnv(): FirebaseConfig

Creates a Firebase configuration object from environment variables.

FirebaseConfig

interface FirebaseConfig {
  apiKey: string;
  authDomain: string;
  projectId: string;
  storageBucket: string;
  messagingSenderId: string;
  appId: string;
  measurementId?: string;
}

FirebaseServices

interface FirebaseServices {
  app: FirebaseApp;
  auth: Auth;
  db: Firestore;
  storage: FirebaseStorage;
}

Error Handling

The package validates required configuration fields and throws descriptive errors for missing values:

try {
  const firebase = initializeFirebase();
} catch (error) {
  console.error('Firebase initialization failed:', error.message);
}

TypeScript Support

This package is written in TypeScript and includes full type definitions. No additional @types packages are needed.

License

MIT