Video Summary — Add Subscription Payments with NextJS + Firebase + Stripe 🚀

Overview

• Goal: Build a web app where users can sign in, subscribe to a $10/month premium plan, and manage/cancel subscriptions.
• Tech stack:
  • Front-end: NextJS
  • Auth & backend orchestration: Firebase (Auth, Firestore, Cloud Functions, Extensions)
  • Payments: Stripe (via Firebase Stripe Extension)
• Deliverable: Users can log in (Google), purchase subscription, see premium status, and open Stripe’s customer portal to manage/cancel subscription.

Quick Start (project setup)

• Clone the GitHub repo (starting-skeleton UI only).
• Install dependencies:
  • yarn: yarn install then yarn dev
  • npm: npm install then npm run dev
• Visit local dev URL to see the skeleton app.

Authentication (Firebase)

• Create Firebase project (console.firebase.google.com) → register web app.
• Enable Authentication → enable Google provider (add support email if prompted).
• In NextJS project:
  • Install SDKs: yarn add firebase react-firebase-hooks (or npm install)
  • Add Firebase client (e.g., src/firebase.ts) with the web config from Firebase console.
  • Wrap init in an initFirebase() getter for a singleton.
  • Use firebase/auth:
    • getAuth(app), GoogleAuthProvider(), signInWithPopup(auth, provider)
    • Implement sign-in and sign-out (auth.signOut()) on homepage/account pages.
  • Optional: use an AuthRouter to guard routes (repo includes an example).

Stripe Setup (Dashboard)

• Create Stripe account → enable Test mode (use test cards).
• Note: Stripe customer IDs differ from Firebase UIDs → need mapping/integration.
• Obtain API keys (prefer creating a restricted secret key with required permissions).

Integrating Stripe with Firebase (Recommended: Firebase Extension)

• In Firebase console → Extensions → install Run Payments With Stripe (by Stripe).
  • Add billing to Firebase project (credit card required but usually within free tier).
  • Configure deployment region (e.g., us-central1) and paste Stripe secret key (or restricted key).
• After install, enable Firestore (create DB) and apply extension-specified security rules to Firestore.
• Create a Stripe webhook endpoint:
  • In Stripe Dashboard → Developers → Webhooks → Add endpoint with the Firebase extension URL.
  • Add the list of required events (add specific events recommended, not "select all").
  • Copy the webhook signing secret → reconfigure the Firebase extension and save.

Creating Product & Price in Stripe

• In Stripe Dashboard → Products → Add Product:
  • Example: “stripe test product”, Price = $10 monthly recurring
  • Copy the Price ID (used in checkout).

Using Firebase Extension APIs from NextJS

• Extension exposes Cloud Functions / Firestore synchronization:
  • Customers, products, subscriptions are mirrored to Firestore.
  • You can call cloud functions (checkout session creation, portal link) via callable functions or the provided client SDK.
• Note: Official client SDK in docs may be outdated; author re-implemented calls to Cloud Functions using modern Firebase APIs.

Key functions to implement in project (examples):

• getCheckoutUrl(app, priceId)
  • Creates a checkout session via Firebase Cloud Function / Firestore path and returns the Stripe checkout URL.
• getPremiumStatus(app)
  • Reads Firestore for the current user’s subscriptions collection and returns whether there is an active/trialing subscription.