How can I implement protected routes in Next.js with NextAuth?

[PatrickMeirelles]

Summary

Hi everyone,

I'm using Next.js 14 with the App Router and NextAuth.js for authentication.
I want to restrict access to certain pages so that only logged-in users can view them, and redirect unauthenticated users to the login page.

Here's what I have so far:

⁠ jsx
// app/dashboard/page.jsx
export default function DashboardPage() {
return

Private Dashboard

;
}
 ⁠

I have NextAuth set up, and the login works fine, but I'm not sure how to protect the ⁠ /dashboard ⁠ route.

What's the recommended way to do this in the App Router?

Additional information

No response

Example

No response

[KhaledSaeed18]

For protecting routes with NextAuth.js in Next.js 14 App Router, use middleware:

Create middleware.js in your root directory:

import { withAuth } from "next-auth/middleware"

export default withAuth({
  callbacks: {
    authorized: ({ token }) => !!token,
  },
  pages: {
    signIn: "/login", // Custom login page (optional)
  },
})

export const config = {
  matcher: ["/dashboard/:path*"] // Add all protected routes here
}

This approach:

• Handles redirects at the server level before pages render
• Automatically redirects unauthenticated users to your custom /login page
• Provides better performance and security compared to client-side checks

Note: Without the pages.signIn config, it defaults to /api/auth/signin. With it, you can use your custom login page.

More info: NextAuth.js Middleware Docs