firebase-js-sdk VS reactfire

// public/firebase-messaging-sw.js // Give the service worker access to Firebase Messaging. // Note that you can only use Firebase Messaging here. Other Firebase libraries are not available in the service worker. importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js'); // Initialize the Firebase app in the service worker by passing in your app's Firebase config object. // https://firebase.google.com/docs/web/setup#config-object firebase.initializeApp({ apiKey: 'api-key', authDomain: 'project-id.firebaseapp.com', databaseURL: 'https://project-id.firebaseio.com', projectId: 'project-id', storageBucket: 'project-id.appspot.com', messagingSenderId: 'sender-id', appId: 'app-id', measurementId: 'G-measurement-id', }); // Retrieve an instance of Firebase Messaging so that it can handle background messages. const messaging = firebase.messaging();

// Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIzaSyDs5ConzFDM2yGvweN-sZdAPFAlowyCDhE", authDomain: "reactmoviepp.firebaseapp.com", projectId: "reactmoviepp", storageBucket: "reactmoviepp.appspot.com", messagingSenderId: "719848561957", appId: "1:719848561957:web:254facecfb591921474ecc", }; // Initialize Firebase const app = initializeApp(firebaseConfig); export const auth = getAuth(app);

Before You Begin 🎯 Before you start, there are a few prerequisites you need to take care of: **Add Firebase to Your Project**: If you haven’t done so already, you need to add Firebase to your project. You can follow the steps in this [link](https://firebase.google.com/docs/web/setup) to get started 🎉. **Upgrade to the Blaze Plan**: The JustPass Firebase extension requires the Blaze (pay as you go) plan. If you haven’t upgraded your project yet, you should do so now. **Install or Update the Firebase CLI**: The Firebase CLI allows you to install and manage Firebase extensions from the command line. Make sure you have the latest version installed. **Enable Cloud Storage**: The JustPass Firebase extension requires Cloud Storage to be enabled for your project. You can check if it’s enabled from this [link](https://console.cloud.google.com/apis/api/firestore.googleapis.com/overview). **Find Your Firebase Project ID or Alias**: You will need either your Firebase project ID or a previously configured project alias to install the extension. You can run the appropriate command from your local app directory to find these. **Get Your JustPass Keys**: Go to the JustPass.me Dashboard and copy the following keys. You will need them to configure the extension: — JUSTPASSME_ORGANIZATION_NAME — JUSTPASSME_ID — JUSTPASSME_API_SECRET Step 1: Installing the Extension Once you have taken care of the prerequisites, you can proceed to install the JustPass Firebase extension. Here’s how you do it: **Set up an Empty Extensions Manifest**: Run the following command to set up an empty Extensions manifest: firebase ext:dev:init 2. **Install the Extension**: Run the following command to install the JustPass Firebase extension: firebase ext:install justpassme/firebase-extension --project=Replace \\ with your actual Firebase project ID.` Step 2: Deploying the Extension ✅ After you have installed the JustPass Firebase extension, you can deploy it to your Firebase project by running the following command: firebase deploy — only extensions` You have now successfully added passkeys authentication to your Firebase project using the JustPass Firebase plugin 🎉 ✅. Make sure to keep it safe, as you’ll need it for granting access to users. If you have any questions or run into any issues, feel free to reach out to [email protected] for assistance. Happy coding! 💪

**Add Firebase to Your Project**: If you haven’t done so already, you need to add Firebase to your project. You can follow the steps in this [link](https://firebase.google.com/docs/web/setup) to get started 🎉.

// Import the functions you need from the SDKs you need import { initializeApp, getApp, getApps } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore, gitFireStore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: "twitter-v1-6a0d8.firebaseapp.com", projectId: "twitter-v1-6a0d8", storageBucket: "twitter-v1-6a0d8.appspot.com", messagingSenderId: "334598974996", appId: "1:334598974996:web:a16f62518c1c5af1044101", measurementId: "G-Y5F3Q3QG2X", }; // Initialize Firebase const app = !getApps().length ? initializeApp(firebaseConfig) : getApp(); const db = getFirestore(); const storage = getStorage(); const analytics = getAnalytics(app); export { app, db, storage };

Auth persistence Issue Firebase SDK - https://github.com/firebase/firebase-js-sdk/issues/6050

Connecting to firebase is as simple as copying and pasting the credentials (that Firebase gives you) into your frontend app. Here is a link to the documentation. If you need help, simply make a more detailed post about the issues you are running into.

ReactFire

Are you using Firebase? If not, you probably should. You can call functions (with Auth) from your react app. There's a framework you can use to help: https://github.com/FirebaseExtended/reactfire

I was an early developer at Firebase. I think we made Firebase so easy to use and never spoke on about the technicals that the whole software ecosystem now underestimates the complexity involved. I see various Firebase competitors asserting various "mistakes it makes" without really understanding what it delivers, which is understandable because we never marketed it like that because we spoke only about how it can help you build easier.

The idea that n queries instead of a join is slow is not as true as you would think. Firestore supports streaming and pipelines at its core, and can reuse cache across operations. At the end of the day, the data goes over a narrow network channel. If you can saturate the channel, and don't leave any gaps, what's the performance difference if the data comes from a single query or many that are back-to-back. The data is transferred to the client either way. Both Firebase databases are pipelined, so this "many round trip" argument is not a decent argument if the client can issue the queries without waiting for responses (such as the code in this article).

The other is consistency levels and correctness. I constantly see devs call Firebase an eventually consistent database which is wrong, its causally consistent [1], and this makes a huge difference when trying to do OLTP. The offline capabilities are built on the consistency primitives, and it's the only way it can work. So while this convex article is banging on about "End-to-End Correctness Philosophy", they miss the most important quality of correctness, and if they are not careful, will miss the required engineering, and then be unable to deliver an offline cache over real-time streams. I see this playing out with Supabase, I warned them personally before they got into YCombinator that what they were building was not causally consistent. Since then, they have had to rearchitect their real-time features after shipping them. (I have not reviewed their latest design yet so I have no idea whether they have it right yet).

Many things sucked about Firebase. The bespoke security rules and the lack of views. So Convex is on the money shipping functions on the backend. I think Supabase is shipping competitors' mistakes with row-level security language. Personally, I think Firebase's mistakes can be fixed with the addition of an open-source Firebase server [1], as the clients are already open source and the mistakes are all to do with just the server. The real tech was always in the clients anyway (offline cache, connection management, operation queues).

It will be interesting to see if building expressly for React is a good idea. Firebase shipped many adapters, like https://github.com/FirebaseExtended/reactfire, using the "thin-waist" principle of not over-fitting. But Javascript technology moved from callbacks to async while Firebase was in the field, so the current API is not now idiomatic. But convex is setting itself for even more ecosystem fragility, what if React changes API or falls out of favor? This is a big risk! I hope they can roll with whatever happens!

[1] https://observablehq.com/@tomlarkworthy/redis-backend-1

Since you mentioned you're also using React, we have a React specific library (ReactFire) that also helps out quite a bit.

Use ReactFire! It's our official library for React and Firebase. It has a bunch of useful hooks that probably handle most of the actions you are looking to do.

This is a quick walkthrough of a code example using ReactFire v4 in an application. The application supports login, logout, create an account, and protected routes. We also walk through two approaches for protecting routes since the AuthCheck component that existed in v3 no longer exists in v4 of ReactFire.

FWIW check out ReactFire, it gives you hooks and context for Firebase. Will likely feel more natural than using the vanilla platform-agnostic SDK.

reactfire