Building a Secure Wishlist in Hydrogen with Firebase Functions

Introduction

Wishlists are one of the most requested Shopify features — yet most implementations rely on Liquid apps that don’t translate to Hydrogen.

The solution? Pair Shopify’s Customer Account API with Firebase Functions to create a secure, scalable wishlist that runs at the edge.

Why Native Apps Fail in Hydrogen

• ❌ Many wishlist apps inject DOM scripts → unsupported in React/Hydrogen.
• ❌ Data lives in app silos, not in Shopify or your backend.
• ❌ Poor control over auth and security.

👉 Merchants pay app fees for a brittle experience.

The Hydrogen + Firebase Pattern

Architecture

1. Customer Login → Authenticate via Shopify Customer Account API.
2. JWT Assertion → Signed in Oxygen worker for edge safety.
3. Firebase Functions → CRUD operations for wishlist (add/remove/view).
4. Firestore → Stores wishlist data per customer ID.
5. Hydrogen UI → React hooks to fetch and render wishlist state.

Benefits

• 🔒 Secure → JWT signed at edge, avoids spoofing.
• 📈 Scalable → Firebase handles traffic spikes.
• 💸 Cost-effective → replace $500/mo apps with <$25 Firebase usage.
• 🛠️ Composable → wishlist integrates into customer dashboard or PDP.

Example Workflow

// Edge: sign JWT with Customer Account API const token = await oxygen.signJWT({ customerId, scope: "wishlist", }); // Firebase Function: add to wishlist exports.addToWishlist = functions.https.onCall(async (data, context) => { const { productId, customerId } = data; return db.collection("wishlists").doc(customerId).set({ items: firebase.firestore.FieldValue.arrayUnion(productId), }, { merge: true }); });

Case Example: DTC Brand

• Migrated from Liquid wishlist app → Firebase Functions.
• Reduced monthly SaaS costs by $500.
• Wishlist adoption increased 20% after integrating into PDP.
• Secure auth eliminated spoofing vulnerabilities.

Guardrails

• ✅ Sign tokens in Oxygen, not in client.
• ✅ Expire JWTs quickly to reduce risk.
• ✅ Validate inputs server-side in Firebase Functions.
• ✅ Monitor Firestore costs (spikes during flash sales).

Conclusion

Hydrogen stores don’t need fragile wishlist apps. By combining Shopify Customer API with Firebase Functions, agencies can deliver secure, scalable, and cost-effective wishlists that fit into any composable stack.

Replace brittle apps with composable infrastructure.