Firebase Setup

Firebase Setup

Warning

This section is under construction. Some of this information is out of date with the latest release of the template. Use with caution.

This guide walks you through setting up Firebase for your project.

Creating a Firebase Project

1. Go to Firebase Console
2. Click "Add project"
3. Enter your project name
   • For this example, we'll use my-experiment
4. Optional: Enable Google Analytics
   • Not required for this template
5. Click "Create project"

Setting Up Firestore

1. In Firebase Console:
   • Click on "Cloud Firestore"
   • Click "Create Database"
2. Choose security rules:
   • Select "Start in production mode"
3. Choose database location:
   • Select the region closest to your participants
   • Click "Enable"

Enabling Authentication

1. In Firebase Console:
   • Go to "Authentication"
   • Click "Get Started"
2. Enable Anonymous auth:
   • Click on "Anonymous" provider
   • Toggle to "Enable"
   • Click "Save"

Firebase Configuration

1. Get your web credentials:

   • Go to Project Settings (gear icon)
   • Click web icon (</>)
   • Register your app with a nickname
   • Enable Firebase Hosting

2. Create configuration file:

   • Create src/firebaseConfig.ts
   • Add this code:

export const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-domain",
  projectId: "your-project-id",
  storageBucket: "your-bucket",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

Deploying Firestore Rules

1. Update firestore.rules:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /sharedData/** {
        allow read: if true;
        allow write: if request.auth.uid == uid;
    }
    match /expData/{uid} {
        allow read: if true;
        allow write: if request.auth.uid == uid;
    }
    match /userData/{uid} {
        allow read: if true;
        allow write: if request.auth.uid == uid;
    }
  }
}

2. Deploy the rules:

yarn deploy-rules

Testing Firebase Setup

1. Start development server:

yarn dev

2. Open browser console
3. Click "init data" button
4. Verify data appears in Firestore

Next Steps

• Continue to Development Workflow
• Learn about Data Collection