What’s the best way to add authentication to a Next.js app?

The “best” way depends on your app’s needs, but for most Next.js apps the safest, easiest default is:

Recommended approach

Use a mature auth library/provider and store sessions in secure, HTTP-only cookies.

Common choices:

• Auth.js (NextAuth) — best if you want a flexible, self-hosted solution
• Clerk — best if you want the fastest developer experience and polished UI
• Supabase Auth — good if you already use Supabase
• Firebase Auth — good if you’re already in the Firebase ecosystem
• Custom auth — only if you have a strong reason

---

My default recommendation

If you’re building a standard Next.js app:

Option 1: Auth.js

Best balance of control, security, and portability.

Why:

• Supports OAuth, email/password via credentials, magic links, etc.
• Works well with App Router
• Handles sessions securely with cookies
• Easy to protect server components, route handlers, and middleware
• You own the logic and can switch providers more easily

Option 2: Clerk

Best if you want to move fast.

Why:

• Very easy setup
• Great UI components for sign-in/sign-up
• Handles lots of auth edge cases for you
• Strong DX, especially for SaaS apps

---

Security best practices

No matter which tool you use:

1. Prefer server-side session auth over localStorage tokens

• Use HTTP-only cookies
• Avoid storing JWTs in localStorage if possible
• This helps protect against XSS token theft

2. Protect routes on the server

• Use middleware for broad route protection
• Check auth in server components, route handlers, and server actions
• Don’t rely only on client-side redirects

3. Use short-lived sessions and refresh safely

• Keep sessions/refresh tokens secure
• Rotate tokens when appropriate

4. Add CSRF protection if using cookie-based auth for state-changing requests

• Many auth libraries handle this for you
• Important for POST/PUT/DELETE routes

5. Hash passwords properly if you support credentials login

• Use Argon2 or bcrypt
• Never store plaintext passwords

6. Use email verification and password reset flows

• Especially for SaaS and user accounts
• Prevents account abuse and improves security

---

Typical implementation pattern in Next.js

If using Auth.js:

• Configure auth in a central file
• Use a session cookie
• Protect pages via server-side checks
• Use middleware for route groups like /dashboard
• Add OAuth providers or credentials as needed

Example flow:

• User signs in
• Server sets secure session cookie
• Protected page reads session on the server
• Redirect to /login if no session

---

When to choose what

• Simple SaaS / dashboard: Auth.js or Clerk
• Need social login + magic links + fast setup: Clerk
• Already using Supabase: Supabase Auth
• Already using Firebase: Firebase Auth
• Need full custom control: Auth.js
• Enterprise / SSO / org management: Clerk, Auth0, or similar

---

Bottom line

If you want the best general-purpose answer for Next.js:

Use Auth.js (NextAuth) with secure, HTTP-only cookie sessions, and protect routes on the server.

If you want the easiest setup:

Use Clerk.

If you want, I can give you:

1. a recommended auth stack for your app type, or
2. a step-by-step setup guide for Next.js App Router with Auth.js or Clerk.