Develop Secure Apps with NextJS14, Json Web Token & Cookies

Implement a Next.js login API that validates email and password, issues a JWT using a secret and a 30-day expiry, and returns the token in a cookie.

Set a serialized jwt token as a secure http-only cookie in the response header, using strict same-site policy and a 30-day max age in a Next.js 14 app.

Call the login API from the frontend with axios to /api/auth/login, sending email and password as payload, then verify the cookie containing the serialized jwt token.

Secure the dashboard for authenticated users via token or cookie checks and redirect after login using router push; redirect unauthenticated users to login when the cookie is missing.

Create a profile API endpoint to check login status by reading a cookie-based JWT with Next.js, verify the token, and return user data or an unauthorized error.

Create a dashboard layout in Next.js by implementing layout.tsx with a header and a children prop typed as React node, and fetch the user profile via API.

Make a profile API call with axios in a client component, handling errors with try/catch. Use useEffect to redirect to the home page when authentication fails.

Fix the redirect to the login page and prevent dashboard flicker by using a loading state: fetch the profile with useEffect, track loading, and render the dashboard on success.

Describe implementing logout by creating a get logout route that clears the cookie, calls the API logout endpoint with axios, and redirects the user to the login page.

Display the current logged-in user's email by decoding the verify function's result, handle errors if any, and store the user data in state for rendering in the profile view.

Resolve the json error by sending a user object with email from the backend, then update the frontend to display the admin email on the dashboard.

Test and validate the complete functionality of a nextjs 14 app using cookie-based authentication, protected routes, and token handling, including login, logout, and tampering scenarios.

Install mongoose to interact with MongoDB, create a user schema with name, email, password, and timestamps, and register it as a model. Set up MongoDB connection via an environment variable.

Build an API post endpoint to register users by parsing request json for name, email, and password, saving to the database with mongoose, and returning 201 with a success message.

Create a register page by cloning the login page in Next.js, add a name field, call the register API, fix the payload, and verify the new user in the database.

Integrate login with the database using the user model and Mongoose to find a user by email and password, authenticate them, and test the flow without admin credentials.

Fetch the user from the database using the email from the result to access name and email, then display the username and email on the dashboard.