If you’re building a modern web or mobile application, Firebase can save you a lot of backend development time.

Instead of creating authentication, databases, file storage, hosting, notifications, analytics, and other backend infrastructure completely from scratch, you can use Firebase’s managed services.

But getting started with Firebase can be confusing if you’re seeing terms like Firebase Project, Web App, Firebase SDK, Firestore, Authentication, Firebase CLI, Security Rules, Hosting, and Environment Variables for the first time.

This guide walks you through the complete Firebase setup process step by step, from creating your Firebase project to connecting it with a JavaScript application and preparing it for production.

Updated for 2026: Firebase’s current web documentation recommends the modular JavaScript SDK and generally recommends installing Firebase through npm for production applications.

---

What You Will Learn

By the end of this guide, you will know how to:

• Create a Firebase project
• Register a web application
• Get your Firebase configuration
• Install the Firebase JavaScript SDK
• Initialize Firebase
• Connect Firebase with JavaScript
• Set up Firebase Authentication
• Set up Cloud Firestore
• Understand Firebase Security Rules
• Set up Firebase Storage
• Install Firebase CLI
• Connect your local project to Firebase
• Run Firebase locally
• Deploy your application
• Understand common Firebase errors
• Follow Firebase best practices

---

What Is Firebase?

Firebase is Google’s application development platform that provides managed backend and cloud services.

Instead of building everything yourself, you can use Firebase for services such as:

• Authentication
• Cloud Firestore
• Realtime Database
• Cloud Storage
• Cloud Functions
• Cloud Messaging
• Hosting
• Analytics
• App Check
• Performance Monitoring
• Remote Config
• Firebase AI Logic
• SQL Connect

Firebase’s current web documentation lists these services among the available Firebase web SDK integrations.

A typical application architecture might look like this:

Your Web App
     |
     ↓
Firebase SDK
     |
     ├── Authentication
     ├── Firestore
     ├── Storage
     ├── Functions
     ├── Analytics
     └── Other Firebase Services

---

Before You Start

For this tutorial, we’ll assume you are creating a JavaScript web application.

You should have:

• A Google account
• Basic JavaScript knowledge
• Node.js installed
• npm installed
• A code editor such as VS Code
• A browser such as Chrome

If you’re using React, Next.js, Vue, Angular, or another modern framework, the same Firebase concepts apply, although the project structure may differ.

---

Step 1: Create a Firebase Project

The first step is to create a Firebase project.

Open the official Firebase Console:

Firebase Console

Sign in with your Google account.

After logging in, select:

Create a project

Firebase will ask you to enter a project name.

For example:

My Awesome App

You can choose any meaningful name.

---

Step 2: Choose Your Firebase Project Name

Enter a name for your project.

For example:

Rivexa App

Firebase uses the project name as a display name.

It also creates a unique Project ID.

For example:

rivexa-app-12345

The Project ID is important because it identifies your project across Firebase and Google Cloud.

According to Firebase’s current documentation, you can choose/edit the project ID during project creation, but the project ID cannot be changed after the project is created.

Important

Don’t randomly create multiple projects for the same application.

A common structure is:

Development Project
        ↓
Staging Project
        ↓
Production Project

For a beginner project, however, starting with one Firebase project is completely fine.

---

Step 3: Enable Google Analytics

During project creation, Firebase may offer you the option to enable Google Analytics.

You can enable it if you want analytics functionality.

Analytics can be useful for understanding:

• User engagement
• App usage
• Events
• Conversions
• User behavior

Firebase’s current setup documentation says Google Analytics can also be configured later through the project’s Integrations settings.

For a simple learning project, you can skip Analytics if you don’t need it.

---

Step 4: Create the Firebase Project

Click:

Create project

Firebase will create the project.

Once the setup is complete, you’ll be taken to the Firebase project overview.

You should see your Firebase dashboard.

At this point, you have created the backend project, but your web application isn’t connected yet.

That’s what we’ll do next.

---

Step 5: Add a Web App to Firebase

From the Firebase project overview, look for the platform options.

Select the:

Web icon

This is usually represented by the </> symbol.

Firebase’s official web setup documentation currently instructs developers to register their web application from the project overview using the Web platform option.

---

Step 6: Register Your Web App

Firebase will ask you for an app nickname.

For example:

My Web App

The nickname is mainly for identifying the application inside Firebase.

It does not necessarily need to match your website’s domain name.

For example:

App nickname:
Rivexa Web

Then click:

Register app

---

Step 7: Get Your Firebase Configuration

After registering your web app, Firebase will show you a configuration object.

It looks similar to this:

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"
};

Your actual values will be different.

Don’t Copy This Example Literally

You should always use the configuration generated specifically for your Firebase project.

Firebase’s documentation explains that the configuration object is available from your Firebase project settings and warns against manually modifying required Firebase options such as apiKey, projectId, and appId.

---

Is the Firebase API Key Secret?

This is one of the biggest beginner questions.

Firebase’s web configuration contains values such as:

apiKey
authDomain
projectId
appId

The Firebase web API key is not intended to function as a traditional server secret.

However, that does not mean your Firebase project is automatically secure.

Your actual protection should come from:

• Authentication
• Authorization
• Firestore Security Rules
• Storage Security Rules
• App Check
• Proper backend architecture

Never put private server credentials or Firebase Admin SDK credentials into frontend JavaScript.

---

Step 8: Create Your Local Project

Now let’s create a local JavaScript project.

Open your terminal.

Create a folder:

mkdir firebase-app

Move into it:

cd firebase-app

Initialize npm:

npm init -y

This creates a:

package.json

file.

Your project might now look like:

firebase-app/
└── package.json

---

Step 9: Install Firebase SDK

Now install Firebase:

npm install firebase

This is the current recommended npm-based approach for the modular Firebase JavaScript SDK. Firebase’s official documentation specifically recommends the modular API and says npm is the preferred approach for most production web apps.

After installation, you’ll have:

firebase-app/
├── node_modules/
├── package.json
└── package-lock.json

---

Step 10: Create Your Firebase Configuration File

Create a file such as:

src/firebase.js

Add:

import { initializeApp } from "firebase/app";

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

const app = initializeApp(firebaseConfig);

export default app;

Replace the placeholder values with the configuration from your Firebase Console.

---

Step 11: Understand initializeApp()

This line:

const app = initializeApp(firebaseConfig);

connects your application to your Firebase project.

Think of it like:

Your Application
       ↓
firebaseConfig
       ↓
initializeApp()
       ↓
Your Firebase Project

After Firebase is initialized, you can initialize individual Firebase services.

For example:

const app = initializeApp(firebaseConfig);

Then:

const auth = getAuth(app);

or:

const db = getFirestore(app);

Firebase describes the Firebase App object as a container-like object that holds common configuration and provides access to Firebase services.

---

Step 12: Set Up Firebase Authentication

Now let’s add user authentication.

Install Firebase if you haven’t already:

npm install firebase

Then update your Firebase configuration file:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

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

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

Firebase’s current Authentication documentation uses the modular API with getAuth(app).

---

Step 13: Enable Email/Password Authentication

Go to Firebase Console.

Open:

Authentication

Then select:

Sign-in method

Enable:

Email/Password

Save the configuration.

Now your application can use Firebase Authentication for email/password accounts.

---

Step 14: Create a User

For example:

import {
  createUserWithEmailAndPassword
} from "firebase/auth";

import { auth } from "./firebase";

createUserWithEmailAndPassword(
  auth,
  "user@example.com",
  "StrongPassword123!"
)
  .then((userCredential) => {
    console.log("User created:", userCredential.user);
  })
  .catch((error) => {
    console.error(error);
  });

When successful, Firebase creates the user account.

The user is now registered in Firebase Authentication.

---

Step 15: Log In a User

You can use:

import {
  signInWithEmailAndPassword
} from "firebase/auth";

import { auth } from "./firebase";

signInWithEmailAndPassword(
  auth,
  "user@example.com",
  "StrongPassword123!"
)
  .then((userCredential) => {
    console.log("Logged in:", userCredential.user);
  })
  .catch((error) => {
    console.error(error);
  });

You now have a basic authentication system.

---

Step 16: Set Up Cloud Firestore

Now let’s add a database.

Go to:

Firebase Console → Build → Firestore Database

Click:

Create database

Firebase will ask you to select a database configuration and security rules.

For learning, you can use the development setup provided by the console, but you should configure proper Security Rules before putting a real application into production.

---

Step 17: Initialize Firestore

Update your Firebase configuration:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

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

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);

Now:

auth

represents Firebase Authentication.

And:

db

represents Firestore.

---

Step 18: Add Data to Firestore

Suppose you want to create a user profile.

You can use:

import { doc, setDoc } from "firebase/firestore";
import { db } from "./firebase";

await setDoc(doc(db, "users", "user123"), {
  name: "Rahul",
  email: "user@example.com",
  role: "user"
});

This creates a document inside:

users
   ↓
user123

with fields such as:

name
email
role

Your database structure would look like:

users
 ├── user123
 │    ├── name
 │    ├── email
 │    └── role
 │
 └── user456
      ├── name
      ├── email
      └── role

---

Step 19: Read Data From Firestore

You can retrieve a document using:

import { doc, getDoc } from "firebase/firestore";
import { db } from "./firebase";

const userRef = doc(db, "users", "user123");

const userSnapshot = await getDoc(userRef);

if (userSnapshot.exists()) {
  console.log(userSnapshot.data());
} else {
  console.log("User does not exist");
}

The returned data might look like:

{
  name: "Rahul",
  email: "user@example.com",
  role: "user"
}

---

Step 20: Set Up Firebase Storage

If your application needs to upload:

• Images
• Videos
• PDFs
• Documents
• Profile pictures

you can use Firebase Storage.

Initialize it:

import { getStorage } from "firebase/storage";

export const storage = getStorage(app);

Then you can upload files using Firebase Storage APIs.

For example:

import { ref, uploadBytes } from "firebase/storage";
import { storage } from "./firebase";

const storageRef = ref(storage, "images/profile.jpg");

await uploadBytes(storageRef, file);

---

Step 21: Understand Firebase Security Rules

This is extremely important.

Firebase gives you powerful backend services, but you are responsible for configuring access correctly.

For Firestore, you might have rules such as:

User
 ↓
Authenticated?
 ↓
YES → Allow appropriate access
 ↓
NO → Deny access

Security Rules determine who can read and write your Firebase resources.

Never assume that simply having Firebase Authentication enabled automatically protects your Firestore database.

You need appropriate authorization rules.

---

Step 22: Firebase Local Emulator Suite

For serious development, you should learn about the Firebase Local Emulator Suite.

It allows you to test supported Firebase services locally instead of always working against production resources.

This is particularly useful for testing:

• Authentication
• Firestore
• Realtime Database
• Storage
• Functions
• Security Rules

Firebase’s Authentication documentation specifically recommends the Local Emulator Suite as an option for prototyping and testing authentication flows.

This can help prevent accidentally modifying production data during development.

---

Step 23: Install Firebase CLI

The Firebase CLI is useful for managing Firebase projects from your terminal.

First, make sure Node.js is installed.

Firebase’s current CLI documentation says the Firebase CLI requires Node.js 18 or later.

Then install Firebase CLI:

npm install -g firebase-tools

Check the installation:

firebase --version

---

Step 24: Log In to Firebase CLI

Run:

firebase login

Your browser will open and you’ll be asked to authenticate with your Google account.

After login, test your account:

firebase projects:list

Firebase’s current CLI documentation recommends firebase projects:list as a way to verify that the CLI can access your Firebase projects.

---

Step 25: Initialize Firebase in Your Project

Navigate to your application directory:

cd firebase-app

Then run:

firebase init

Firebase will show you a list of Firebase features.

Depending on your application, you may select options such as:

Firestore
Functions
Hosting
Storage
Emulators

Choose the services you actually need.

---

Step 26: Connect Your Local Project to Firebase

During:

firebase init

Firebase CLI will ask you to select a Firebase project.

Choose the project you created earlier.

This associates your local project directory with the Firebase project.

Firebase’s CLI documentation explains that firebase init establishes a Firebase project directory and creates configuration such as firebase.json.

Your project might now look like:

firebase-app/
│
├── src/
│   └── firebase.js
│
├── node_modules/
├── package.json
├── package-lock.json
├── firebase.json
└── .firebaserc

---

What Is firebase.json?

The:

firebase.json

file contains Firebase project configuration for your local directory.

Depending on what you configure, it can contain settings related to:

• Hosting
• Functions
• Firestore
• Storage
• Emulators

Don’t randomly delete or modify this file unless you understand what the changes do.

---

What Is .firebaserc?

The:

.firebaserc

file can associate your local project with Firebase project IDs.

For example:

{
  "projects": {
    "default": "my-project-id"
  }
}

This helps Firebase CLI know which Firebase project is associated with the local directory.

---

Step 27: Set Up Firebase Hosting

If you want to deploy a web application using Firebase Hosting, run:

firebase init hosting

Firebase will ask you questions such as:

• Which project?
• What directory should be deployed?
• Is this a single-page application?
• Should GitHub integration be configured?

Select the appropriate options for your application.

Firebase’s documentation explains that initialization creates the local Firebase configuration and associates the directory with your Firebase project.

---

Step 28: Build Your Application

If you’re using a framework such as React, you will usually build your application first.

For example:

npm run build

This might create:

dist/

or:

build/

depending on your framework and configuration.

Your Firebase Hosting configuration should point to the correct output directory.

---

Step 29: Deploy to Firebase

Once your project is ready, you can deploy Firebase Hosting using:

firebase deploy

Firebase CLI will upload the configured resources.

After deployment, Firebase will provide a Hosting URL for your application.

Your deployment workflow becomes:

Code
 ↓
npm run build
 ↓
firebase deploy
 ↓
Firebase Hosting
 ↓
Live Website

---

Step 30: Test Your Application

After deployment, open your Firebase Hosting URL.

Test:

• Registration
• Login
• Logout
• Database operations
• File uploads
• Application pages
• Security rules
• Mobile responsiveness
• Error handling

Don’t assume that because deployment succeeded, the application is production-ready.

---

Recommended Firebase Project Structure

A simple JavaScript project might look like:

my-app/
│
├── src/
│   ├── firebase.js
│   ├── auth/
│   │   ├── login.js
│   │   └── register.js
│   │
│   ├── services/
│   │   ├── users.js
│   │   └── products.js
│   │
│   └── components/
│
├── public/
│
├── firebase.json
├── .firebaserc
├── package.json
└── .gitignore

As your project grows, separating Firebase initialization from application logic makes the code easier to maintain.

---

Firebase Configuration Best Practices

Your Firebase configuration should generally be kept in one place.

For example:

src/firebase.js

Then import the initialized services where needed.

Avoid initializing Firebase separately in dozens of files.

A clean approach is:

// firebase.js

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

Then:

import { auth, db } from "./firebase";

---

Should You Use Environment Variables?

For larger projects, environment variables are often useful for managing configuration between environments.

For example:

Development
     ↓
.env.development

Production
     ↓
.env.production

A frontend application may expose some Firebase configuration values to the browser because the Firebase Web SDK needs them.

But environment variables do not magically turn frontend configuration into secrets.

Never place private credentials such as:

Firebase Admin private keys
Service account private keys
Private API secrets

into client-side JavaScript.

Those belong on trusted server-side infrastructure.

---

Firebase Admin SDK vs Firebase Web SDK

This is another important distinction.

Firebase Web SDK

Used by your frontend application.

For example:

import { getAuth } from "firebase/auth";

Firebase Admin SDK

Used by trusted backend environments.

For example:

Node.js server
Cloud Functions
Backend server
Secure server environment

The Admin SDK has privileged access and should never be bundled into a public frontend application.

---

Common Firebase Setup Mistakes

Mistake 1: Using Old Firebase Tutorials

You may find tutorials using code such as:

firebase.initializeApp(config);

Modern Firebase web development generally favors the modular API, for example:

import { initializeApp } from "firebase/app";

const app = initializeApp(firebaseConfig);

Firebase currently recommends the modular API, especially for production applications, because it supports tree-shaking and can reduce unused code in bundles.

---

Mistake 2: Installing Random Firebase Versions

Don’t blindly copy an old tutorial’s version number.

Use the current package installation method:

npm install firebase

Then follow the current Firebase documentation for the APIs you need.

---

Mistake 3: Leaving Firestore Open

A beginner might create Firestore and leave development rules unchanged.

That’s dangerous for a production application.

Always review:

Firestore Rules
Storage Rules
Authentication
Authorization

before launch.

---

Mistake 4: Putting Admin Credentials in Frontend Code

Never do this.

Don’t put a Firebase Admin service account private key into:

React
Vue
Angular
Browser JavaScript
Public GitHub repositories

Admin credentials belong on trusted server-side systems.

---

Mistake 5: Ignoring Firebase Costs

Firebase can be very affordable for small applications, but usage can grow.

Monitor:

• Database reads
• Database writes
• Storage
• Downloads
• Hosting
• Functions
• Other billable resources

Designing efficient database queries is important not only for performance but also for cost control.

---

Mistake 6: Not Testing Security Rules

A Firebase application isn’t secure simply because you created Security Rules.

You should test cases such as:

Unauthenticated user
       ↓
Should access be allowed?

Authenticated User A
       ↓
Can User A access User B's data?

Admin
       ↓
What additional access is allowed?

Security should be tested from the perspective of both legitimate and unauthorized users.

---

Firebase Setup Checklist

Before considering your Firebase setup complete:

• Firebase project created
• Web app registered
• Firebase configuration obtained
• Firebase SDK installed
• Firebase initialized
• Authentication configured
• Firestore configured
• Storage configured if required
• Security Rules reviewed
• Firebase CLI installed
• Firebase CLI authenticated
• Local project initialized
• Hosting configured if required
• Local testing completed
• Production configuration reviewed
• Usage and billing monitored

---

Complete Firebase Setup Flow

The entire process can be summarized as:

Create Firebase Project
        ↓
Register Web App
        ↓
Get Firebase Config
        ↓
Create Local Project
        ↓
Install Firebase SDK
        ↓
initializeApp()
        ↓
Configure Authentication
        ↓
Configure Firestore
        ↓
Configure Storage
        ↓
Configure Security Rules
        ↓
Install Firebase CLI
        ↓
firebase login
        ↓
firebase init
        ↓
Test Locally
        ↓
Build Application
        ↓
firebase deploy
        ↓
Production

---

What’s New in Modern Firebase?

Firebase has continued expanding beyond the traditional combination of Authentication, Firestore, Storage, and Hosting.

Current Firebase web documentation includes services such as Firebase AI Logic and SQL Connect, alongside established services such as Authentication, Firestore, Functions, Messaging, Storage, Performance Monitoring, Realtime Database, and Remote Config.

Firebase AI Logic is the current name for what was formerly called Vertex AI in Firebase, while SQL Connect is the current name associated with what was formerly Firebase Data Connect.

This means Firebase is increasingly becoming more than just a simple backend platform.

It can be part of a broader application stack involving:

Frontend
   ↓
Firebase SDK
   ↓
Authentication
   ↓
Database
   ↓
Storage
   ↓
Serverless Functions
   ↓
AI / Data / Analytics

---

Firebase Setup for React

If you’re using React, the basic setup is very similar.

Install Firebase:

npm install firebase

Create:

src/firebase.js

Then:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

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

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);

Then any React component can import:

import { auth, db } from "./firebase";

This keeps your Firebase setup centralized.

---

Firebase Setup for Next.js

Next.js applications require additional consideration because they can run code on both the server and client.

For client-side Firebase services, keep browser-specific Firebase initialization in an appropriate client-side module.

For privileged server-side operations, use the Firebase Admin SDK in a trusted server environment.

Do not expose Admin credentials to the browser.

If your Next.js application uses SSR or server-side functionality, follow Firebase’s current guidance for server-rendering and FirebaseServerApp where applicable. Firebase’s web setup documentation specifically notes that SSR applications may require additional handling to preserve Firebase configuration and session behavior between server and client rendering.

---

Should You Use Firebase for Your Project?

Firebase is a strong choice when you want:

• Fast development
• Managed backend services
• Easy authentication
• Real-time databases
• Cloud storage
• Serverless functionality
• Mobile application integration
• Easy deployment
• Rapid MVP development

You may want to consider a custom backend or another platform when you need:

• Extremely specialized backend architecture
• Complete infrastructure control
• Highly complex relational data models
• Strong portability requirements
• Custom infrastructure
• Specific database technologies

The correct choice depends on your application’s requirements.

---

Final Conclusion

Setting up Firebase isn’t difficult once you understand the architecture.

The basic process is:

Create a Firebase project → Register your application → Install the Firebase SDK → Initialize Firebase → Enable services → Configure Security Rules → Test → Deploy.

For a modern JavaScript project, the recommended starting point is the modular Firebase SDK installed through npm:

npm install firebase

Then initialize it using:

import { initializeApp } from "firebase/app";

const app = initializeApp(firebaseConfig);

From there, you can add services such as:

Authentication
Firestore
Storage
Functions
Messaging
Analytics
Hosting
AI Logic
SQL Connect

The most important thing to remember is that Firebase makes backend development easier, but it does not eliminate the need for good architecture and security.

If you’re building your first Firebase project, start small:

Authentication
       +
Firestore
       +
Security Rules

Once that works correctly, add Storage, Functions, Hosting, Analytics, notifications, and other services as your application requires them.

Recommended Next Step

After completing this setup, the best next tutorial is:

“Firebase Authentication + Firestore Complete Project: Build Login, Signup & User Dashboard”

That project will take you from basic Firebase configuration to a real-world application with authentication, database operations, protected user data, and security rules.