Firebase

Client side Jump to heading

Initialise the app like so:

https://firebase.google.com/docs/web/setup#default-hosting-site

// firebase.ts
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/functions'

const FIREBASE_CONFIG = {
  apiKey: '{api key}',
  authDomain: '{authDomain}',
  databaseURL: '{databaseURL}',
  projectId: '{app name}',
  storageBucket: '{storageBucket}',
  messagingSenderId: '{messagingSenderId}',
  appId: '{appId}',
  measurementId: '{measurementId}',
}

firebase.initializeApp(FIREBASE_CONFIG)

export const auth = firebase.auth()
export const firestore = firebase.firestore()
export const functions = firebase.app().functions('europe-west2') // set the region globally

export { firebase }

    

Hosting Jump to heading

https://firebase.google.com/docs/hosting/full-config

Functions Jump to heading

https://firebase.google.com/docs/hosting/functions#direct_hosting_requests_to_your_function
https://github.com/firebase/functions-samples/issues/395#issuecomment-635445763
https://firebase.google.com/docs/functions/callable
Testing functions: https://firebase.google.com/docs/functions/local-shell#invoke_https_callable_functions

Firestore Jump to heading

Various Firestore helpers and utils to make our lives easier

Firestore helpers Jump to heading

firestoreDataPoint Jump to heading

This helper function exposes a ‘typed’ version of firestore().collection(collectionPath). Pass it a collectionPath string as the path to the collection in firestore. Pass it a type argument representing the ‘type’ (schema) of the docs in the collection

import { firestoreDataPoint } from './utils'

firestoreDataPoint<FirestoreUser>('users')

    

Document helpers Jump to heading

firestoreUser Jump to heading

Returns reference to that user’s Firestore document. Can then be used to .get() or .set() data for that document.

This uses firestoreDataPoint internally

import { firestoreUser } from './utils'

firestoreUser('xyz123').get()

    

import { firebase, firestore } from '../../config'
import { FirestoreUser } from '../../types/firestore.models'

/**
 * @name firestoreConverter
 * @description This helper function pipes your types through a firestore converter
 */
export const firestoreConverter = <
  T
>(): firebase.firestore.FirestoreDataConverter<T> => ({
  toFirestore: (data: Partial<T>) => data,
  fromFirestore: (snap: firebase.firestore.QueryDocumentSnapshot) =>
    snap.data() as T,
})

/**
 * @name firestoreDataPoint
 * @param collectionPath e.g. 'users'
 * @description This helper function exposes a 'typed' version of firestore().collection(collectionPath)
 * Pass it a collectionPath string as the path to the collection in firestore
 * Pass it a type argument representing the 'type' (schema) of the docs in the collection
 */
export const firestoreDataPoint = <T>(
  collectionPath: string
): firebase.firestore.CollectionReference => {
  return firestore
    .collection(collectionPath)
    .withConverter(firestoreConverter<T>())
}

/**
 * @name firestoreUser
 * @param uid {string} e.g. a user's UID
 * @returns reference to that user's Firestore document
 */
export const firestoreUser = (uid: string) =>
  firestoreDataPoint<FirestoreUser>('users').doc(uid)

    

import { useEffect, useState } from 'react'
import { useUserContext } from '../providers'
import { FirestoreUser } from '../types/firestore.models'
import { firestoreUser } from '../utils'

/**
 * @name useFirestoreUserData
 * @description Returns all user data from Firestore
 */
export const useFirestoreUserData = (): FirestoreUser | undefined => {
  const { uid } = useUserContext()
  const [userInfo, setUserInfo] = useState<FirestoreUser | undefined>()

  useEffect(() => {
    if (uid) {
      firestoreUser(uid)
        .get()
        .then((doc) => {
          if (doc.exists) {
            console.log('User Document data:', doc.data())
            setUserInfo(doc.data() as FirestoreUser)
          } else {
            // doc.data() will be undefined in this case
            console.log('No such document!')
          }
        })
        .catch((error) => {
          console.log('Error getting document:', error)
        })
    }
  }, [uid])

  return userInfo
}