Fixing the service worker config

.gitignore

@@ -1,4 +1,8 @@
 **/.firebaserc
-**/node_modules/
+**/.DS_Store
 **/*-debug.log
-**/.DS_Store
+
+**/node_modules/
+**/package-lock.json
+**/pnpm-lock.yaml
+**/yarn.lock

nextjs-end/.env

@@ -3,4 +3,5 @@ NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
 NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
 NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
 NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=""
-NEXT_PUBLIC_FIREBASE_APP_ID=""
+NEXT_PUBLIC_FIREBASE_APP_ID=""
+GEMINI_API_KEY=""

nextjs-end/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["eslint:recommended", "next", "prettier"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

nextjs-end/.gitignore

@@ -1,4 +1,6 @@
 lib/firebase/config.js
+public/auth-service-worker.js
 .next/
 .firebase/
-node_modules/
+node_modules/
+.env

nextjs-end/.idx/dev.nix

@@ -0,0 +1,29 @@
+{ pkgs }: {
+  channel = "stable-23.11";
+  packages = [
+    pkgs.nodejs_20
+  ];
+  env = {
+    NEXT_TELEMETRY_DISABLED = "1";
+  };
+  idx.workspace = {
+      onStart = {
+        npm-install = "npm ci --no-audit --prefer-offline --no-progress --timing";
+        default.openFiles = [".env"];
+      };
+      onCreate = {
+        firebase-setup = "firebase use && firebase use \$(curl -s -H \"Metadata-Flavor: Google\" http://metadata.google.internal/computeMetadata/v1/project/project-id)";
+      };
+  };
+  idx.extensions = [
+  ];
+  idx.previews = {
+      enable = true;
+      previews = {
+        web = {
+          command = ["npm" "run" "dev" "--" "--port" "$PORT" "--hostname" "0.0.0.0"];
+          manager = "web";
+        };
+      };
+  };
+}

nextjs-end/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}

nextjs-end/apphosting.yaml

@@ -14,4 +14,7 @@ env:
   - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
     value: TODO
   - variable: NEXT_PUBLIC_FIREBASE_APP_ID
-    value: TODO
+    value: TODO
+runConfig:
+  minInstances: 0
+  maxInstances: 2

nextjs-end/auth-service-worker.js

@@ -1,44 +1,86 @@
 import { initializeApp } from "firebase/app";
-import { getAuth, getIdToken } from "firebase/auth";
-import { getInstallations, getToken } from "firebase/installations";
-
-// this is set during install
-let firebaseConfig;
-
-self.addEventListener('install', event => {
-  // extract firebase config from query string
-  const serializedFirebaseConfig = new URL(location).searchParams.get('firebaseConfig');
-
-  if (!serializedFirebaseConfig) {
-    throw new Error('Firebase Config object not found in service worker query string.');
-  }
-
-  firebaseConfig = JSON.parse(serializedFirebaseConfig);
+import { getAuth, getIdToken, onAuthStateChanged } from "firebase/auth";
+
+// extract firebase config from query string
+const serializedFirebaseConfig = new URLSearchParams(self.location.search).get(
+  "firebaseConfig"
+);
+if (!serializedFirebaseConfig) {
+  throw new Error(
+    "Firebase Config object not found in service worker query string."
+  );
+}
+
+const firebaseConfig = JSON.parse(serializedFirebaseConfig);
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+
+self.addEventListener("install", () => {
   console.log("Service worker installed with Firebase config", firebaseConfig);
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
 });
 
 self.addEventListener("fetch", (event) => {
-  const { origin } = new URL(event.request.url);
+  const { origin, pathname } = new URL(event.request.url);
   if (origin !== self.location.origin) return;
+  // Use a magic url to ensure that auth state is in sync between
+  // the client and the sw, this helps with actions such as router.refresh();
+  if (pathname.startsWith("/__/auth/wait/")) {
+    const uid = pathname.split("/").at(-1);
+    event.respondWith(waitForMatchingUid(uid));
+    return;
+  }
+  if (pathname.startsWith("/_next/")) return;
+  // Don't add headers to GET/HEAD requests or those with an extension—this
+  // helps with css, images, fonts, json, etc.
+  if (
+    (event.request.method === "GET" || event.request.method === "HEAD") &&
+    pathname.includes(".")
+  ) {
+    return;
+  }
   event.respondWith(fetchWithFirebaseHeaders(event.request));
 });
 
 async function fetchWithFirebaseHeaders(request) {
-  const app = initializeApp(firebaseConfig);
-  const auth = getAuth(app);
-  const installations = getInstallations(app);
-  const headers = new Headers(request.headers);
-  const [authIdToken, installationToken] = await Promise.all([
-    getAuthIdToken(auth),
-    getToken(installations),
-  ]);
-  headers.append("Firebase-Instance-ID-Token", installationToken);
-  if (authIdToken) headers.append("Authorization", `Bearer ${authIdToken}`);
-  const newRequest = new Request(request, { headers });
-  return await fetch(newRequest);
+  const authIdToken = await getAuthIdToken();
+  if (authIdToken) {
+    const headers = new Headers(request.headers);
+    headers.append("Authorization", `Bearer ${authIdToken}`);
+    request = new Request(request, { headers });
+  }
+  return await fetch(request).catch((reason) => {
+    console.error(reason);
+    return new Response("Fail.", {
+      status: 500,
+      headers: { "content-type": "text/html" },
+    });
+  });
+}
+
+async function waitForMatchingUid(_uid) {
+  const uid = _uid === "undefined" ? undefined : _uid;
+  await auth.authStateReady();
+  await new Promise((resolve) => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      if (user?.uid === uid) {
+        unsubscribe();
+        resolve();
+      }
+    });
+  });
+  return new Response(undefined, {
+    status: 200,
+    headers: { "cache-control": "no-store" },
+  });
 }
 
-async function getAuthIdToken(auth) {
+async function getAuthIdToken() {
   await auth.authStateReady();
   if (!auth.currentUser) return;
   return await getIdToken(auth.currentUser);

nextjs-end/firebase.json

@@ -41,11 +41,7 @@
   },
   "hosting": {
     "source": ".",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "frameworksBackend": {
       "region": "us-central1"
     }

nextjs-end/idx-template.json

@@ -0,0 +1,11 @@
+{
+  "name": "Integrate Firebase with a Next.js app",
+  "description": "In this codelab, you'll learn how to integrate Firebase with a Next.js web app called Friendly Eats, which is a website for restaurant reviews.",
+  "categories": ["Web", "Firebase", "Google Codelabs"],
+  "icon_image_url": "https://firebase.google.com/_static/firebase/images/icon.svg",
+  "publisher": "Google LLC",
+  "host": {
+    "virtualization": true
+  },
+  "params": []
+}

nextjs-end/idx-template.nix

@@ -0,0 +1,13 @@
+{ pkgs, ... }: {
+  packages = [
+    pkgs.nodejs_20
+    pkgs.j2cli
+    pkgs.nixfmt
+  ];
+  bootstrap = ''
+    npx -y giget gh:firebase/friendlyeats-web/nextjs-end#jamesdaniels_fixServiceWorkers "$WS_NAME"
+    rm "$WS_NAME/idx-template.json"
+    rm "$WS_NAME/idx-template.nix"
+    mv "$WS_NAME" "$out"
+  '';
+}

nextjs-end/jsconfig.json

@@ -1,7 +1,7 @@
 {
-	"compilerOptions": {
-		"paths": {
-			"@/*": ["./*"]
-		}
-	}
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
 }

nextjs-end/next.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-	experimental: {
-		serverActions: true,
-	}
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
 };
 
 module.exports = nextConfig;