firebase-js-sdk VS redux

// 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.

Redux

redux - Redux is a key tool used in managing state across an application. This can be used with any web technology including React, Vue and Angular docs

Redux is a client-state library.

react-redux: A powerhouse for efficient state management and data flow control. Learn more

Reducer-based: requires dispatching actions to update a big centralised state, often called a “single source of truth”. In this group, we have Redux and Zustand.

I am _thrilled_ to announce that:

Redux Toolkit 2.0 is LIVE!!!

- https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0

This major version has new features, faster perf, smaller bundle size, and removes deprecated options.

It's accompanied by majors for all our Redux family packages

## RTK 2.0:

- a new `combineSlices` method for lazy-loading reducers - Updates to `createSlice` to include a `selectors` field and allow defining thunks inside

- Immer 10 w/ faster updates

- Removal of deprecated options

See the migration guide:

- https://redux.js.org/usage/migrations/migrating-rtk-2

All of the Redux libraries now have modernized packaging with full ESM/CJS compat. They also ship modern JS (no transpiling for IE11), which means smaller bundle sizes.

We've also done byte-shaving work to shrink the bundles (extracting error messages, de-duping imports)

## Redux core 5.0:

- The TS conversion we did in 2019!

- Action types _must_ be strings

- `UnknownAction` as the default action type

- Better preloaded state types

- Internal subscription improvements

- Still marks `createStore` as deprecated!

- https://github.com/reduxjs/redux/releases/tag/v5.0.0

## React-Redux 9.0:

- *Now requires React 18 and RTK 2.0 / Redux 5.0*

DEV is a Rails monolith, which uses Preact in the front-end using islands architecture. The reason why I mention all this is that it's not a full-stack JavaScript application, and there is no state management library like Redux or Zustand in use. The data store, for the most part on the front end, is all data attributes.

Oh hey, that's my post!

(yes I spend too much time refreshing HN :) )

FWIW I did end up with a packaging combination that seems to work sufficiently. I never did fix the "FalseCJS" issue that `are-the-types-wrong` is detecting. I played with double-emitting TS typedefs, and the `tsup` tool _does_ actually have support for that now (added by Andrew Branch from the TS team). So it might be more feasible now. But ultimately I decided I was tired of messing with packaging setup and that what I've got is good enough. (hopefully)

We're actually about to launch Redux Toolkit 2.0 and Redux 5.0 this week, assuming the last couple pieces come together. Here's the latest RCs - you can see the current `package.json` files in there:

- https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0...

- https://github.com/reduxjs/redux/releases/tag/v5.0.0-rc.1