devrel-demos

Authentication made easy: Building a secure e-commerce shopping cart with Firebase: Web Architecture & Implementation Guide Original: codingcat.dev Shipping reliable full-stack web applications requires keeping your client SDKs, backend security rules, and cloud infrastructure tightly aligned as your traffic scales. Following the announcement of Authentication made easy: Building a secure e-commerce shopping cart with Firebase by Karl Weinmeister on the Official Firebase Blog (2026-09-01), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, SvelteKit, React, and Angular applications. Authentication can be hard enough on its own. But building an e-commerce experience where shoppers can add to cart before signing up, and then transition to a permanent account without losing their items? The Mental Model: Why Authentication made easy: Building a secure e-commerce shopping cart with Firebase Matters for Web Devs As a Google Developer Expert (GDE) for Firebase and Senior Solutions Engineer at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? This Firebase update streamlines how web and cloud engineers configure, secure, and observe production workloads across modern TypeScript frameworks like Next.js, Astro, SvelteKit, React, and Angular. > AJ Pro-Tip from Alex: Whenever we adopt a new Firebase capability at CodingCat.dev, we validate it in the Firebase Local Emulator Suite first and pair client SDK calls with Firebase App Check and strict Security Rules before shipping to production. How It Works: Technical Breakdown & Implementation That’s where things really get tricky. The use cases for e-commerce require us to tackle complex edge cases of identity management and database security all at once. You can solve all of these problems cleanly with Firebase Authentication and Cloud Firestore. In this article, we’ll show how to build a store that delivers guest onboarding, cart migration, and checkout using a Shopping Cart Simulator demo. Why e-commerce breaks simple authentication models Traditional web architectures separate unauthenticated session state from authenticated database records. In a typical online store, this creates an uncomfortable dilemma. Requiring customers to create an account before adding items adds immediate friction and hurts conversion rates. Storing guest carts in browser local storage avoids a login wall, but it lacks real-time cloud synchronization and loses items if a shopper clears their cache or switches devices. Maintaining temporary guest tables on a custom backend introduces its own headaches. Every signup requires custom data-handoff logic, database cleanup cron jobs, and the constant risk of dropped items if a network request fails during checkout. You can eliminate this fragility by treating every visitor as a verified user from the moment they load the page. Guest users with Firebase anonymous auth Instead of managing separate guest tokens and authenticated sessions, you can use Firebase Anonymous Authentication to issue a genuine cryptographic identity as soon as the application initializes. When a first-time visitor opens your store, the client calls signInAnonymously(). Firebase generates a unique user ID (uid) and signs an authentication token on Google servers. From the perspective of your database and backend APIs, an anonymous visitor is a first-class authenticated entity. import const onAuthStateChanged if // Session is active (either anonymous guest or permanent user) console. listenToUserCart } // No session exists: request a genuine anonymous identity try const console. } console. } } }); Because the anonymous uid is cryptographically signed, you can bind database permissions directly to it. The guest shopper gets immediate real-time cart updates across browser tabs without encountering a signup modal, and your backend never has to maintain custom guest session tables. Keeping your shoppers’ carts secure Granting client applications direct write access to Cloud Firestore enables fast UI updates, but it requires strict database rules to prevent tampering. In an e-commerce cart, you must guarantee three invariants: By structuring cart items in a subcollection scoped to the user ID (/carts/{uid}/items/{productId}), you can enforce these rules declaratively in Firebase Security Rules. rules_version service cloud.firestore { match // Reusable ownership check function return } // Product catalog: publicly readable, client writes forbidden match allow read: allow write: } // User cart subcollection: scoped strictly to the path UID match allow read, delete: allow create, update: && && && && } // User order history: readable only by order owner match allow get, list: allow write: } } } Defining isOwner(uid) as a reusable custom function encapsulates authentication and path authorization across multiple operations. Notice the.keys().hasOnly(['qty']) constraint. If a malicious user opens their browser console and attempts to send { qty: 1, price: 0.01 } to the database, Firestore rejects the write with an HTTP 403 permission error before anything is committed to disk. The client has total freedom to update item quantities in real time, but zero ability to influence pricing or access another user’s cart. Upgrading guests and merging conflicting cart data When an anonymous guest decides to create an account or sign into an existing profile, your application must handle the transition without losing data. There are two distinct conversion paths depending on whether the customer is creating a brand new account or logging into an existing one: If the customer is signing up for the first time, you can attach their new credentials (such as an email and password or a Google OAuth token) directly to their existing anonymous account using linkWithCredential(). import async const try const console. } console. } } When account linking succeeds, the user’s uid stays exactly the same. All Firestore documents stored under /carts/{uid}/items remain immediately accessible without copying a single byte of database storage. Authorizing Cloud Run domains for OAuth: **If you use third-party OAuth providers like Google Sign-In (signInWithPopup or linkWithPopup), Firebase’s internal authentication iframe blocks unauthorized origins. When deploying your frontend to Cloud Run or a custom domain, add your hostname (for example, your-shopping-app.run.app) to **Firebase Console → Authentication → Settings → Authorized domains. Account linking fails with a credential collision error (auth/credential-already-in-use) when a shopper signs into an account that already exists. In this scenario, the returning account has its own permanent uid and may already contain items from a previous session. Because both the guest and the returning customer are verified cryptographic identities in Firestore, you don’t need backend session tables. Instead, you can reconcile the carts deterministically on the client using atomic batch writes: import import async const // Step 1: Read current guest cart items from Firestore into memory const const guestSnap. // Step 2: Delete guest cart documents to prevent orphaned database records const guestSnap. await // Step 3: Authenticate as the returning permanent user const const // Step 4: Merge guest items into the returning user's cart in Firestore const for const const const const mergeBatch. } await } By capping the merged quantity at the value of 99 (Math.min(99, existingQty + (data.qty || 1))), the migration logic prevents malicious clients from submitting unreasonable values. Why database rules never filter collection queries Once a customer places an order, they expect to see their order history in their account dashboard. A common mistake when querying collections in Firestore is expecting security rules to act as automatic query filters, but rules are not filters. Consider the security rule for the /orders collection: match allow get, list: && allow write: } If your frontend client executes an unscoped query like getDocs(collection(db, "orders")), Firestore rejects the request immediately with a permission error. This happens even if the database only contains orders belonging to that specific user. In Cloud Firestore, rules evaluate the query constraints, not the individual documents in the database. For a list query to succeed, the client request must explicitly include a where() filter that matches the security rule condition: import async // Must explicitly filter by ownerUid to satisfy security rules const collection where ); const return } When the query filter matches the rule authorization boundary (where("ownerUid", "==", uid)), Firestore verifies that the query can never return unauthorized data and completes the read request. Enforcing pricing authority on a Cloud Run backend While client-side database writes provide an excellent user experience for cart management, you should never allow frontend applications to write confirmed order records. In your security rules, the /orders/{id} path explicitly specifies allow write: if false;. To process a checkout securely, the browser sends the product IDs and quantities alongside its Firebase ID token to a backend service on Cloud Run. Built with Node.js, the server cryptographically verifies the token, queries the canonical product catalog to calculate the verified total, and writes the order to Firestore using Google Cloud IAM service account privileges. // POST /api/checkout handler on Cloud Run async // 1. Verify caller's Firebase ID token const const if return } let try const uid } return } // 2. Validate cart payload const const if return } let const for // Look up canonical price from server catalog; ignore client prices const if const const const totalAmount verifiedLines. productId: pid, name: product.name, unitPrice: product.price, qty: qty, lineTotal: }); } const const // 3. Write immutable order to Firestore via Admin SDK & IAM privileges await await res. success: order: { orderId, ownerUid: uid, total: finalTotal, lines: verifiedLines } }); } Because the Cloud Run service account operates with administrative IAM permissions, it bypasses client security rules to create the verified order and empty the user’s shopping cart. This separation of responsibilities keeps your UI snappy while ensuring your financial transactions remain authoritative. If you prefer not to manage a custom Express server on Cloud Run, you can implement this exact handler as a Firebase Callable Function (onCall). Callable functions handle authentication verification automatically on request.auth.uid and support Firebase App Check out of the box to protect your checkout endpoint from automated bot traffic. Summary of architectural responsibilities Dividing your e-commerce application across these three layers provides a clean separation between user experience and data security: Try the demo and explore the code You can run the Shopping Cart Simulator to test all of these authentication flows, execute live rule verification tests, and inspect database audit logs. To explore the implementation details or deploy this architecture to your own Google Cloud project: - Source Code: **Clone and run the complete sample from GoogleCloudPlatform/devrel-demos/app-dev/secure-shopping-cart on GitHub. - **Documentation & Rules: **Review the official Firebase Security Rules guide and Google Cloud Run documentation**. If you want to talk more about modern web applications and Firebase, follow me on X, LinkedIn, or Bluesky. Production Web Architecture & Security Checklist Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping TypeScript features to production requires defense-in-depth across three layers: - Enforce Firebase App Check & Attestation: **Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse using Firebase App Check with reCAPTCHA Enterprise**. - **Validate Locally with the Firebase Emulator Suite: **Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production. - **Keep Server & Client Boundaries Type-Safe: **Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, Astro, SvelteKit, and Angular serialize state cleanly without hydration flickers. Conclusion Accelerate your full-stack web and AI development by pairing Authentication made easy: Building a secure e-commerce shopping cart with Firebase with strict Security Rules, Firebase App Check, and local emulator testing. Come tell us on X (@CodingCatDev) and LinkedIn (CodingCat.dev) how you are using Firebase in your stack, and subscribe to the CodingCat.dev YouTube Channel so you don't miss what we build next! Watch Our Related Firebase Video Tutorial on YouTube Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev session Firebase Security Rules: Effortless control over your app's data. below, and make sure to Subscribe to CodingCat.dev on YouTube for weekly full-stack web and AI deep dives: {% youtube wGbEM0CXMuI %} Resources, Official Docs & Related CodingCat.dev Guides - Primary Release Source: **Authentication made easy: Building a secure e-commerce shopping cart with Firebase on the Official Firebase Blog (published 2026-09-01 by Karl Weinmeister) - **Official Firebase Documentation: **Firebase Developer Docs & Web SDK Reference - **Related on CodingCat.dev: 3 ways to optimize Firebase Remote Config fetch usage - Related on CodingCat.dev: 5 ways to use Gemini text-to-speech (TTS) in your apps with Firebase AI Logic - Related on CodingCat.dev: Firebase SQL with Data Connect - Related on CodingCat.dev: Build a Custom No-Code App in 90 Minutes Frequently Asked Questions (FAQ) What are the key capabilities introduced in Authentication made easy: Building a secure e-commerce shopping cart with Firebase? Authentication made easy: Building a secure e-commerce shopping cart with Firebase (announced 2026-09-01 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, TypeScript, Security workloads. Authentication can be hard enough on its own. But building an e-commerce experience where shoppers can add to cart before signing up, and then transition to a permanent account without losing their items? Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above. How do web developers use Authentication made easy: Building a secure e-commerce shopping cart with Firebase with Next.js, SvelteKit, React, or Angular? Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, and Firebase App Hosting. Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying. Where can I watch video tutorials on Firebase Web and AI development? You can watch our hands-on Firebase video walkthroughs on the CodingCat.dev YouTube Channel, including Firebase Security Rules: Effortless control over your app's data., and follow us on X (@CodingCatDev) for weekly full-stack tutorials.

Build a smart search bot for your phone I was on my phone the other day and wanted to find everything and anything related to a hamster I used to know named Stinky. His memories remain in various photos, videos, journal entries and songs, but Stinky is no longer with us (he died a few years ago of old age). My phone's built-in search wasn't much help – it just looked for titles of files – so I decided to see what I could build myself without coding. I conducted some research First, I did a quick Google search to see what on-device models were available on Hugging Face: > I’m looking for a model on Hugging Face that I can put on my phone that lets me context search for video, audio, text, and photos. And I received three strong leads: - Google Embeddinggemma 2: 740M parameters, 1.5 GB storage, 2GB RAM - Meta ImageBind: ~1.2B parameters, 2.5GB storage, 4GB RAM - NVIDIA Omni-Embed-Nemotron: ~3B–4.7B parameters, 9.5 GB storage, 8GB RAM I chose to work with Embeddinggemma 2 since its size was small enough to run on a smartphone. Finally, I thought about how I was going to get the app on my phone. I chose to use Flutter, a multi-platform mobile framework that is easy and fun to use. With my toolbox complete, I set out to build the personal search bot of my dreams. I used these steps to build the app On my laptop, I loaded up my agent command center, Antigravity, and passed it a prompt to create the app: > Create an app that can search my phone for a theme of my choice. The app should be able to search photos, videos, documents, and voice recordings on my phone and return a list of them that match my theme. I want to use Embeddinggemma 2 as my model and Flutter as my framework. Call the app Lark. Design it to be cheerful and fun. 45 minutes later, the first version of an app called Lark was complete, no coding required. !Image description When I launched the app though, it didn't quite work. The AI agent had mocked the search experience and hadn't actually connected my app to a model. After some back and forth over a few hours, the model was properly connected and the mocked data removed. The resulting app was quite nice! When I was finished, I wondered how easy it might be to connect this to Model Garden so I could free up 1.5GB on my device and use my app on all of my devices. I prompted Antigravity to do this and in 30 minutes I had a working gig! 3 things I learned building the app Building a fully functional semantic search app without writing code was wild, but it definitely wasn't magic. If you're looking to build your own AI tools, here are my biggest takeaways: 1. Don't fall for the mock data trap. Antigravity built a beautiful UI in just 45 minutes, but it was just a facade. AI had mocked the search experience instead of connecting the model. I had to explicitly request that it not use mock data to get what I needed. 2. Pivoting from an on device model to a cloud hosted model is surprisingly easy. You don't have to lock yourself in one architecture. Switching stacks is much easier these days. 3. Simple math is your friend on mobile. EmbeddingGemma 2 uses clever math optimizations that eliminate the need for heavy native dependencies that would have drained my phone's battery. Barriers are vanishing Projects like Lark prove that the barrier to entry for highly personalized software is vanishing. You no longer need an engineering team to solve a hyper-specific personal problem, you just need a bit of patience and the right prompts. P.S. Want to see what I built? Download the source code for the Lark app here. Take what you want, modify it into what you need, and if you build something cool, let me know! ~ Stinky (2021-2023) ~ Gone but not forgotten ~ !Image description