This content originally appeared on DEV Community and was authored by Hidayt Rahman
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!
This content originally appeared on DEV Community and was authored by Hidayt Rahman

Hidayt Rahman | Sciencx (2023-04-25T13:44:39+00:00) Handle protected page routes in NextJS using NextAuth. Retrieved from https://www.scien.cx/2023/04/25/handle-protected-page-routes-in-nextjs-using-nextauth/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.