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
srcfolder create themiddleware.json 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.