Login, Registration and Authentication with React & Next.js

Create and expose api routes in a Next.js app using the app directory, building a get endpoint and returning a json response such as the current time.

Learn how to obtain a Mongo Atlas connection string for cloud MongoDB, set up a database user, and use environment variables to secure credentials in login and authentication flows.

Create a root config.js for environment variables, import it in next.config.js, ignore the file in git, and export dbUri for MongoDB connections via process.env.dbUri.

Connect to MongoDB using Mongoose by creating a db connect module, wiring in the db uri from env, and reuse the connection across serverless api routes for Vercel deployments.

Create a user model and schema in models folder using mongoose and validator. Include name, email, password, role, image, and reset code expiry for register and login with next auth.

implement a next.js register api route that hashes passwords with bcrypt and saves new users to mongodb, handles errors with next response, and tests the endpoint with postman.

Create a register page in a Next.js app, managing name, email, and password with the use state hook, and submit to the backend using an async handle submit.

Build a register form on the login page with name, email, and password fields, wired to state and onchange, then submit to the backend with a loading-aware button.

Learn to implement a register API request in a Next.js app by configuring env API URLs, posting JSON with fetch, and handling responses with toast notifications and login routing.

Create a login page with email and password using next-auth signIn, handle errors with toast, disable redirect, and prepare server configuration for next-auth authentication.

Configure next auth with a credentials provider, creating an auth options file, wiring a database lookup and bcrypt password check, and securing sign-in redirects with a secret.

Wrap your application with the session provider from next-auth/react to access the logged-in user via use session, and use the authenticated status to render login or sign-out options.

Learn to display the current user status with a ternary authenticated check, show logout or login/register, and add a dashboard link with the user's name while wiring next auth logout.

this lecture demonstrates how to implement a default loading page in a Next.js app by adding app/loading.js to show a centered loading text during navigation and authentication status.

Learn to customize the 404 page in next.js by creating a not found file in the root directory and adding your own message to replace the default not found page.

Protect the user dashboard with middleware using next-auth, guarding all /dashboard paths and redirecting unauthenticated users to the login page.

redirect the user back to the page they attempted to access by reading the callback URL from the URL search params and routing to that page, or home if absent.