👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page

Client side Jump to heading

Initialise the app like so:

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

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


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

export { firebase }

Hosting Jump to heading

Functions Jump to heading
Testing 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'


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'

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 = <
>(): firebase.firestore.FirestoreDataConverter<T> => ({
toFirestore: (data: Partial<T>) => data,
fromFirestore: (snap: firebase.firestore.QueryDocumentSnapshot) => 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

* @name firestoreUser
* @param uid {string} e.g. a user's UID
* @returns reference to that user's Firestore document

export const firestoreUser = (uid: string) =>
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) {
.then((doc) => {
if (doc.exists) {
console.log('User Document data:',
setUserInfo( as FirestoreUser)
} else {
// will be undefined in this case
console.log('No such document!')
.catch((error) => {
console.log('Error getting document:', error)
}, [uid])

return userInfo

← Back home