Fix import issue with Next.js 14, and tidy up

firebase · spiffylogic · Jan 28, 2024 · Jan 28, 2024 · 46f788ff9fd423660d1ec617dcc50041b978f3f7 · se0ga
commit 46f788ff9fd423660d1ec617dcc50041b978f3f7
diff --git a/nextjs-end/next.config.js b/nextjs-end/next.config.js
@@ -1,8 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-	experimental: {
-		serverActions: true,
-	}
 };
 
 module.exports = nextConfig;
diff --git a/nextjs-end/package.json b/nextjs-end/package.json
@@ -9,10 +9,10 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"@google-cloud/firestore": "^6.
7
.0",
-		"firebase": "^10.
3.1
",
-		"firebase-admin": "^11.
10
.1",
-		"next": "
13.4.10
",
+		"@google-cloud/firestore": "^6.
8
.0",
+		"firebase": "^10.
7.2
",
+		"firebase-admin": "^11.
11
.1",
+		"next": "
^14.1.0
",
 		"protobufjs": "^7.2.5",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",

diff --git a/nextjs-end/src/app/actions.js b/nextjs-end/src/app/actions.js
@@ -1,7 +1,7 @@
 "use server";
 
 import { addReviewToRestaurant } from "@/src/lib/firebase/firestore.js";
-import { getAuthenticatedAppForUser } from "@/src/lib/firebase/
firebase
";
+import { getAuthenticatedAppForUser } from "@/src/lib/firebase/
getAuthenticatedAppForUser.js
";
 import { getFirestore } from "firebase/firestore";
 
 // This is a next.js server action, an alpha feature, so

diff --git a/nextjs-end/src/app/layout.js b/nextjs-end/src/app/layout.js
@@ -1,6 +1,7 @@
 import "@/src/app/styles.css";
 import Header from "@/src/components/Header.jsx";
-import { getAuthenticatedAppForUser } from "@/src/lib/firebase/firebase";
+import { getAuthenticatedAppForUser } from "@/src/lib/firebase/getAuthenticatedAppForUser.js";
+
 // Force next.js to treat this route as server-side rendered
 // Without this line, during the build process, next.js will treat this route as static and build a static HTML file for it
 export const dynamic = "force-dynamic";
@@ -11,18 +12,14 @@ export const metadata = {
     "FriendlyEats is a restaurant review website built with Next.js and Firebase.",
 };
 
-
 export default async function RootLayout({ children }) {
     const { currentUser } = await getAuthenticatedAppForUser();
   return (
     <html lang="en">
-
           <body>
             <Header initialUser={currentUser?.toJSON()}/>
-
             <main>{children}</main>
           </body>
-
     </html>
   );
 }
diff --git a/nextjs-end/src/app/restaurant/[id]/page.jsx b/nextjs-end/src/app/restaurant/[id]/page.jsx
@@ -1,14 +1,9 @@
 import Restaurant from "@/src/components/Restaurant.jsx";
-import { useUser } from "@/src/lib/firebase/auth";
 import {
 	getRestaurantById,
 	getReviewsByRestaurantId,
 } from "@/src/lib/firebase/firestore.js";
-import {
-	getAuthenticatedAppForUser
-} from "@/src/lib/firebase/firebase.js";
-
-
+import getAuthenticatedAppForUser from "@/src/lib/firebase/getAuthenticatedAppForUser.js";
-import
 getAuthenticatedAppForUser
 from
 "@/src/lib/firebase/getAuthenticatedAppForUser.js"
;
+import
 {
 getAuthenticatedAppForUser
 }
 from
 "@/src/lib/firebase/getAuthenticatedAppForUser.js"
;
-import
 getAuthenticatedAppForUser
 from
 "@/src/lib/firebase/getAuthenticatedAppForUser.js"
;
+import
 {
 getAuthenticatedAppForUser
 }
 from
 "@/src/lib/firebase/getAuthenticatedAppForUser.js"
;
 
 export const dynamic = "force-dynamic";
 

diff --git a/nextjs-end/src/components/Restaurant.jsx b/nextjs-end/src/components/Restaurant.jsx
@@ -4,13 +4,11 @@
 // It receives data from src/app/restaurant/[id]/page.jsx
 
 import { React, useState, useEffect } from "react";
-import { onAuthStateChanged } from "firebase/auth";
 import {
   getRestaurantSnapshotById,
   getReviewsSnapshotByRestaurantId,
 } from "@/src/lib/firebase/firestore.js";
-import { auth } from "@/src/lib/firebase/firebase.js";
-import {getUser} from '@/src/lib/getUser'
+import { getUser } from '@/src/lib/firebase/getUser'
 import { updateRestaurantImage } from "@/src/lib/firebase/storage.js";
 import ReviewDialog from "@/src/components/ReviewDialog.jsx";
 import RestaurantDetails from "@/src/components/RestaurantDetails.jsx";

diff --git a/nextjs-end/src/lib/firebase/config.js b/nextjs-end/src/lib/firebase/config.js
diff --git a/nextjs-end/src/lib/firebase/firebase.js b/nextjs-end/src/lib/firebase/firebase.js
@@ -22,85 +22,3 @@ export const firebaseApp =
 export const auth = getAuth(firebaseApp);
 export const db = getFirestore(firebaseApp);
 export const storage = getStorage(firebaseApp);
-
-
-export async function getAuthenticatedAppForUser(session = null) {
-
-
-  if (typeof window !== "undefined") {
-    // client
-    console.log("client: ", firebaseApp);
-
-    return { app: firebaseApp, user: auth.currentUser.toJSON() };
-  }
-
-  const { initializeApp: initializeAdminApp, getApps: getAdminApps } = await import("firebase-admin/app");
-
-  const { getAuth: getAdminAuth } = await import("firebase-admin/auth");
-
-  const { credential } = await import("firebase-admin");
-
-  const ADMIN_APP_NAME = "firebase-frameworks";
-  const adminApp =
-    getAdminApps().find((it) => it.name === ADMIN_APP_NAME) ||
-    initializeAdminApp({
-      credential: credential.applicationDefault(),
-  }, ADMIN_APP_NAME);
-
-  const adminAuth = getAdminAuth(adminApp);
-  const noSessionReturn = { app: null, currentUser: null };
-
-
-  if (!session) {
-    // if no session cookie was passed, try to get from next/headers for app router
-    session = await getAppRouterSession();
-
-    if (!session) return noSessionReturn;
-  }
-
-  const decodedIdToken = await adminAuth.verifySessionCookie(session);
-
-  const app = initializeAuthenticatedApp(decodedIdToken.uid)
-	const auth = getAuth(app)
-
-  // handle revoked tokens
-  const isRevoked = !(await adminAuth
-    .verifySessionCookie(session, true)
-    .catch((e) => console.error(e.message)));
-  if (isRevoked) return noSessionReturn;
-
-  // authenticate with custom token
-  if (auth.currentUser?.uid !== decodedIdToken.uid) {
-    // TODO(jamesdaniels) get custom claims
-    const customToken = await adminAuth
-      .createCustomToken(decodedIdToken.uid)
-      .catch((e) => console.error(e.message));
-
-    if (!customToken) return noSessionReturn;
-
-    await signInWithCustomToken(auth, customToken);
-  }
-  console.log("server: ", app);
-  return { app, currentUser: auth.currentUser };
-}
-
-async function getAppRouterSession() {
-  // dynamically import to prevent import errors in pages router
-  const { cookies } = await import("next/headers");
-
-  try {
-    return cookies().get("__session")?.value;
-  } catch (error) {
-    // cookies() throws when called from pages router
-    return undefined;
-  }
-}
-
-function initializeAuthenticatedApp(uid) {
-  const random = Math.random().toString(36).split(".")[1];
-  const appName = `authenticated-context:${uid}:${random}`;
-
-  const app = initializeApp(firebaseConfig, appName);
-
-  return app;
-}
diff --git a/nextjs-end/src/lib/firebase/getAuthenticatedAppForUser.js b/nextjs-end/src/lib/firebase/getAuthenticatedAppForUser.js
@@ -0,0 +1,77 @@
+import { initializeApp } from "firebase/app";
+import {
+  getAuth,
+  signInWithCustomToken,
+} from "firebase/auth";
+import { auth as firebaseAuth, firebaseApp, firebaseConfig } from "@/src/lib/firebase/firebase.js";
+
+export async function getAuthenticatedAppForUser(session = null) {
+  if (typeof window !== 'undefined') {
+    // Running on the client
+    console.log("client: ", firebaseApp);
+    return { app: firebaseApp, user: firebaseAuth.currentUser.toJSON() };
+  }
+
+  const { initializeApp: initializeAdminApp, getApps: getAdminApps } = await import("firebase-admin/app");
+  const { getAuth: getAdminAuth } = await import("firebase-admin/auth");
+  const { credential } = await import("firebase-admin");
+
+  const ADMIN_APP_NAME = "firebase-frameworks";
+  const adminApp =
+    getAdminApps().find((it) => it.name === ADMIN_APP_NAME) ||
+    initializeAdminApp({
+      credential: credential.applicationDefault(),
+  }, ADMIN_APP_NAME);
+
+  const adminAuth = getAdminAuth(adminApp);
+  const noSessionReturn = { app: null, currentUser: null };
+
+  if (!session) {
+    // if no session cookie was passed, try to get from next/headers for app router
+    session = await getAppRouterSession();
+    if (!session) return noSessionReturn;
+  }
+
+  const decodedIdToken = await adminAuth.verifySessionCookie(session);
+  const app = initializeAuthenticatedApp(decodedIdToken.uid)
+	const auth = getAuth(app)
+
+  // handle revoked tokens
+  const isRevoked = !(await adminAuth
+    .verifySessionCookie(session, true)
+    .catch((e) => console.error(e.message)));
+  if (isRevoked) return noSessionReturn;
+
+  // authenticate with custom token
+  if (auth.currentUser?.uid !== decodedIdToken.uid) {
+    // TODO(jamesdaniels) get custom claims
+    const customToken = await adminAuth
+      .createCustomToken(decodedIdToken.uid)
+      .catch((e) => console.error(e.message));
+
+    if (!customToken) return noSessionReturn;
+    await signInWithCustomToken(auth, customToken);
+  }
+
+  console.log("server: ", app);
+  return { app, currentUser: auth.currentUser };
+}
+
+async function getAppRouterSession() {
+  // dynamically import to prevent import errors in pages router
+  const { cookies } = await import("next/headers");
+
+  try {
+    return cookies().get("__session")?.value;
+  } catch (error) {
+    // cookies() throws when called from pages router
+    return undefined;
+  }
+}
+
+function initializeAuthenticatedApp(uid) {
+  const random = Math.random().toString(36).split(".")[1];
+  const appName = `authenticated-context:${uid}:${random}`;
+  const app = initializeApp(firebaseConfig, appName);
+  return app;
+}
diff --git a/nextjs-end/src/lib/getUser.js → nextjs-end/src/lib/firebase/getUser.js b/nextjs-end/src/lib/getUser.js → nextjs-end/src/lib/firebase/getUser.js