create-shopify-firebase-app 1.3.0 → 2.0.0

package/templates/js/functions/src/verify-token.js

@@ -0,0 +1,39 @@
+const jwt = require("jsonwebtoken");
+const { getConfig } = require("./config");
+
+// Middleware: verify App Bridge session token.
+// The embedded dashboard sends Authorization: Bearer <jwt> with every request.
+// Docs: https://shopify.dev/docs/apps/build/authentication/session-tokens
+function verifySessionToken(req, res, next) {
+  const authHeader = req.headers.authorization;
+  if (!authHeader || !authHeader.startsWith("Bearer ")) {
+    res.status(401).json({ error: "Missing Authorization header" });
+    return;
+  }
+
+  const token = authHeader.split(" ")[1];
+  const config = getConfig();
+
+  try {
+    const decoded = jwt.verify(token, config.apiSecret, {
+      algorithms: ["HS256"],
+    });
+
+    if (decoded.aud !== config.apiKey) {
+      res.status(403).json({ error: "Token audience mismatch" });
+      return;
+    }
+
+    // Extract shop from issuer URL
+    const issUrl = new URL(decoded.iss);
+    req.shopDomain = issUrl.hostname;
+    req.sessionToken = decoded;
+
+    next();
+  } catch (err) {
+    console.error("Session token verification failed:", err);
+    res.status(401).json({ error: "Invalid session token" });
+  }
+}
+
+module.exports = { verifySessionToken };

package/templates/js/functions/src/webhooks.js

@@ -0,0 +1,111 @@
+const crypto = require("crypto");
+const { getConfig } = require("./config");
+const { db } = require("./firebase");
+
+// ─── Verify Shopify Webhook HMAC ─────────────────────────────────────────
+function verifyWebhookHmac(rawBody, hmacHeader) {
+  const config = getConfig();
+  const hash = crypto
+    .createHmac("sha256", config.apiSecret)
+    .update(rawBody)
+    .digest("base64");
+
+  try {
+    return crypto.timingSafeEqual(Buffer.from(hash), Buffer.from(hmacHeader));
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Standalone webhook handler — no Express, no middleware.
+ *
+ * Why standalone? Webhooks must respond 200 within 5 seconds.
+ * Skipping Express middleware means faster cold starts and less overhead.
+ * Uses req.rawBody (provided natively by Firebase v2) for HMAC verification.
+ */
+async function webhookHandler(req, res) {
+  // Only accept POST
+  if (req.method !== "POST") {
+    res.status(405).send("Method not allowed");
+    return;
+  }
+
+  const hmac = req.headers["x-shopify-hmac-sha256"];
+  const topic = req.headers["x-shopify-topic"];
+  const shop = req.headers["x-shopify-shop-domain"];
+
+  // Verify HMAC using rawBody (Buffer, provided by Firebase v2)
+  if (req.rawBody && hmac && !verifyWebhookHmac(req.rawBody, hmac)) {
+    console.error("Webhook HMAC verification failed");
+    res.status(401).send("Unauthorized");
+    return;
+  }
+
+  console.log(`Webhook: ${topic} from ${shop}`);
+
+  // Parse body
+  let body = {};
+  try {
+    body = JSON.parse(req.rawBody?.toString("utf8") || "{}");
+  } catch {
+    // Non-JSON webhook payloads are rare but valid
+  }
+
+  switch (topic) {
+    // ── App lifecycle ──────────────────────────────────────────────────
+    case "app/uninstalled": {
+      await db.collection("shopSessions").doc(shop).delete();
+      console.log(`Session cleaned up for ${shop}`);
+      break;
+    }
+
+    // ── GDPR mandatory webhooks (required for App Store) ───────────────
+    case "customers/data_request": {
+      // Customer requested their data. Export within 30 days if you store any.
+      console.log(`Customer data request: ${shop}`);
+      // TODO: implement if you store customer data
+      break;
+    }
+
+    case "customers/redact": {
+      // Customer requested deletion. Delete within 30 days.
+      console.log(`Customer redact: ${shop}`);
+      // TODO: implement if you store customer data
+      break;
+    }
+
+    case "shop/redact": {
+      // 48h after uninstall. Delete ALL shop data.
+      console.log(`Shop redact: ${shop}`);
+      // TODO: delete all data for this shop from Firestore
+      break;
+    }
+
+    default:
+      console.log(`Unhandled webhook: ${topic}`);
+  }
+
+  // Always respond 200 quickly — do heavy work asynchronously
+  res.status(200).send("OK");
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// HOW TO ADD A NEW WEBHOOK HANDLER:
+//
+//   1. Register the topic in shopify.app.toml:
+//      [[webhooks.subscriptions]]
+//      topics = [ "orders/create" ]
+//      uri = "{{APP_URL}}/webhooks"
+//
+//   2. Add a case to the switch above:
+//      case "orders/create": {
+//        const order = body;
+//        // Your logic here
+//        break;
+//      }
+//
+//   3. Deploy: firebase deploy --only functions:webhooks
+// ──────────────────────────────────────────────────────────────────────────
+
+module.exports = { webhookHandler };

package/templates/{firebase.json → shared/firebase.json}

@@ -1,6 +1,7 @@
 {
   "hosting": {
     "public": "web",
+    "cleanUrls": true,
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       { "source": "/auth", "run": { "serviceId": "auth", "region": "us-central1" } },

package/templates/shopify.app.toml

@@ -22,7 +22,7 @@ api_version = "2026-01"
   topics = [ "app/uninstalled" ]
   uri = "{{APP_URL}}/webhooks"
 
-  # GDPR mandatory webhooks (handled automatically by Shopify via compliance endpoints)
+  # GDPR mandatory webhooks
   [webhooks.privacy_compliance]
   customer_deletion_url = "{{APP_URL}}/webhooks"
   customer_data_request_url = "{{APP_URL}}/webhooks"

package/templates/ts/functions/src/admin-api.ts

@@ -0,0 +1,290 @@
+import { Router, Request, Response } from "express";
+import { verifySessionToken } from "./verify-token";
+import { getAccessToken } from "./auth";
+import { db } from "./firebase";
+
+export const adminApiRouter = Router();
+
+// All admin routes require session token verification
+adminApiRouter.use(verifySessionToken);
+
+// Shopify API version — update when Shopify releases new versions
+// Docs: https://shopify.dev/docs/api/usage/versioning
+const API_VERSION = "2026-01";
+
+// Default app settings — returned when no settings are saved yet
+const DEFAULT_SETTINGS = {
+  greeting: "Welcome to our app!",
+  theme: "auto",
+  notifications: true,
+  customCss: "",
+};
+
+// ─── Get shop info ───────────────────────────────────────────────────────
+adminApiRouter.get("/shop", async (req: Request, res: Response) => {
+  const shop = (req as any).shopDomain;
+  const accessToken = await getAccessToken(shop);
+
+  if (!accessToken) {
+    res.status(401).json({ error: "Shop not authenticated" });
+    return;
+  }
+
+  try {
+    const response = await fetch(
+      `https://${shop}/admin/api/${API_VERSION}/graphql.json`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Shopify-Access-Token": accessToken,
+        },
+        body: JSON.stringify({
+          query: `{
+            shop {
+              name
+              email
+              myshopifyDomain
+              url
+              primaryDomain { url host }
+              plan { displayName partnerDevelopment shopifyPlus }
+              currencyCode
+              ianaTimezone
+              billingAddress { country countryCodeV2 }
+              productCount: productsCount { count }
+            }
+          }`,
+        }),
+      },
+    );
+
+    const data = (await response.json()) as any;
+    res.json({ shop: data.data?.shop });
+  } catch (err: any) {
+    console.error("Shop info error:", err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ─── Search products ────────────────────────────────────────────────────
+// NOTE: This route MUST be defined before /products/:id so Express
+// doesn't match "search" as a product ID.
+adminApiRouter.get("/products/search", async (req: Request, res: Response) => {
+  const shop = (req as any).shopDomain;
+  const query = (req.query.q as string) || "";
+  const accessToken = await getAccessToken(shop);
+
+  if (!accessToken) {
+    res.status(401).json({ error: "Shop not authenticated" });
+    return;
+  }
+
+  try {
+    const response = await fetch(
+      `https://${shop}/admin/api/${API_VERSION}/graphql.json`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Shopify-Access-Token": accessToken,
+        },
+        body: JSON.stringify({
+          query: `
+            query SearchProducts($query: String!) {
+              products(first: 10, query: $query) {
+                edges {
+                  node {
+                    id
+                    title
+                    handle
+                    status
+                    featuredImage { url }
+                    variants(first: 1) {
+                      edges { node { id price } }
+                    }
+                    priceRangeV2 {
+                      minVariantPrice { amount currencyCode }
+                    }
+                  }
+                }
+              }
+            }
+          `,
+          variables: { query },
+        }),
+      },
+    );
+
+    const data = (await response.json()) as any;
+    const products = (data.data?.products?.edges || []).map((edge: any) => ({
+      id: edge.node.id,
+      title: edge.node.title,
+      handle: edge.node.handle,
+      status: edge.node.status,
+      image: edge.node.featuredImage?.url || null,
+      variantId: edge.node.variants.edges[0]?.node.id || null,
+      price: edge.node.priceRangeV2?.minVariantPrice?.amount,
+      currency: edge.node.priceRangeV2?.minVariantPrice?.currencyCode,
+    }));
+
+    res.json({ products });
+  } catch (err: any) {
+    console.error("Product search error:", err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ─── Get product detail ─────────────────────────────────────────────────
+adminApiRouter.get("/products/:id", async (req: Request, res: Response) => {
+  const shop = (req as any).shopDomain;
+  const accessToken = await getAccessToken(shop);
+
+  if (!accessToken) {
+    res.status(401).json({ error: "Shop not authenticated" });
+    return;
+  }
+
+  const productId = req.params.id;
+  // Support both raw numeric IDs and full GID format
+  const gid = productId.startsWith("gid://")
+    ? productId
+    : `gid://shopify/Product/${productId}`;
+
+  try {
+    const response = await fetch(
+      `https://${shop}/admin/api/${API_VERSION}/graphql.json`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Shopify-Access-Token": accessToken,
+        },
+        body: JSON.stringify({
+          query: `
+            query GetProduct($id: ID!) {
+              product(id: $id) {
+                id
+                title
+                handle
+                description
+                status
+                vendor
+                productType
+                tags
+                totalInventory
+                priceRangeV2 {
+                  maxVariantPrice { amount currencyCode }
+                  minVariantPrice { amount currencyCode }
+                }
+                featuredImage { url altText }
+                images(first: 5) {
+                  edges { node { url altText } }
+                }
+                variants(first: 20) {
+                  edges {
+                    node {
+                      id
+                      title
+                      price
+                      sku
+                      inventoryQuantity
+                      selectedOptions { name value }
+                    }
+                  }
+                }
+              }
+            }
+          `,
+          variables: { id: gid },
+        }),
+      },
+    );
+
+    const data = (await response.json()) as any;
+    const product = data.data?.product;
+
+    if (!product) {
+      res.status(404).json({ error: "Product not found" });
+      return;
+    }
+
+    res.json({ product });
+  } catch (err: any) {
+    console.error("Product detail error:", err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ─── Get app settings ───────────────────────────────────────────────────
+adminApiRouter.get("/settings", async (req: Request, res: Response) => {
+  const shop = (req as any).shopDomain;
+
+  try {
+    const doc = await db.collection("appSettings").doc(shop).get();
+
+    if (!doc.exists) {
+      res.json({ settings: { ...DEFAULT_SETTINGS } });
+      return;
+    }
+
+    // Merge with defaults so new keys are always present
+    res.json({ settings: { ...DEFAULT_SETTINGS, ...doc.data() } });
+  } catch (err: any) {
+    console.error("Get settings error:", err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ─── Save app settings ──────────────────────────────────────────────────
+adminApiRouter.post("/settings", async (req: Request, res: Response) => {
+  const shop = (req as any).shopDomain;
+  const body = req.body;
+
+  if (!body || typeof body !== "object") {
+    res.status(400).json({ error: "Request body must be a JSON object" });
+    return;
+  }
+
+  // Only allow known setting keys
+  const allowedKeys = Object.keys(DEFAULT_SETTINGS);
+  const settings: Record<string, any> = {};
+
+  for (const key of allowedKeys) {
+    if (key in body) {
+      settings[key] = body[key];
+    }
+  }
+
+  if (Object.keys(settings).length === 0) {
+    res.status(400).json({
+      error: "No valid settings provided",
+      allowedKeys,
+    });
+    return;
+  }
+
+  try {
+    await db.collection("appSettings").doc(shop).set(settings, { merge: true });
+
+    // Return the full merged settings
+    const doc = await db.collection("appSettings").doc(shop).get();
+    res.json({ settings: { ...DEFAULT_SETTINGS, ...doc.data() } });
+  } catch (err: any) {
+    console.error("Save settings error:", err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ──────────────────────────────────────────────────────────────────────────
+// HOW TO ADD A NEW ADMIN API ROUTE:
+//
+//   adminApiRouter.post("/my-endpoint", async (req, res) => {
+//     const shop = (req as any).shopDomain;
+//     const accessToken = await getAccessToken(shop);
+//     // Call Shopify Admin API, write to Firestore, etc.
+//     res.json({ success: true });
+//   });
+//
+// All routes are automatically protected by JWT session token verification.
+// Deploy: firebase deploy --only functions:api
+// ──────────────────────────────────────────────────────────────────────────