For this article, we will use the middleware technique.
To use this functionality, you must have at least NextAuth.js 4.2.0
and Next.js 12
installed.
Configuration
Let's configure the server by adding a new environment variable to the .env.local
file.
NEXTAUTH_SECRET=addAnythingYouLike
Create a Middleware
Create a file named middleware.js
or .tsx
in the src
folder.
Note: if you don't have
src
folder create themiddleware.js
on the root folder
Lets add code for middleware
Protect all routes
Use the piece of code below to make all pages protected.
export { default } from "next-auth/middleware";
Protect selective routes
Lets protect profile and posts route with the help of matcher
. You can put the route based on your requirements
export { default } from "next-auth/middleware";
export const config = { matcher: ["/profile", "/posts"] };
Protect routes inside directory
Lets protect all routes inside dashboard folder.
export { default } from "next-auth/middleware";
export const config = { matcher: ["/dashboard/", "/dashboard/:path*"] };
Read more about matcher and NextAuth Middleware
Thats It!
Happy Coding!
Top comments (1)
thanks, Protect routes inside directory saved my time