For Next.js authentication, I recommend using NextAuth.js (now called Auth.js). It provides:
For a simpler alternative, Better Auth is gaining popularity with its straightforward API and built-in email/password support.
You can protect API routes using the getServerSession helper:
getServerSession from next-authFor App Router, use the auth() helper from your NextAuth config. It works in Server Components, Route Handlers, and Middleware.
For middleware-based protection, create a middleware.ts file and use the withAuth wrapper to protect entire route patterns.
The middleware approach is clean and centralized. Create a middleware.ts in your project root:
Use withAuth from next-auth/middleware and export a config object with a matcher array to specify which routes to protect. For example, matcher: ["/dashboard/:path*", "/api/protected/:path*"].
This automatically redirects unauthenticated users to the sign-in page. You can also add custom logic in the authorized callback to check for specific roles or permissions.
Chat message thread with rich formatting, copy and thumbs-up/down action buttons on AI messages, and time-grouped message sections. Features hover-revealed action bars and smooth animations.
chat22
A two-pane messaging panel: a selectable conversation list with unread dots on the left, and the chosen thread on the right with member and staff bubbles, timestamps, and a composer row.
chat11
Full-featured chatbot window with message thread, AI and user avatars, timestamp display, typing indicator, and rich input area with send button. Suitable as the primary chat experience.
chat4
Sophisticated AI prompt input area with auto-expanding textarea, attachment and image upload buttons, model selector, and a grid of contextual prompt suggestion cards. Inspired by ChatGPT and Claude home screens.
chat23
A messaging section pairing a light heading, a hairline table of response figures, and two actions with an image tile that floats a live conversation thread.