Enhance error handling in CommentsSection and update CSP for Firebase functions. Add staff profile handling in public authentication context.

Author: Llewellyn500

components/CommentsSection.tsx

@@ -183,6 +183,16 @@ function sortRepliesWithPriority(
   return [...staffReplies, ...regularReplies];
 }
 
+function callableErrorMessage(error: unknown, fallback: string) {
+  if (typeof error === "object" && error && "message" in error) {
+    const message = String((error as { message: string }).message)
+      .replace(/^FirebaseError:\s*/i, "")
+      .trim();
+    if (message && !/^(internal|internal error)$/i.test(message)) return message;
+  }
+  return fallback;
+}
+
 function ReaderAvatar({
   name,
   photoURL,
@@ -1282,7 +1292,7 @@ export default function CommentsSection({
     } catch (submitError) {
       await deleteMultipleCommentImagesSafe(storage, uploadedImages);
       console.error("Unable to post comment:", submitError);
-      setError("We could not post your comment. Please try again.");
+      setError(callableErrorMessage(submitError, "We could not post your comment. Please try again."));
     } finally {
       setBusyId(null);
     }
@@ -1341,7 +1351,7 @@ export default function CommentsSection({
     } catch (replyError) {
       await deleteMultipleCommentImagesSafe(storage, uploadedImages);
       console.error("Unable to post reply:", replyError);
-      setError("We could not post your reply. Please try again.");
+      setError(callableErrorMessage(replyError, "We could not post your reply. Please try again."));
     } finally {
       setReplyBusyId(null);
     }
@@ -1740,13 +1750,15 @@ export default function CommentsSection({
       ) : !authLoading && user && !profile?.handle ? (
         <div className="flex flex-wrap items-center justify-between gap-4 border-b border-white/30 py-7">
           <p className="font-light text-white/70">
-            Choose your comment handle to participate in discussions.
+            {isStaff
+              ? "Set your team handle in the CMS before commenting."
+              : "Choose your comment handle to participate in discussions."}
           </p>
           <Link
-            href="/account"
+            href={isStaff ? "https://cms.lap.onl/admin/profile" : "/account"}
             className="group inline-flex items-center gap-3 font-semibold uppercase transition-colors duration-300 hover:text-[#8a2ae3] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#8a2ae3]"
           >
-            Claim your handle
+            {isStaff ? "Open CMS profile" : "Claim your handle"}
             <RiArrowRightLine className="text-2xl transition-transform duration-300 group-hover:translate-x-1" />
           </Link>
         </div>

lib/public-auth-context.tsx

@@ -373,8 +373,41 @@ export function PublicAuthProvider({ children }: { children: ReactNode }) {
 
           const syncedProfile = existingProfile ? await syncPublicUser(nextUser) : null;
           if (!active) return;
+          const staffData = hasStaffDoc ? staffSnapshot.data() : undefined;
+          const staffHandle =
+            typeof staffData?.handle === "string"
+              ? staffData.handle.trim().toLowerCase().replace(/^@+/, "")
+              : "";
+          const staffProfile: PublicProfile | null = staffHandle
+            ? {
+                uid: nextUser.uid,
+                email: nextUser.email || "",
+                displayName:
+                  (typeof staffData?.name === "string" && staffData.name) ||
+                  syncedProfile?.displayName ||
+                  staffHandle,
+                photoURL:
+                  (typeof staffData?.avatar === "string" && staffData.avatar) ||
+                  syncedProfile?.photoURL ||
+                  nextUser.photoURL ||
+                  "",
+                provider: getProvider(nextUser),
+                handle: staffHandle,
+                status: syncedProfile?.status || "active",
+                warningCount: syncedProfile?.warningCount,
+                lastWarningReason: syncedProfile?.lastWarningReason,
+                suspendedUntil: syncedProfile?.suspendedUntil,
+                suspensionReason: syncedProfile?.suspensionReason,
+                bannedAt: syncedProfile?.bannedAt,
+                banReason: syncedProfile?.banReason,
+              }
+            : null;
           setUser(nextUser);
-          setProfile(syncedProfile);
+          setProfile(
+            syncedProfile?.handle
+              ? syncedProfile
+              : staffProfile || syncedProfile,
+          );
         } catch (error) {
           console.error("Unable to sync public user profile:", error);
           setUser(null);

next.config.js

@@ -5,7 +5,7 @@ const contentSecurityPolicy = [
   "font-src 'self' data: https://fonts.gstatic.com",
   "img-src 'self' data: blob: https:",
   "media-src 'self' https:",
-  "connect-src 'self' https://*.googleapis.com https://*.firebaseio.com wss://*.firebaseio.com https://*.google-analytics.com https://*.analytics.google.com https://www.googletagmanager.com https://www.google.com https://www.recaptcha.net https://auth.lap.onl https://*.cloudfunctions.net https://*.run.app",
+  "connect-src 'self' https://*.googleapis.com https://*.firebaseio.com wss://*.firebaseio.com https://*.google-analytics.com https://*.analytics.google.com https://www.googletagmanager.com https://www.google.com https://www.recaptcha.net https://auth.lap.onl https://*.cloudfunctions.net https://*.run.app https://*.a.run.app",
   "frame-src https://www.youtube.com https://www.youtube-nocookie.com https://accounts.google.com https://*.firebaseapp.com https://auth.lap.onl https://www.google.com/recaptcha/ https://recaptcha.google.com https://www.recaptcha.net",
   "worker-src 'self' blob:",
   "frame-ancestors 'none'",