Skip to main content
StockPro uses Firebase as its backend infrastructure, providing authentication and real-time database capabilities. This guide walks through the complete Firebase setup process.

​
Prerequisites

Before starting, ensure you have:
  • A Google account
  • Node.js installed (for local development)
  • Basic understanding of Firebase services

​
Create a Firebase Project

1

Navigate to Firebase Console

Go to Firebase Console and sign in with your Google account.
2

Create New Project

Click Add Project and enter your project name (e.g., “stockpro-production”).
Choose a descriptive project name that indicates the environment (production, staging, development).
3

Configure Google Analytics

You can optionally enable Google Analytics for your project. This is useful for tracking user behavior and app performance.For most inventory management systems, analytics can be disabled unless you need detailed usage metrics.
4

Create Project

Click Create Project and wait for Firebase to provision your project resources.

​
Enable Firebase Services

​
Enable Authentication

1

Navigate to Authentication

In your Firebase project console, click Authentication in the left sidebar.
2

Get Started

Click Get started to initialize Firebase Authentication.
3

Enable Email/Password Sign-in

  1. Click on the Sign-in method tab
  2. Click on Email/Password provider
  3. Enable the Email/Password toggle
  4. Click Save
StockPro uses email/password authentication as implemented in public/js/login.js:36
4

Add First User (Optional)

Navigate to the Users tab and click Add user to create your first admin account manually.

​
Enable Firestore Database

1

Navigate to Firestore

In your Firebase project console, click Firestore Database in the left sidebar.
2

Create Database

Click Create database to initialize Cloud Firestore.
3

Select Security Rules Mode

Choose Start in production mode for now. We’ll configure proper security rules later.
Production mode denies all reads and writes by default. You must configure security rules before your app can access Firestore.
4

Choose Location

Select a Cloud Firestore location closest to your users. This cannot be changed later.Recommended locations:
  • us-central1 - United States (Iowa)
  • europe-west1 - Belgium
  • asia-south1 - Mumbai

​
Get Firebase Configuration

1

Register Web App

  1. In the Firebase Console, click the Project Overview gear icon
  2. Select Project settings
  3. Scroll down to Your apps section
  4. Click the web icon </> to register a web app
  5. Enter an app nickname (e.g., “StockPro Web App”)
  6. Check Also set up Firebase Hosting if you plan to use Firebase Hosting
  7. Click Register app
2

Copy Configuration Object

Firebase will display your app’s configuration object. It should look like this:
const firebaseConfig = {
  apiKey: "AIza...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.firebasestorage.app",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123",
  measurementId: "G-XXXXXXXXXX"
};
Keep these credentials secure! While the apiKey is safe to expose in client-side code, you should still implement proper security rules.

​
Configure StockPro

​
Update Firebase Configuration

Replace the configuration in public/js/firebase.js with your project’s credentials: 
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.firebasestorage.app",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

​
Configuration Object Explained

FieldDescriptionSecurity Level
apiKeyIdentifies your Firebase project to Google serversPublic (safe in client code)
authDomainDomain used for authentication redirectsPublic
projectIdUnique identifier for your Firebase projectPublic
storageBucketCloud Storage bucket for file uploadsPublic
messagingSenderIdUsed for Firebase Cloud MessagingPublic
appIdUnique identifier for your Firebase appPublic
measurementIdGoogle Analytics measurement IDPublic
Firebase security is enforced through Security Rules, not by hiding configuration values. All these values are safe to expose in client-side code.

​
Security Best Practices

​
Use Environment-Specific Projects

Create separate Firebase projects for each environment: 
Project ID: stockpro-dev
AuthDomain: stockpro-dev.firebaseapp.com

​
Implement Security Rules

Never deploy to production without proper security rules!Default Firebase projects allow either all access or no access. You must configure security rules to protect user data. See the Security Rules guide for details.

​
API Key Restrictions (Optional)

While Firebase API keys are designed to be public, you can add restrictions:
1

Navigate to Google Cloud Console

Go to Google Cloud Console
2

Select Your Project

Choose the Firebase project from the dropdown
3

Navigate to Credentials

Click APIs & Services → Credentials
4

Restrict API Key

Find your browser key and add restrictions:
  • Application restrictions: HTTP referrers
  • Add your domain: https://yourdomain.com/*
  • API restrictions: Select specific APIs (Firestore, Authentication)

​
Verify Installation

Test your Firebase configuration: 
// Open browser console on your login page
console.log('Firebase initialized:', firebase.apps.length > 0);
console.log('Auth instance:', auth);
console.log('Firestore instance:', db);
If you see no errors, Firebase is properly configured!

​
Next Steps

Security Rules

Configure Firestore security rules to protect your data

Deployment

Deploy StockPro to production hosting

​
Troubleshooting

​
”Firebase: Error (auth/invalid-api-key)”

Cause: The API key in your configuration is incorrect. Solution: Double-check that you copied the correct apiKey from Firebase Console.

​
”Missing or insufficient permissions”

Cause: Firestore security rules are blocking access. Solution: Configure proper security rules. See Security Rules.

​
”Firebase: Error (auth/unauthorized-domain)”

Cause: Your hosting domain is not authorized in Firebase. Solution:
  1. Go to Firebase Console → Authentication → Settings
  2. Scroll to Authorized domains
  3. Add your deployment domain (e.g., yourdomain.com)

​
Authentication State Not Persisting

Cause: Browser blocking cookies or localStorage. Solution: Check browser settings and ensure cookies/localStorage are enabled for your domain.

Build docs developers (and LLMs) love

Get started for freeTalk to us