Firebase Summary

Based also on Udemy course Build an app with React, Redux and Firestore from scratch by Neil Cummings

Functions

Setup

npm i -g firebase-tools
firebase logout
firebase login
firebase init
  Choose by space
    Functions: Configure and deploy Cloud Functions
  Press Enter

Deploy

  cd myProject
  firebase deploy --only functions

Restricting API keys

Based on video #213 in the course
1. In firebase in project settings see apiKey and authDomain values.
2. Go to Google developers console
3. Select the project
4. Go to credentials
5. See link to Browser key (auto created by Firebase)
6. Change to HTTP referrers (web site)
7. Press on "Add An Item" button
8. Copy the value of authDomain specified in firestore
9. Paste it as aaa.com/*
10. Click on Save
11. Create a new key for using in development: press on "+ Create Credentials"
12. Call it DevKey and click on Save
13. In the root of the project (at the same level of package.json) create two files:
  - .env.development .env.production
14. Create in each one of the files:
```
      REACT_APP_API_KEY=AIzb....
      REACT_APP_MAPS_KEY=AIzc....
    
```
15. In code access key by
```
      process.env.REACT_APP_API_KEY
    
```
16. In index.html access key by
```
          <script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_MAPS_KEY%&libraries=places">
    
```
17. Build
  npm run build puts production flag during the process.
18. Hosting in Firebase
  - In package.json add additional script for deploy: Add additional script
```
        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          ...
          "deploy": "npm run build && firebase deploy"
        },
      
```
  - npm run build
  - In the terminal in the project folder run
```
        firebase init
      
```
    - Select by space 'Hosting'
    - Specify "build" as public directory
    - Single page app - no
    - Overwrite build/index.html
  - npm run deploy
Authentication
- Firebase User properties:
```
      * Unique ID (uid)
      * Email address
      * Name
      * PhotoURL
    
```
  Firebase cannot add additional properties to the User object directly such as (user's description or Bio or resources). To save those properties Firestore should be used (in addition to the copy of user object from firebase authentication).
Firestore Database design
- Firestore design - design by query. Think what queries will be used!!!
- Firestore queries:
  - Shallow by default - sub collections are not returned automatically
  - To get Users with Photos:
    // db.collection(USERS_COLLECTION).doc(userUid).collection(PHOTOS_COLLECTION);
    - 1 query for user
    - 1 query for photos
  - array_contains
    - We can only query simple array of strings
    - We cannot query an array that contain an object or an array of objects
    - One document (like event document) can be maximum size of one Megabyte
    - Array can be maximum 20000 rows. If you need bigger, add attendees collection to each event
    - Option: save attendees Ids in an array inside the event
    - Firestore is design to scale with millions of documents inside the collection and not thousands of rows inside the single document
Firestore queries
- where
- array-contain

Firestore Compound queries and indexes

Be sure you print error message from firestore (in asyncActionError) in order to press on the link and add required index in DB.

export const getUserEventsQuery = (activeTab, userUid) => {
  const eventsRef = db.collection(EVENTS_COLLECTION);
  const today = new Date();
  switch (activeTab) {
    case 1: // past
      return eventsRef.where("attendeesIds", "array-contains", userUid).where("date", "<=", today).orderBy("date", "desc"); // most recent event first
    case 2: // hosting
      return eventsRef.where("hostUid", "==", userUid).orderBy("date", "desc"); // most recent event first
    default:
      // future
      return eventsRef.where("attendeesIds", "array-contains", userUid).where("date", ">", today).orderBy("date");
  }
};

Firestore Database Rules

Default Rules

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

Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow create: if isSignedIn();
      allow read, update, delete: if request.auth.uid == userId
    }
  }
}

function isSignedIn() {
  return request.auth.uid !=null
}

Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /cars/{docId} {
      allow read: if existingData().myField == true;     
                          <--- important: add in the code db.collection("cars").where('myField', '==', true)
                          <--- important: creation of the index in firestore db is required. Follow the error message in the console
      allow create, write, update, delete: if isSignedIn()
    }
  }
}

function existingData() {
	return resource.data;
}
function isSignedIn() {
  return request.auth.uid !=null
}

Final Rules of some project

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if isSignedIn();
      allow update, create: if request.auth.uid == userId
      match /photos/{document=**} {
      	allow read: if isSignedIn();
        allow write: if request.auth.uid == userId
      }
    }
    match /following/{userId}/{document=**} {
    	allow read: if isSignedIn();
      allow write: if request.auth.uid == userId
      allow  update: if resource.id == request.auth.uid;
    }
    match /events/{document=**} {
    	allow read, list;
      allow create: if isSignedIn(); 
      allow update: if isHost();
      allow update: if isSignedIn() && updateAttendeeFieldsOnly();
    }
  }
}

function isSignedIn() {
	return request.auth.uid !=null
}

function isHost() {
	return isSignedIn() && resource.data.hostUid == request.auth.uid;
}

function updateAttendeeFieldsOnly() {
  return incomingData().diff(existingData()).changedKeys().hasOnly(['attendeesIds', 'attendees'])
}

function existingData() {
	return resource.data;
}

function incomingData() {
	return request.resource.data;
}

Check Authentication

User can read another user's doc if it's authenticated

  rules_version = '2';
  service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {                         <--- userId is a parameter
      allow read: if request.auth.uid !=null        <--- user can read another user's document if they are authenticated
    }
  }
}

More Rules

User can read another user's doc if it's authenticated

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if request.auth.uid !=null
      allow update, create: if request.auth.uid == userId
      match /photos/{document=**} {    <--- photos sub-collection inside users collection under specific user
      	allow read: if request.auth.uid !=null
        allow write: if request.auth.uid == userId   <--- write is for creation, update and deletion
      }
    }    
  }
}

Even More Rules

User can read another user's doc if it's authenticated

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if request.auth.uid !=null
      allow update, create: if request.auth.uid == userId
      match /photos/{document=**} {
      	allow read: if request.auth.uid !=null
        allow write: if request.auth.uid == userId
      }
    }
    match /following/{userId}/{document=**} {
      allow read: if request.auth.uid !=null
      allow write: if request.auth.uid == userId
    }
    match /events/{document=**} {
      allow read, list;
      allow write: if request.auth.uid !=null
    }
  }
}

More Rules...

  ...
  allow update: if request.resource.data...        <--- incoming data that is sent

  ...
  allow update: if resource.data...           <--- existing data

Batches

import firebase from "app/config/firebase";
const db = firebase.firestore();

export const followUser = async (profile) => {
  const user = firebase.auth().currentUser;
  const batch = db.batch();
  try {
    batch.set(db.collection(FOLLOWING_COLLECTION).doc(user.uid).collection(USER_FOLLOWING).doc(profile.id), {
      displayName: profile.displayName,
      photoURL: profile.photoURL,
      uid: profile.id,
    });
    batch.set(db.collection(FOLLOWING_COLLECTION).doc(profile.id).collection(USER_FOLLOWERS).doc(user.uid), {
      displayName: user.displayName,
      photoURL: user.photoURL,
      uid: user.uid,
    });
    batch.update(db.collection(USERS_COLLECTION).doc(user.uid), {
      followingCount: firebase.firestore.FieldValue.increment(1),
    });
    batch.update(db.collection(USERS_COLLECTION).doc(profile.id), {
      followerCount: firebase.firestore.FieldValue.increment(1),
    });
    return await batch.commit()
  } catch (error) {
    console.log(error);
    throw error;
  }
};

export const unfollowUser = async (profile) => {
  const user = firebase.auth().currentUser;
  const batch = db.batch();
  try {
    batch.delete(db.collection(FOLLOWING_COLLECTION).doc(user.uid).collection(USER_FOLLOWING).doc(profile.id));
    batch.delete(db.collection(FOLLOWING_COLLECTION).doc(profile.id).collection(USER_FOLLOWERS).doc(user.uid));
    batch.update(db.collection(USERS_COLLECTION).doc(user.uid), {
      followingCount: firebase.firestore.FieldValue.increment(-1),
    });
    batch.update(db.collection(USERS_COLLECTION).doc(profile.id), {
      followerCount: firebase.firestore.FieldValue.increment(-1),
    });
    return await batch.commit();
  } catch (error) {
    console.log(error);
    throw error;
  }
};

Commands

  export const unfollowUser = async (profile) => {
  const user = firebase.auth().currentUser;
  try {
    await db.collection(FOLLOWING_COLLECTION).doc(user.uid).collection(USER_FOLLOWING).doc(profile.id).delete();
    await db.collection(FOLLOWING_COLLECTION).doc(profile.id).collection(USER_FOLLOWERS).doc(user.uid).delete();
    await db
      .collection(USERS_COLLECTION)
      .doc(user.uid)
      .update({
        followingCount: firebase.firestore.FieldValue.increment(-1),
      });
    return await db
      .collection(USERS_COLLECTION)
      .doc(profile.id)
      .update({
        followerCount: firebase.firestore.FieldValue.increment(-1),
      });
  } catch (error) {
    console.log(error);
    throw error;
  }
};

Connectivity
1. In the React ptoject
```
  npm i firebase
```
2. Go to firebase.google.com
3. Sign in using existed Gmail account
4. Choose from the menu "Go to the console"
5. Choose "Add project"
6. Enter project name
7. Disable Google Analytics if you don't need it
8. Press on "Create project" button and after that press on "Continue" button
9. Click on the "Web icon"
10. Enter name of the app (i.e Ecommerce) and press on Resister App button
11. Copy info between the script tags.
12. In the React project under src create config/firebase.js file:
```
import firebase from "firebase/app";
import 'firebase/firestore';
import 'firebase/database'; // for cheat
import "firebase/auth";
import "firebase/storage";  // for photographs

const firebaseConfig = {
  apiKey: "AIzXYZ",
  authDomain: "rev-XYZ.firebaseapp.com",
  projectId: "rev-XYZ",
  storageBucket: "rev-XYZ.appspot.com",
  messagingSenderId: "13JJJ",
  appId: "1:13ABC",
};

firebase.initializeApp(firebaseConfig);
firebase.firestore();

export default firebase;
```
13. Click on Continue to console button.
14. Choose Cloud Firestore option
15. Press on Create database
16. Select start in test mode
17. Select a location
18. Press on + Start collection
19. Start users collection and set fields
20. In the React project under src create firestore/firestoreService.js file:
```
import firebase from 'config/firebase';

const db = firebase.firestore();

export function getEventsFromFireStore(observer) {
  return db.collection("events").onSnapshot(observer);  // quick way to be sure that things are connected
}
```
Authentication
- In Authentication section in Firebase menu press get started
- In Sign-in method
  - Email/Password
    - Enable the option and Save
    - For testing add user manually by choosing User tab

Firebase Summary

Functions

Restricting API keys

Hosting in Firebase

Authentication

Firestore Database design

Firestore queries

Firestore Compound queries and indexes

Be sure you print error message from firestore (in asyncActionError) in order to press on the link and add required index in DB.

Firestore Database Rules

Default Rules

Rules

Rules

Final Rules of some project

Check Authentication

More Rules

Even More Rules

Batches

Connectivity

Authentication