Firebase Setup

Create Firebase Project #

1. Go to Firebase Console
2. Click “Add Project”
3. Enter a project name (e.g., Quick Ecommerce)
4. Follow the steps (disable Google Analytics if not needed)
5. Once created, go to Project Settings

VAPID:
NEXT_PUBLIC_FIREBASE_VAPID_KEY=

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=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=

Add Environment Variables
#

📝 Create a .env.local in your root folder:

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyXXXXXXX
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=XXXXXXX
NEXT_PUBLIC_FIREBASE_APP_ID=XXXXXXX
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=XXXXXXX
NEXT_PUBLIC_FIREBASE_VAPID_KEY=XXXXXXX

🔒 Only use variables with the NEXT_PUBLIC_ prefix to expose to frontend.

Add Firebase Config to Project: #

public/firebase-env.js

Replace the existing content with your Firebase credentials:

// public/firebase-env.js
self.firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID",
};

✅ Important Notes

• Do NOT remove self.firebaseConfig
• Do NOT rename the file
• This file is required for Firebase Service Worker to work properly