1. Protect routes<\/h3>\n\n\/\/ middleware.ts \nexport const config = {\n matcher: ['\/((?!api|_next\/static|_next\/image|assets|images|styles|icons|favicon.ico|sw.js).*)']\n}\n\nexport async function middleware (request: NextRequest) {\n\n const cookie = request.cookies.get('accessToken')?.value ?? ''\n\n const token = await decrypt(cookie);\n\n if (!\/^\\\/auth\\\/\/.test(request.nextUrl.pathname) && !token) {\n console.log('redirecting to login')\n return NextResponse.redirect(new URL('\/auth\/login', request.url))\n }\n \n if (\/^\\\/auth\\\/\/.test(request.nextUrl.pathname) && token) {\n return NextResponse.redirect(new URL('\/', request.url))\n }\n\n return NextResponse.next()\n\n}<\/code><\/pre>\n\nThe code block above shows how middleware can be implemented in Next.js to protect application routes. In this case, the middleware checks if a cookie called ‘accessToken’ exists in the user’s browser.<\/p>\n\n
If the cookie exists and is encrypted, the user can continue browsing the application. If the cookie does not exist or is not encrypted, the middleware redirects the user to the login page.<\/p>\n\n
This middleware also verifies that if a user is already authenticated (i.e. has a token), they cannot access authentication routes (such as login), redirecting them to the main page instead.<\/p>\n\n
2. Cookie Encryption<\/h3>\n\n\/\/ middlewares\/auth\/token.ts\n'use server';\n\nimport { JWTPayload, SignJWT, jwtVerify } from \"jose\";\n\nconst COOKIE_SECRET_KEY = 'nPt1cx%VyphXrz8waX#2*KW%ZoCI1S8oymrv%78Mnr'; \/\/ Change this to your own secret key come from .env file\nconst key = new TextEncoder().encode(COOKIE_SECRET_KEY);\n\nexport async function encrypt(payload: JWTPayload, expires: Date) {\n\n return await new SignJWT(payload)\n .setProtectedHeader({ alg: \"HS256\" })\n .setIssuedAt()\n .setExpirationTime(new Date( expires ))\n .sign(key);\n}\n\nexport async function decrypt(input: string): Promise<JWTPayload | null> {\n\n try {\n const { payload } = await jwtVerify(input, key, {\n algorithms: [\"HS256\"],\n });\n return payload;\n \n } catch (error) {\n return null;\n }\n}<\/code><\/pre>\n\nThis code block shows how to encrypt and decrypt a cookie in Next.js to keep user information secure. The encrypt<\/code> method takes a payload and an expiration date as arguments, creates a new JWT, and signs it. The decrypt<\/code> method takes an input string, verifies the JWT, and returns the payload if the verification is successful. On error, it returns null. The encryption key COOKIE_SECRET_KEY<\/code> must be a secure and unique string.<\/p>\n\n