add middleware

Author: simbayippy

peerprep-fe/src/components/navbar/Navbar.tsx

@@ -13,7 +13,7 @@ import {
 import Avatar, { genConfig } from 'react-nice-avatar';
 
 export default function Navbar() {
-  const { isAuthenticated, logout, user } = useAuth();
+  const { isAuthenticated, logout, user, isLoading } = useAuth();
 
   // Generate avatar config based on user's username
   const avatarConfig = user ? genConfig(user.username) : undefined;
@@ -31,52 +31,55 @@ export default function Navbar() {
           <Link href="/match" className="text-gray-300 hover:text-white">
             Match
           </Link>
-          {isAuthenticated ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="relative h-8 w-8 overflow-hidden rounded-full p-0"
-                >
-                  {avatarConfig ? (
-                    <div className="h-full w-full scale-x-[-1] transform">
-                      <Avatar
-                        style={{ width: '100%', height: '100%' }}
-                        {...avatarConfig}
-                      />
-                    </div>
-                  ) : (
-                    <UserCircle className="h-6 w-6 text-gray-300" />
-                  )}
-                  <span className="sr-only">Open user menu</span>
+          {!isLoading &&
+            (isAuthenticated ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="relative h-8 w-8 overflow-hidden rounded-full p-0"
+                  >
+                    {avatarConfig ? (
+                      <div className="h-full w-full scale-x-[-1] transform">
+                        <Avatar
+                          style={{ width: '100%', height: '100%' }}
+                          {...avatarConfig}
+                        />
+                      </div>
+                    ) : (
+                      <UserCircle className="h-6 w-6 text-gray-300" />
+                    )}
+                    <span className="sr-only">Open user menu</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem disabled>
+                    <span className="font-semibold">Hi {user?.username}</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link href="/profile" className="w-full">
+                      Profile
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link href="/settings" className="w-full">
+                      Settings
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={logout}>
+                    <LogOut className="mr-2 h-4 w-4" />
+                    <span>Sign out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <Link href="/signin">
+                <Button className="bg-blue-500 hover:bg-blue-600">
+                  Sign In
                 </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem disabled>
-                  <span className="font-semibold">Hi {user?.username}</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link href="/profile" className="w-full">
-                    Profile
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link href="/settings" className="w-full">
-                    Settings
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={logout}>
-                  <LogOut className="mr-2 h-4 w-4" />
-                  <span>Sign out</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : (
-            <Link href="/signin">
-              <Button className="bg-blue-500 hover:bg-blue-600">Sign In</Button>
-            </Link>
-          )}
+              </Link>
+            ))}
         </div>
       </div>
     </nav>

peerprep-fe/src/middleware.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const authToken = request.cookies.get('auth_token')?.value;
+  const isAuthPage =
+    request.nextUrl.pathname === '/signin' ||
+    request.nextUrl.pathname === '/signup';
+
+  if (authToken && isAuthPage) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/signin', '/signup'],
+};