How do you handle authentication in a Next.js app?

Authentication in Next.js combines several pieces to protect routes and manage user sessions.

NextAuth.js (now Auth.js) is the most popular solution. It handles OAuth providers (Google, GitHub), credentials, sessions, and tokens. Set it up in app/api/auth/[...nextauth]/route.ts, configure providers, and use getServerSession in Server Components or useSession in Client Components.

Middleware (middleware.ts at project root) intercepts requests before they reach your pages. It's perfect for protecting routes: check for a valid session and redirect to login if absent. Runs on the edge, so keep it lightweight.

For Server Components, call getServerSession() to access the current user. This runs on the server, never exposes session details to client code, and can fetch user-specific data directly.

Client Components use the useSession() hook from a SessionProvider. Session data is available but be aware it's on the client—don't include sensitive information.

Role-based access: extend your session type to include roles, check them in middleware for route-level protection, and in components for feature-level access control.

For simpler needs, you can use JWTs stored in cookies with jose for verification and middleware for protection, skipping NextAuth entirely. But NextAuth handles many edge cases you'd otherwise implement yourself.