Migrate to next-firebase-auth-edge

Author: dantheli

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:next-firebase-auth-edge-docs.vercel.app)",
+      "WebSearch",
+      "WebFetch(domain:github.com)"
+    ]
+  }
+}

.env.development

@@ -1,4 +1,6 @@
 NEXT_PUBLIC_APP_URL=http://localhost:3000
+FIREBASE_AUTH_EMULATOR_HOST=127.0.0.1:9099
+COOKIE_SECRET_CURRENT=local-dev-cookie-secret-minimum-32-chars!!
 NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyA8nQDxehOwI6qzEpxo0qXwqM_BC-t-4wk
 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=alumni-65507.firebaseapp.com
 NEXT_PUBLIC_FIREBASE_PROJECT_ID=alumni-65507

.gitignore

@@ -18,6 +18,7 @@ next-env.d.ts
 .nyc_output
 
 # ---- Firebase ----
+.emulator-data/
 firebase-service-account.json
 firebase-debug.log
 firestore-debug.log

app/(app)/admin/page.tsx

@@ -4,9 +4,10 @@ import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth/context";
 import { InviteForm } from "@/components/admin/InviteForm";
+import { MemberList } from "@/components/admin/MemberList";
 
 export default function AdminPage() {
-  const { isAdmin, loading } = useAuth();
+  const { user, isAdmin, loading } = useAuth();
   const router = useRouter();
 
   useEffect(() => {
@@ -15,12 +16,13 @@ export default function AdminPage() {
     }
   }, [loading, isAdmin, router]);
 
-  if (loading || !isAdmin) return null;
+  if (loading || !isAdmin || !user) return null;
 
   return (
     <div className="space-y-6">
       <h1 className="text-2xl font-semibold">Admin</h1>
       <InviteForm />
+      <MemberList currentUid={user.uid} />
     </div>
   );
 }

app/(app)/companies/page.tsx

@@ -1,25 +1,30 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { searchUsers } from "@/lib/firestore/users";
-import { getCompanies } from "@/lib/firestore/companies";
-import { UserProfile, Company } from "@/types";
+import { UserProfile, Organization } from "@/types";
 import { DirectoryFilters } from "@/components/directory/DirectoryFilters";
 import { AlumniCard } from "@/components/directory/AlumniCard";
 
 export default function DirectoryPage() {
   const [allUsers, setAllUsers] = useState<UserProfile[]>([]);
-  const [companies, setCompanies] = useState<Company[]>([]);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [nameFilter, setNameFilter] = useState("");
   const [classYearFilter, setClassYearFilter] = useState("");
 
   useEffect(() => {
-    searchUsers().then(setAllUsers);
-    getCompanies().then(setCompanies);
+    Promise.all([
+      fetch("/api/users").then((r) => r.json()),
+      fetch("/api/organizations").then((r) => r.json()),
+    ]).then(([users, orgs]) => {
+      setAllUsers(users);
+      setOrganizations(orgs);
+    });
   }, []);
 
   const filtered = allUsers.filter((u) => {
-    const matchName = !nameFilter || `${u.firstName} ${u.lastName}`.toLowerCase().includes(nameFilter.toLowerCase());
+    const matchName =
+      !nameFilter ||
+      `${u.firstName} ${u.lastName}`.toLowerCase().includes(nameFilter.toLowerCase());
     const matchYear = !classYearFilter || u.classYear === parseInt(classYearFilter);
     return matchName && matchYear;
   });
@@ -35,7 +40,7 @@ export default function DirectoryPage() {
       />
       <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {filtered.map((u) => (
-          <AlumniCard key={u.uid} profile={u} companies={companies} />
+          <AlumniCard key={u.uid} profile={u} organizations={organizations} />
         ))}
       </div>
       {filtered.length === 0 && (

app/(app)/directory/page.tsx

@@ -1,6 +1,20 @@
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { getTokens } from "next-firebase-auth-edge";
+import { adminDb } from "@/lib/firebase/admin";
+import { authConfig } from "@/lib/firebase/auth-edge";
 import { Header } from "@/components/layout/Header";
 
-export default function AppLayout({ children }: { children: React.ReactNode }) {
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+  const tokens = await getTokens(await cookies(), authConfig);
+  if (tokens) {
+    const { uid } = tokens.decodedToken;
+    const userDoc = await adminDb.collection("users").doc(uid).get();
+    if (!userDoc.exists || !userDoc.data()?.profileComplete) {
+      redirect("/signup/complete");
+    }
+  }
+
   return (
     <>
       <Header />

app/(app)/layout.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Organization } from "@/types";
+import { OrganizationFilters } from "@/components/organizations/OrganizationFilters";
+import { OrganizationCard } from "@/components/organizations/OrganizationCard";
+
+export default function OrganizationsPage() {
+  const [allOrganizations, setAllOrganizations] = useState<Organization[]>([]);
+  const [nameFilter, setNameFilter] = useState("");
+
+  useEffect(() => {
+    fetch("/api/organizations")
+      .then((r) => r.json())
+      .then(setAllOrganizations)
+      .catch(console.error);
+  }, []);
+
+  const filtered = allOrganizations.filter((o) =>
+    !nameFilter || o.name.toLowerCase().includes(nameFilter.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold">Organizations</h1>
+      <OrganizationFilters name={nameFilter} onNameChange={setNameFilter} />
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {filtered.map((o) => (
+          <OrganizationCard key={o.id} organization={o} />
+        ))}
+      </div>
+      {filtered.length === 0 && (
+        <p className="text-center text-muted-foreground py-12">No organizations found.</p>
+      )}
+    </div>
+  );
+}

app/(app)/organizations/page.tsx

@@ -2,10 +2,8 @@
 
 import { use, useEffect, useState } from "react";
 import { notFound } from "next/navigation";
-import { getUserProfile } from "@/lib/firestore/users";
-import { getCompanies } from "@/lib/firestore/companies";
 import { ProfileHeader } from "@/components/profile/ProfileHeader";
-import { UserProfile, Company } from "@/types";
+import { UserProfile, Organization } from "@/types";
 
 export default function ProfilePage({
   params,
@@ -14,17 +12,22 @@ export default function ProfilePage({
 }) {
   const { uid } = use(params);
   const [profile, setProfile] = useState<UserProfile | null | "loading">("loading");
-  const [companies, setCompanies] = useState<Company[]>([]);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
 
   useEffect(() => {
-    Promise.all([getUserProfile(uid), getCompanies()]).then(([p, c]) => {
+    Promise.all([
+      fetch(`/api/users/${uid}`).then((r) => (r.ok ? r.json() : null)),
+      fetch("/api/organizations").then((r) => r.json()),
+    ]).then(([p, o]) => {
       setProfile(p);
-      setCompanies(c);
+      setOrganizations(o);
     });
   }, [uid]);
 
   if (profile === "loading") {
-    return <div className="max-w-2xl mx-auto py-12 text-center text-muted-foreground">Loading…</div>;
+    return (
+      <div className="max-w-2xl mx-auto py-12 text-center text-muted-foreground">Loading…</div>
+    );
   }
 
   if (!profile) {
@@ -33,7 +36,7 @@ export default function ProfilePage({
 
   return (
     <div className="max-w-2xl mx-auto">
-      <ProfileHeader initialProfile={profile} companies={companies} />
+      <ProfileHeader initialProfile={profile} organizations={organizations} />
     </div>
   );
 }

app/(app)/profile/[uid]/page.tsx

@@ -1,7 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
-import { adminAuth, adminDb } from "@/lib/firebase/admin";
+import { adminDb } from "@/lib/firebase/admin";
 import { Resend } from "resend";
 import { Timestamp } from "firebase-admin/firestore";
+import { getTokens } from "next-firebase-auth-edge";
+import { authConfig } from "@/lib/firebase/auth-edge";
 
 const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
 const isDev = process.env.NODE_ENV === "development";
@@ -28,22 +30,17 @@ async function sendInviteEmail(to: string, signupLink: string) {
 
 export async function POST(request: NextRequest) {
   try {
-    const sessionCookie = request.cookies.get("__session")?.value;
-    if (!sessionCookie) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-    }
-
-    const decoded = await adminAuth.verifySessionCookie(sessionCookie, true);
-    const userDoc = await adminDb.collection("users").doc(decoded.uid).get();
-    const userData = userDoc.data();
+    const tokens = await getTokens(request.cookies, authConfig);
+    if (!tokens) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-    if (!userData || userData.role !== "admin") {
+    const userDoc = await adminDb.collection("users").doc(tokens.decodedToken.uid).get();
+    if (userDoc.data()?.role !== "admin") {
       return NextResponse.json({ error: "Forbidden" }, { status: 403 });
     }
 
-    const { email } = await request.json();
-    if (!email) {
-      return NextResponse.json({ error: "Email required" }, { status: 400 });
+    const { email, firstName, lastName } = await request.json();
+    if (!email || !firstName || !lastName) {
+      return NextResponse.json({ error: "Email, firstName, and lastName are required" }, { status: 400 });
     }
 
     const code = crypto.randomUUID();
@@ -54,8 +51,10 @@ export async function POST(request: NextRequest) {
     await adminDb.collection("invitations").doc(code).set({
       code,
       email,
+      firstName,
+      lastName,
       sentAt: Timestamp.now(),
-      sentBy: decoded.uid,
+      sentBy: tokens.decodedToken.uid,
     });
 
     return NextResponse.json({ ok: true });