Video Summary — Build a $10/month Subscription with Next.js + Firebase + Stripe 🚀💳

Overview

• Goal: Add a subscription payment system so users can log in, buy a $10/month premium subscription, and manage/cancel it from their account. ✅
• Tech stack:
  • Front-end: Next.js (static site)
  • Auth & backend glue: Firebase (Authentication, Firestore, Cloud Functions, Extensions)
  • Payments: Stripe (via Firebase Stripe Extension) 💳

Project Setup 🧰

• Clone repo: use the provided GitHub repo and "starting point" branch.
• Install deps: yarn install or npm install
• Run dev server: yarn dev or npm run dev
• App skeleton: home page + account page UI present; no functionality initially.

Architecture Summary 🏛️

• Options:
  • Frontend → Stripe directly (client SDK).
  • Frontend → Backend → Stripe (recommended for production).
  • Chosen approach for tutorial: Next.js frontend + Firebase (auth & DB) + Firebase ↔ Stripe extension to sync Stripe & Firebase (simpler, tightly integrated).
• Reason: Firebase extension syncs Stripe customers/products/subscriptions to Firestore, avoiding manual ID mapping.

Step 1 — Firebase Authentication (Google) 🔐

• Create Firebase project at firebase.google.com.
• Enable Authentication → Google provider (configure support email).
• Register a Web App in Firebase project to obtain config keys.
• Install SDKs:
  • yarn add firebase
  • yarn add react-firebase-hooks (or npm equivalents)
• Create firebase client file (e.g., firebase.ts), paste config, export init wrapper (singleton pattern recommended).
• Implement in Next.js:
  • Import/init Firebase app.
  • Use getAuth, GoogleAuthProvider, signInWithPopup for login.
  • Use auth.currentUser to get user details on account page.
  • Implement auth.signOut() for sign-out.
• Optional: AuthRouter utility provided in repo to guard routes based on auth.

Step 2 — Stripe Account & Test Mode 🧾

• Create/sign in to Stripe at stripe.com.
• Switch to Test Mode for development.
• Familiarize with Dashboard → Developers → API keys and Webhooks.
• Create Stripe product/price:
  • Add product (e.g., "stripe test product"), price $10 monthly (recurring).
  • Note the Price ID for checkout use.

Step 3 — Integrate Stripe via Firebase Extension ⚙️

• In Firebase Console → Extensions → Install "Run Payments with Stripe" (official Stripe extension).
• Billing: must enable billing (add a card) to install extension (free-tier typically covers usage).
• During install:
  • Choose deployment region (e.g., us-central-1).
  • Provide Stripe secret key (prefer restricted key with required permissions).
• After install:
  • Set up Firestore database (create DB and add rules provided by the extension).
  • Create Stripe webhook: copy extension-specific webhook URL → Stripe Dashboard → Webhooks → Add endpoint → select required events (add the specific events listed by the extension; avoid select-all).
  • Copy webhook signing secret → Firebase Extension configuration → reconfigure & save.

Step 4 — Client Integration (Checkout + Portal) 🔁

• Extension exposes Cloud Functions endpoints and Firestore sync (customers, checkout sessions, subscriptions, products).
• Approach used:
  • Call Firebase Cloud Functions (created by extension) from Next.js (instead of outdated client SDK).
  • Implement utility file (e.g., stripePayment.ts) with:
    • getCheckoutUrl(app, priceId): creates a checkout session for current authenticated user, returns Stripe Checkout URL.
    • getPortalUrl(app): calls cloud function to generate a customer portal URL for subscription management.
• Use Price ID from Stripe product in code to create checkout sessions.

Step 5 — Checkout Flow (Testing) 🧪

• From account page, call getCheckoutUrl then navigate to the returned URL.
• Stripe checkout page appears (test mode): enter Stripe test card numbers (see Stripe docs for test cards).
  • Use “successful payment” test card to simulate subscription purchase.
• After subscription:
  • Stripe dashboard shows new customer/subscription.
  • Firestore (via extension) syncs customer, checkout sessions, and subscription records.

Step 6 — Display & Manage Subscription Status ✅

• Implement getPremiumStatus(app): checks Firestore customer/subscriptions for active or trialing subscription; returns boolean.
• On account page:
  • Use effect/hook to call getPremiumStatus when user or app changes.
  • Update UI: show "Premium member" status or "Upgrade to premium" button accordingly.
• Manage subscription:
  • If premium, "Manage subscription" button calls getPortalUrl and navigates to Stripe Customer Portal for cancel/update payment methods.

Notes, Tips & Gotchas ⚠️

• Firebase Stripe SDK in extension docs may be outdated; calling Cloud Functions directly is a robust workaround.
• Webhook setup: include only needed events to limit unnecessary function triggers.
• Protect secrets: Stripe secret keys and webhook signing secrets must not be committed to public repos.
• Cloud functions can be slow on first cold-start; prefetch URLs if you need faster UX.
• Dev/test usage: always use Stripe Test Mode and test cards before going live.

Repo & Resources 📚

• Full code is on the author’s GitHub (repo: stripe-firebase-app) — use it as source for utility functions and implementations.
• Stripe docs: stripe.com/docs (test cards, JS SDK docs at stripe.com/docs/js)
• Firebase docs & extension docs in the Firebase Console

Final Outcome 🎉

• Working sample app where:
  • Users sign in with Google (Firebase).
  • Users can subscribe to $10/month plan via Stripe Checkout.
  • Subscription state is synced to Firestore by the Firebase Stripe extension.
  • Premium users can open the Stripe Customer Portal to manage/cancel subscriptions.

Enjoy building — and remember to switch to live keys + production settings when launching! 🔐💸