Fix navbar showing logged in when not

Author: tzyian

peerprep/app/actions/server_actions.ts

@@ -95,7 +95,7 @@ export async function hydrateUid(): Promise<null | UserData> {
   if (isError(json)) {
     console.log("Failed to fetch user ID.");
     console.log(`Error ${json.status}: ${json.error}`);
-    redirect("/auth/logout");
+    // redirect("/auth/logout");
   }
   // TODO: handle error handling
   const response = json as UserServiceResponse;

peerprep/app/questions/page.tsx

@@ -6,10 +6,15 @@ import { hydrateUid } from "../actions/server_actions";
 import { isError, Question, StatusBody, UserData } from "@/api/structs";
 import { UserInfoProvider } from "@/contexts/UserInfoContext";
 import { fetchAllQuestions } from "@/app/questions/helper";
+import { redirect } from "next/navigation";
 
 async function QuestionsPage() {
   const userData = (await hydrateUid()) as UserData;
 
+  if (!userData) {
+    redirect("/auth/login");
+  }
+
   const questions: Question[] | StatusBody = await fetchAllQuestions();
 
   if (isError(questions)) {

peerprep/components/navbar/ProfileDropdown.tsx

@@ -1,11 +1,19 @@
-"use client";
-
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import Image from "next/image";
 import React from "react";
 import Link from "next/link";
+import { UserData } from "@/api/structs";
+import { hydrateUid } from "@/app/actions/server_actions";
+
+export const ProfileDropdown = async () => {
+  let userData;
+  try {
+    userData = (await hydrateUid()) as UserData;
+  } catch {
+    userData = null;
+    console.error("Error hydrating user data.");
+  }
 
-export const ProfileDropdown = () => {
   return (
     <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
       {/* Profile dropdown */}
@@ -27,30 +35,34 @@ export const ProfileDropdown = () => {
           transition
           className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-gray-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
         >
-          <MenuItem>
-            <Link
-              href="#"
-              className="block px-4 py-2 text-sm data-[focus]:bg-gray-2"
-            >
-              Your Profile (Coming Soon)
-            </Link>
-          </MenuItem>
-          <MenuItem>
-            <Link
-              href="#"
-              className="block px-4 py-2 text-sm data-[focus]:bg-gray-2"
-            >
-              Settings (Coming Soon)
-            </Link>
-          </MenuItem>
-          <MenuItem>
-            <Link
-              href="/auth/logout"
-              className="block px-4 py-2 text-sm data-[focus]:bg-gray-2"
-            >
-              Sign out
-            </Link>
-          </MenuItem>
+          {userData ? (
+            <>
+              <MenuItem>
+                <div className="block px-4 py-2 text-sm text-white data-[focus]:bg-gray-2">
+                  Hello, {userData.username}!
+                </div>
+              </MenuItem>
+              <MenuItem>
+                <Link
+                  href="/auth/logout"
+                  className="block px-4 py-2 text-sm data-[focus]:bg-gray-2"
+                >
+                  Sign out
+                </Link>
+              </MenuItem>
+            </>
+          ) : (
+            <>
+              <MenuItem>
+                <Link
+                  href="/auth/login"
+                  className="block px-4 py-2 text-sm data-[focus]:bg-gray-2"
+                >
+                  Login
+                </Link>
+              </MenuItem>
+            </>
+          )}
         </MenuItems>
       </Menu>
     </div>

peerprep/components/shared/TitleBar.tsx

@@ -1,5 +1,6 @@
 import { cookies } from "next/headers";
 import { NextRequest, NextResponse } from "next/server";
+import { CookieNames } from "@/app/actions/session";
 
 const protectedRoutes = ["/questions/*", "/user/*"];
 const publicRoutes = ["/", "/auth/login/", "/auth/register"];
@@ -27,8 +28,13 @@ export async function middleware(request: NextRequest) {
   }
 
   if (path === "/auth/logout" || path === "/auth/logout/") {
-    let response = NextResponse.redirect(new URL("/auth/login", request.url));
-    response.cookies.delete("session");
+    const response = NextResponse.redirect(new URL("/auth/login", request.url));
+
+    for (const cookieName of Object.values(CookieNames)) {
+      response.cookies.delete(cookieName.valueOf());
+    }
+    // response.cookies.delete("session");
+
     return response;
   }