Firebase Setup

Firebase Setup

This guide walks you through setting up Firebase for your project. This step is only necessary when you're ready to deploy your experiment or want to test with the actual Firestore database instead of the mock database.

Creating a Firebase Project

1. Go to the Firebase Console
2. Click "Add project"
3. Enter a project name for your experiment
4. Choose whether to enable Google Analytics (optional)
5. Click "Create project"

Setting Up Firestore Database

1. In the Firebase Console:
   • Click on "Build" in the left sidebar
   • Select "Firestore Database"
   • Click "Create Database"
2. Choose security rules:
   • Select "Start in production mode" (we'll update the rules later)
3. Choose database location:
   • Select the region closest to your participants
   • Click "Enable"

Enabling Authentication

1. In the Firebase Console:
   • Go to "Build" > "Authentication"
   • Click "Get Started"
2. Enable Anonymous authentication:
   • Click on the "Anonymous" provider
   • Toggle the switch to "Enable"
   • Click "Save"

Getting Firebase Web Credentials

1. Register your web application:

   • Go to Project Settings (gear icon in the top left)
   • In the "Your apps" section, click the web icon (</>)
   • Enter a nickname for your app (e.g., "My Experiment")
   • Check "Also set up Firebase Hosting"
   • Click "Register app"

2. Copy the Firebase configuration:

   • You'll see a configuration object that looks like:

   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',
     measurementId: 'your-measurement-id', // if you enabled Analytics
   }

   • Copy this configuration

3. Update your project credentials:

   • Open hosting/src/creds.ts in your project
   • Replace the firebaseCred object with your copied configuration
   • The file should look like:

   import type { FirebaseOptions } from 'firebase/app'
   
   export const firebaseCred: FirebaseOptions = {
     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',
     measurementId: 'your-measurement-id', // if you enabled Analytics
   }
   
   export const prolificCompletionCode: string = 'REPLACE-WITH-YOURS'

Setting Up Firestore Rules

The template comes with Firestore security rules already configured in firestore.rules. These rules control access to your database.

1. Review the default rules in 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 to Firebase:

   yarn deploy-rules

Initializing Firebase Tools

1. Login to Firebase CLI:

   yarn firebase login

2. Initialize Firebase in your project:

   yarn firebase init

   • Select "Firestore" and "Hosting" features
   • Choose your project from the list
   • Accept the default Firestore rules file (firestore.rules)
   • Accept the default Firestore indexes file (firestore.indexes.json)
   • For hosting, use the default "hosting" directory for your public files
   • Answer "Yes" when asked if you want to configure as a single-page app

Testing Firebase Setup

1. Continue using the mock database for local development:

   • Keep simulateMockDatabase = true in appConfig.ts
   • This uses the mock database adapter, which mimics Firestore functionality

2. To test with the real Firestore database (optional):

   • Change simulateMockDatabase = false in appConfig.ts
   • Start your development server: yarn dev
   • Verify that data is being saved to Firestore by checking the Firebase Console

Next Steps

• Continue development with yarn dev
• When you're ready to deploy, follow the Deployment Guide
• Set up Prolific integration using the Data Collection guide