An Interest In:
Web News this Week
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
Handle protected page routes in NextJS using NextAuth
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!
Original Link: https://dev.to/hidaytrahman/handle-protected-page-routes-in-nextjs-using-nextauth-4b69
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To