Skip to main content

Firebase Setup

From SCRUM-8: Create Firebase project

My Learning Notes​

Firebase: BaaS (Backend as a Service), runs on Google Cloud, has JSON database that provides applications with data in real-time. It also has authentication service and provides REST endpoints for its database.

Authentication Flow​

  1. Collect user input
  2. Call SDK methods to send to Firebase servers for validation
  3. Firebase sends back JWT token
  4. Token saved in header of each subsequent request

Firestore​

  • Data storage service
  • Document/collection model
  • SDK methods: addDoc, getDoc, etc.

What is Firebase?​

Firebase is a Backend-as-a-Service (BaaS) platform by Google. It provides:

  • Authentication (Google, email, etc.)
  • Firestore (NoSQL database)
  • Hosting
  • Cloud Functions
  • And more...
Important Distinction

Firebase has two databases:

  • Realtime Database (older)
  • Firestore (newer) - this is what VocabPal uses

Why Firebase for VocabPal?​

  1. No server needed - Backend is managed for you
  2. Real-time sync - Changes sync instantly across devices
  3. Easy auth - Google sign-in with a few lines of code
  4. Free tier - Generous free usage for learning

Setting Up Firebase​

1. Create Project​

  1. Go to Firebase Console
  2. Click "Add Project"
  3. Name it (e.g., "vocabpal-learning")
  4. Disable Google Analytics (optional for learning)

2. Enable Authentication​

  1. Firebase Console → Authentication → Sign-in method
  2. Enable Google provider

3. Create Firestore Database​

  1. Firebase Console → Firestore Database
  2. Create database
  3. Start in test mode (for development)

4. Register Web App​

  1. Click the web icon </>
  2. Register app name
  3. Copy the config object
  4. Save config values to .env file

5. Initialize in Code​

// shared/src/services/config.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

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

The import.meta.env TypeScript Error​

When using Vite with TypeScript, you'll get an error on import.meta.env because TypeScript doesn't know about Vite's environment variables.

Solution: Create a type declaration file:

// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_FIREBASE_API_KEY: string;
  readonly VITE_FIREBASE_AUTH_DOMAIN: string;
  readonly VITE_FIREBASE_PROJECT_ID: string;
  readonly VITE_FIREBASE_STORAGE_BUCKET: string;
  readonly VITE_FIREBASE_MESSAGING_SENDER_ID: string;
  readonly VITE_FIREBASE_APP_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
From Code Review

When TypeScript gives you errors about something that "should work", it often means you need a type declaration file (.d.ts). Google "[thing] typescript types" to find solutions.

Security Note​

Never commit Firebase config to public repos! Use environment variables:

# .env (add to .gitignore!)
VITE_FIREBASE_API_KEY=AIza...
VITE_FIREBASE_AUTH_DOMAIN=vocabpal-learning.firebaseapp.com
# ... etc

Code Review Feedback​

Katie Nguyen (2026-02-03):

**[Code Review Feedback] **Great summary! You nailed the key concepts: Firebase as BaaS on Google Cloud, authentication flow with JWT tokens, and Firestore document/collection model with SDK methods (addDoc, getDoc). One small note: Firebase also has Realtime Database (older) which is different from Firestore (newer). We are using Firestore for VocabPal. Approved!

Key Takeaways​

  • Firebase = BaaS on Google Cloud
  • Auth uses JWT tokens
  • Firestore uses document/collection model
  • Use .env for config values (security!)
  • Create vite-env.d.ts to fix TypeScript errors