Firebase 101: How to Build and Launch Your First App

By /
firebase projects

In this guide, you’ll build your first Firebase app from scratch, even if you’ve never opened the Firebase Console before. We’ll walk through:

  • Creating your first Firebase project
  • Connecting a Web app
  • Connecting an iOS app
  • Connecting an Android app
  • Adding core features like Authentication and Firestore on each platform

By the end, you’ll have a working setup and a clear mental model of how everything fits together.

Step 0: What You Need Before You Start

You don’t need any backend experience, but you’ll need a few tools:

For all platforms

For Web

  • Node.js + npm (if you’re using a bundler)
  • A basic HTML/JS project folder

For iOS

  • A Mac with Xcode installed
  • Basic familiarity with creating a new Xcode project (Single View App / App template)

For Android

  • Android Studio installed and updated
  • A new or existing Android project (Kotlin or Java)

If that sounds like a lot—don’t worry. We’ll go step by step.

Step 1: Create Your First Firebase Project

This part is the same for Web, iOS, and Android.

  1. Go to the Firebase Console (console.firebase.google.com) and sign in.
  2. Click “Add project”.
  3. Enter a Project name (e.g., MyFirstFirebaseApp).
  4. Choose whether to enable Google Analytics for this project (you can turn it on or off later).
  5. Click Create project and wait for Firebase to provision everything.

Once that’s done, you’ll land on the Project Overview page. This is the “home base” for all your apps and services in that project.Firebase+1

From here, we’ll add platform-specific apps.

Step 2A: Add Firebase to a Web App

Let’s start with the Web version—great for quick testing and prototypes.

2A.1 Register your web app

  1. In the Firebase Console, on your project’s Overview page, click the </> Web icon.
  2. Enter a nickname for your web app (e.g., web-client).
  3. Click Register app.Firebase

Firebase will show you a code snippet with your app’s configuration (the firebaseConfig object).

2A.2 Install Firebase in your project

If you’re using a bundler (recommended):

npm install firebase

In your main JS file:

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

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

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

Now you can import auth and db anywhere in your app.

If you’re not using npm yet, you can also include Firebase via <script> tags (the console will show you that option), but the modular approach above is the modern default.

Step 2B: Add Firebase to an iOS App (Swift)

Now let’s connect an iOS app.

2B.1 Create your Xcode project

  1. Open Xcode → File > New > Project.
  2. Choose App (or the closest template), click Next.
  3. Enter:
    • Product Name: MyFirstFirebaseApp
    • Team: your Apple ID team
    • Organization Identifier: e.g., com.yourname
  4. Confirm the Bundle Identifier (e.g., com.yourname.MyFirstFirebaseApp) – you’ll need this in Firebase.

2B.2 Add your iOS app in Firebase

  1. In the Firebase Console, on your project’s Overview page, click the iOS () icon.
  2. Enter the Bundle ID that matches exactly what Xcode shows (case-sensitive).Firebase+1
  3. (Optional) Add an app nickname.
  4. Click Register app.

Firebase will then give you a config file:

  • Download GoogleService-Info.plist.
  • Drag it into your Xcode project (into the root of your app target). Make sure “Add to all targets” is checked.

2B.3 Install the Firebase SDK (Swift Package Manager)

Firebase now recommends Swift Package Manager (SPM) for new iOS projects.Firebase+1

  1. In Xcode, go to File > Add Packages…
  2. In the URL field, paste: https://github.com/firebase/firebase-ios-sdk.git
  3. Pick the latest version.
  4. Choose the products you want, e.g.:
    • FirebaseAuth
    • FirebaseFirestore
    • FirebaseAnalytics (optional)
  5. Finish the wizard and let Xcode resolve dependencies.

2B.4 Initialize Firebase in your app

Open your AppDelegate (for UIKit) or the new style entry point.

UIKit example (AppDelegate.swift):

import UIKit
import FirebaseCore

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        FirebaseApp.configure()
        return true
    }
}

That’s it—your iOS app is now connected to Firebase.

Step 2C: Add Firebase to an Android App

Finally, let’s wire up Android.

2C.1 Create or open your Android project

  1. Open Android Studio.
  2. Create a new project (Empty Activity is fine) or open an existing one.
  3. Make sure you’re on a recent Android Studio version.Firebase+1

2C.2 Register your Android app in Firebase

  1. In the Firebase Console, click the Android icon.
  2. Enter your Android package name (from app/build.gradle – e.g., com.example.myfirstfirebaseapp).Firebase+1
  3. (Optional) Add a nickname and SHA-1 (you can add SHA-1 later if you’re just testing).
  4. Click Register app.

Download the google-services.json file and:

  • Move it into your Android project under app/ (module) folder.

2C.3 Add the Firebase Gradle plugins and dependencies

In your project-level build.gradle or settings.gradle, ensure you have the Google services classpath or plugin applied (Android Studio usually helps here).

In your app-level build.gradle (app/build.gradle):

plugins {
    id "com.android.application"
    id "com.google.gms.google-services"
}

dependencies {
    // Firebase Bill of Materials (BoM)
    implementation platform("com.google.firebase:firebase-bom:34.6.0")

    // Individual products
    implementation "com.google.firebase:firebase-auth"
    implementation "com.google.firebase:firebase-firestore"
}

Sync Gradle. Your Android app is now connected to Firebase.

Step 3: Add Authentication (Web, iOS, Android)

Now that all three platforms are connected, let’s add email/password Authentication.

In the Firebase Console:
Go to Build > Authentication > Sign-in method and enable Email/Password.

Web: Email/Password Auth

// auth-example.js
import { auth } from "./firebase";
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

export async function signUp(email, password) {
  await createUserWithEmailAndPassword(auth, email, password);
}

export async function signIn(email, password) {
  await signInWithEmailAndPassword(auth, email, password);
}

iOS (Swift)

import FirebaseAuth

func signIn(email: String, password: String) {
    Auth.auth().signIn(withEmail: email, password: password) { result, error in
        if let error = error {
            print("Auth error: \(error.localizedDescription)")
        } else if let user = result?.user {
            print("Signed in as \(user.uid)")
        }
    }
}

Android (Kotlin)

import com.google.firebase.auth.FirebaseAuth

private val auth: FirebaseAuth = FirebaseAuth.getInstance()

fun signIn(email: String, password: String) {
    auth.signInWithEmailAndPassword(email, password)
        .addOnCompleteListener { task ->
            if (task.isSuccessful) {
                val user = auth.currentUser
                println("Signed in as ${user?.uid}")
            } else {
                println("Auth error: ${task.exception?.message}")
            }
        }
}

You now have a basic login flow on all three platforms.

Step 4: Add Firestore as Your App Database

Next, we’ll use Cloud Firestore as a simple “users” collection.

In the Firebase Console:
Go to Build > Firestore Database > Create database.
Choose a location and start in test mode if you’re just experimenting (but don’t leave it that way in production).Firebase

Web: Save and read a document

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

export async function saveUser(userId, name) {
  await setDoc(doc(db, "users", userId), {
    name,
    createdAt: new Date()
  });
}

export async function getUser(userId) {
  const snapshot = await getDoc(doc(db, "users", userId));
  return snapshot.data();
}

iOS (Swift)

import FirebaseFirestore

let db = Firestore.firestore()

func saveUser(userId: String, name: String) {
    db.collection("users").document(userId).setData([
        "name": name,
        "createdAt": Timestamp(date: Date())
    ]) { error in
        if let error = error {
            print("Error writing document: \(error)")
        } else {
            print("User saved")
        }
    }
}

Android (Kotlin)

import com.google.firebase.firestore.FirebaseFirestore

private val db = FirebaseFirestore.getInstance()

fun saveUser(userId: String, name: String) {
    val user = hashMapOf(
        "name" to name,
        "createdAt" to System.currentTimeMillis()
    )

    db.collection("users").document(userId)
        .set(user)
        .addOnSuccessListener { println("User saved") }
        .addOnFailureListener { e -> println("Error writing document: $e") }
}

Step 5: Real-Time Updates with Firestore

One of Firebase’s biggest superpowers is real-time updates.

Web: Real-time listener

import { db } from "./firebase";
import { collection, onSnapshot } from "firebase/firestore";

export function subscribeToMessages(callback) {
  const messagesRef = collection(db, "messages");
  return onSnapshot(messagesRef, snapshot => {
    const messages = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    callback(messages);
  });
}

iOS (Swift)

db.collection("messages").addSnapshotListener { snapshot, error in
    guard let snapshot = snapshot else { return }
    let docs = snapshot.documents
    print("Received \(docs.count) messages")
}

Android (Kotlin)

db.collection("messages")
    .addSnapshotListener { snapshot, e ->
        if (e != null) {
            println("Listen failed: $e")
            return@addSnapshotListener
        }

        if (snapshot != null) {
            println("Received ${snapshot.documents.size} messages")
        }
    }

Now your app reacts live when someone writes to messages—no manual refresh needed.

Step 6: Monitor Usage with Firebase Analytics

Once your app has real users, Analytics becomes crucial. Firebase Analytics works across Web, iOS, and Android and powers funnels, audiences, and more.Firebase+1

Typical pattern on each platform:

  • Initialize Analytics (often part of the standard SDK setup).
  • Log events like login, signup, purchase, or screen_view.
  • Use the Firebase Console to inspect funnels, retention, and active users.

You can later plug those insights straight into how you prioritize features and fixes.

Where to Go Next

You just:

  • Created your first Firebase project
  • Connected Web, iOS, and Android apps
  • Added Authentication
  • Used Firestore as a database
  • Wired up real-time updates

From here, you can start layering on more advanced Firebase features:

  • Cloud Functions for serverless logic
  • Cloud Storage for file uploads
  • Cloud Messaging for push notifications
  • Remote Config and A/B Testing for controlled experiments

If you’re ready to go deeper:

  • Learn more about secure authentication in our Auth deep-dive (link this to your internal post).
  • Use our detailed guide on Firestore data modeling for scalable apps.
  • Contact our team if you want help designing real-time features or on-call workflows.
  • Visit our homepage for more Firebase tutorials and tools tailored to mobile developers.

Related Posts

Scroll to Top