Firebase Setup Guide¶

ShopSync uses Firebase for authentication, real-time data synchronization, and cloud storage. This guide will walk you through setting up Firebase for your ShopSync development environment.

Overview¶

Firebase services used by ShopSync:

• Firebase Authentication - Google Sign-In, email/password auth
• Cloud Firestore - Real-time database for lists and items
• Firebase Hosting - Web app deployment (optional)
• Cloud Functions - Server-side logic (future feature)

Prerequisites¶

• Google account
• ShopSync source code cloned locally
• Basic understanding of Firebase console

Step 1: Create Firebase Project¶

1. Go to Firebase Console

Visit console.firebase.google.com

1. Create New Project

2. Click Add project

3. Enter project name: ShopSync (or your preferred name)

4. Click Continue

5. Configure Google Analytics (Optional)

6. Toggle Google Analytics on/off based on your preference

7. If enabled, select or create an Analytics account

8. Click Create project

9. Wait for Setup

Firebase will take a few moments to create your project.

Step 2: Enable Authentication¶

1. Navigate to Authentication

   In the Firebase console sidebar, click Authentication.

2. Get Started

   Click Get started button.

3. Enable Sign-in Methods

   Enable the following providers:

   Google Sign-InEmail/Password

   1. Click Google in the providers list
   2. Toggle Enable
   3. Enter project support email
   4. Click Save

   1. Click Email/Password
   2. Toggle Enable
   3. Click Save

4. Configure OAuth Consent Screen (if prompted)

   • Set app name: ShopSync
   • Add support email
   • Save and continue

Step 3: Create Firestore Database¶

1. Navigate to Firestore Database

Click Firestore Database in the sidebar.

1. Create Database

Click Create database.

1. Set Security Rules

Choose Start in test mode for development:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2024, 12, 31);
    }
  }
}

!!! warning "Production Security" Test mode rules allow anyone to read/write your database. Before deploying to production, update with proper security rules (see below).

1. Select Location

Choose a Cloud Firestore location close to your users:

• nam5 (United States)
• eur3 (Europe)
• asia-southeast1 (Singapore)

!!! important "Cannot Change Location" This location cannot be changed later, so choose carefully.

1. Enable Database

Click Enable to create the database.

Step 4: Register Your App¶

Android App¶

1. Add Android App

2. In Project Overview, click the Android icon

3. Register app with package name: com.aadishsamir.shopsync (or your custom package name from android/app/build.gradle)

4. Download google-services.json

5. Download the google-services.json file

6. Move it to: android/app/google-services.json

7. Add Firebase SDK

The ShopSync project already has Firebase dependencies configured. Verify in android/build.gradle:

dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
}

And in android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

1. Add SHA-1 Certificate

For Google Sign-In to work, add your SHA-1 certificate:

# Debug certificate
keytool -list -v -alias androiddebugkey \
  -keystore ~/.android/debug.keystore

# Default password: android

Copy the SHA-1 fingerprint and add it in Firebase Console:

• Project Settings → Your apps → Android app
• Click Add fingerprint
• Paste SHA-1
• Click Save

iOS App (Optional)¶

1. Add iOS App

2. Click the iOS icon in Project Overview

3. Register app with bundle ID: com.aadishsamir.shopsync

4. Download GoogleService-Info.plist

5. Download the configuration file

6. Add to: ios/Runner/GoogleService-Info.plist

7. Update Xcode Project

Open ios/Runner.xcworkspace in Xcode and verify the plist is included.

Web App¶

1. Add Web App

2. Click the Web icon < / > in Project Overview

3. Register app with nickname: ShopSync Web

4. Check Also set up Firebase Hosting (optional)

5. Copy Configuration

Firebase will show a JavaScript configuration object. You'll need this for web deployment.

1. Update Firebase Options

The configuration is already set up in lib/firebase_options.dart. If you need to regenerate it:

flutterfire configure

Step 5: Configure FlutterFire CLI (Recommended)¶

The FlutterFire CLI automates Firebase setup:

1. Install FlutterFire CLI

dart pub global activate flutterfire_cli

1. Run Configuration

flutterfire configure

1. Select Options

2. Choose your Firebase project

3. Select platforms (Android, iOS, Web)
4. CLI will update firebase_options.dart

Step 6: Set Up Security Rules¶

For production, use proper Firestore security rules:

Firestore Rules¶

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Helper function to check authentication
    function isSignedIn() {
      return request.auth != null;
    }

    // Helper function to check if user owns the document
    function isOwner(userId) {
      return isSignedIn() && request.auth.uid == userId;
    }

    // Users collection
    match /users/{userId} {
      allow read: if isSignedIn();
      allow write: if isOwner(userId);
    }

    // Shopping lists
    match /shoppingLists/{listId} {
      allow read: if isSignedIn() &&
        (resource.data.ownerId == request.auth.uid ||
         request.auth.uid in resource.data.sharedWith);

      allow create: if isSignedIn() &&
        request.resource.data.ownerId == request.auth.uid;

      allow update, delete: if isSignedIn() &&
        resource.data.ownerId == request.auth.uid;

      // Items subcollection
      match /items/{itemId} {
        allow read, write: if isSignedIn() &&
          (get(/databases/$(database)/documents/shoppingLists/$(listId)).data.ownerId == request.auth.uid ||
           request.auth.uid in get(/databases/$(database)/documents/shoppingLists/$(listId)).data.sharedWith);
      }
    }

    // List groups
    match /listGroups/{groupId} {
      allow read, write: if isSignedIn() &&
        resource.data.userId == request.auth.uid;
    }

    // Categories
    match /categories/{categoryId} {
      allow read: if isSignedIn();
      allow write: if isSignedIn() &&
        resource.data.userId == request.auth.uid;
    }

    // Recycle bin
    match /recycleBin/{userId}/items/{itemId} {
      allow read, write: if isOwner(userId);
    }
  }
}

To update rules:

1. Go to Firestore Database → Rules
2. Paste the rules above
3. Click Publish

Storage Rules (if using Cloud Storage)¶

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /user-uploads/{userId}/{allPaths=**} {
      allow read: if request.auth != null;
      allow write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Step 7: Test the Setup¶

1. Run the App

flutter run

1. Test Authentication

2. Launch the app

3. Click Sign in with Google

4. Verify successful sign-in

5. Test Firestore

6. Create a shopping list

7. Add items

8. Check Firebase Console → Firestore Database to see data

9. Check Console Logs

Monitor for any Firebase errors:

flutter logs

Optional: Firebase Emulator Suite¶

For local development without using production Firebase:

1. Install Firebase CLI

npm install -g firebase-tools

1. Login to Firebase

firebase login

1. Initialize Emulators

firebase init emulators

1. Start Emulators

firebase emulators:start

1. Connect App to Emulators

In lib/main.dart, add before initializing Firebase:

if (kDebugMode) {
  await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
  FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
}

Troubleshooting¶

Best Practices¶

Create separate Firebase projects for development, staging, and production environments.

Keep an eye on Firebase usage in the console to avoid exceeding free tier limits.

Regularly export Firestore data for backups: bash gcloud firestore export gs://your-bucket/backups

!!! tip "Secure API Keys" - Never commit Firebase config files to public repositories - Add to .gitignore: google-services.json, GoogleService-Info.plist - Use environment variables for sensitive data

Next Steps¶

• Explore Firebase Integration
• Learn About Security Rules
• Deploy to Firebase Hosting
• Monitor with Firebase Analytics

Your Firebase setup is complete!