fix: add protected routes with auth middleware (#25)

Author: stabldev

src/app/(app)/_components/header/user-dropdown.tsx

@@ -16,10 +16,18 @@ import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 
 export default function UserDropdown() {
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
   const { data: session } = useSession();
   const { username, name, email, image } = session?.user ?? {};
 
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  async function handleLogout() {
+    try {
+      setIsLoggingOut(true);
+      await signOutAction({ redirectTo: '/login' });
+    } finally {
+      setIsLoggingOut(false);
+    }
+  }
 
   return (
     <DropdownMenu>
@@ -45,14 +53,7 @@ export default function UserDropdown() {
           </DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem
-          className="cursor-pointer"
-          disabled={isLoggingOut}
-          onClick={async () => {
-            setIsLoggingOut(true);
-            await signOutAction({ redirectTo: '/login' });
-          }}
-        >
+        <DropdownMenuItem className="cursor-pointer" onClick={handleLogout} disabled={isLoggingOut}>
           Log out
           <DropdownMenuShortcut>
             {isLoggingOut ? (

src/middleware.ts

@@ -1,6 +1,22 @@
-export { auth as middleware } from '@/auth';
+import { auth } from '@/auth';
+
+const PROTECTED_ROUTES = [
+  { path: '/new', exact: true },
+  { path: '/@', exact: false },
+];
+
+export default auth((req) => {
+  const { pathname } = req.nextUrl;
+  const isProtected = PROTECTED_ROUTES.some(({ path, exact }) =>
+    exact ? pathname === path : pathname.startsWith(path),
+  );
+
+  if (!req.auth && isProtected) {
+    const loginUrl = new URL('/login', req.url);
+    return Response.redirect(loginUrl);
+  }
+});
 
-// optionally, don't invoke middleware on some paths
 export const config = {
   matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
 };