Skip to content

Firebase Note

Switch to Firebase#

Hosting .firebaseapp.com works but .web.app fails#

Firebase documentation#

  • @2021-09-29
  • Was trying to set username in the sign up process, then I saw user.updateProfile(profile), in V9 its actually Auth.updateProfile(User,Profile).
  • In the official doc, search result may be V8 but I'm using V9. Check your @firebase package version in package.json and firebase CLI version with firebase -V.
  • [ ] TODO: Make the extension to show disable.

Handle Firebase App Error with React + Webpack#

  • @2021-09-29
  • Core: getAuth() will call a default APP defined by firebase.initializeApp().
  • Error is rendered on yarn start page: Error: Firebase: No Firebase App '[DEFAULT]' has been created.
  • Caused by Webpack chunking(bootstrap). I did import the file with initializeApp(). What should be done is like this answer on SO. But its only needed:
    1. Modularize the initializeApp in one file(initFire for me) and export anything(doesn't have to be app)
    2. Import & Export before first usage of getApp()(methods like getAuth() will call it),
    3. In this way, after Webpack it will still run first. (ES6 export {app} from "./initFire")

Test realtime DB with jest#

  • @2021-10-03
  • Use RD for realtime DB in this chapter
  • Don't forget to add return for async test
  • The set(Ref) will reject on permission deny (not meeting the validation/authorization rules)
  • Use goOffline(Database) to disconnect, in afterAll to avoid the error A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks
  • Import from bundle firebase, not @firebase, it's for supporting firebase for now (found on npm)
  • No need to explicitly create instance in .test.ts, it seems will run all written code(unused var/import) without chunking/bundling

Realtime Database Rules#

  • @2021-10-04
  • Quick guide
  • Full API
  • PATH:In ref(), for the string parameter path, value \PATH\, \PATH, PATH\, PATH are the same.

Error Handling#

Issue on AuthError interface#

  • @2021-10-10
  • "firebase": "^9.1.2" with TypeScript
  • The AuthError with error code AuthErrorCodes.NEED_CONFIRMATION === "auth/account-exists-with-different-credential" has doesn't has AuthError props(appName, email, _tokenResponse) on Official Doc
  • Two files in node_modules\@firebase\: auth\dist\auth-public.d.ts and util\dist\src\errors.d.ts indicate that either the AuthError is not correctly extended, or the AuthError get from signInWithPopup() method is incorrectly structured. I think it is the first one.
  • Created an issue and a PR on Firebase JS Official Repo

Firebase Local Emulator Suite#

  • @2021-10-24
  • Command firebase emulators:start don't have to run on the top level folder (which has subfolder function). Running inside function folder has same effect.
  • To test database, firestore, etc. Needs to configure it in firebase init emulators. Otherwise the cloud function will run with prod env.

Firebase API key security#

  • @2021-10-24

  • The environment variable in .env is not hidden. It's possible to see them in source code. For example: I searched a random firebase based app on awwwards.com and found their API key

    App param of rebirth-from-the-ashes ```JavaScript initializeApp({ apiKey: "AIzaSyBE8OS5wnsgMGoySEgB7ShY8Jog5Z2S*\*\*first-three-capital-letters-in-week-in-spanish", authDomain: "rebirth-from-the-ashes.firebaseapp.com", projectId: "rebirth-from-the-ashes", storageBucket: "rebirth-from-the-ashes.appspot.com", messagingSenderId: "203993697*6!+6", appId: "1:20399369730:web:11099e26c37cdae998011*second-lowercase-letter", measurementId: "G-LT6R02TJK*letter-for-three" }) ```
  • We can see firebase API key in main.*.chunk.js created by CRA.
  • We can restrict the origin websites allowed to use the firebase app in Google Cloud Platform. In this way even knowing API key, there won't be much damage.

Extension for Storage rules#

  • @2021-11-03
  • Used toba.vsfire. File name (for VSC lang detect) *.rule

Fetch storage resource without login#

  • @2021-11-03
  • With Google Cloud Platform - Credentials set to "HTTP referrers" it's still possible to access the storage resource. Answer on SO

Test cloud function locally#