JWT Authentication using MERN Stack

Explore what json web token (jwt) is, how authentication and authorization differ, and how jwt uses header, payload, and signature to securely authenticate users in a MERN stack app.

Demonstrates building a MERN stack authentication project using JWT for secure login, register, and dashboard with form validation and email verification. Shows deploying the app to Heroku and token-based security.

Set up the frontend for a MERN stack JWT authentication project using React and the npx create-react-app command, then run and preview locally at localhost 3000.

Initialize the backend with npm init to create package.json, set server.js as the entry point, and install express. Start the node server on port 5000, with nodemon for automatic restarts.

Connect your MongoDB database to the MERN project by creating a config/db.js, using dotenv to manage environment variables, and wiring mongoose.connect with a stored MongoDB URI.

Create a database in MongoDB Atlas, set up a user and access rules, install Mongoose, and connect your MERN app to the database using the application URL or MongoDB Compass.

Learn to set up front-end pages (login, register, dashboard). Install react-router-dom and configure routes with browser router, routes, and route elements to navigate between pages.

Create a responsive login page for a mern app using bootstrap via cdn, with a login component, a login image, and a bootstrap card in a two-column layout.

Design and implement a login page with email and password fields, required validation, autofocus, a bootstrap-based layout, plus a register link and a custom button style.

Creates a register page in a MERN stack app, mirroring the login page with a centered card, image, and a form for name, email, address, password, and confirm password.

Learn to implement secure front-end form validation using React Hook Form in a MERN app, including name and password rules, email pattern, and real-time error messages.

Create a user model in the backend by defining a Mongoose schema with fields name, email, password, and is verified (default false), plus timestamps.

Register a user on the backend in a MERN stack app using a model–view–controller setup, with an auth route and a register user controller handling the database save.

Registering a user from the frontend validates password confirmation and collects user, email, and password data. It posts to /auth/register via axios with a proxy, handling responses and errors.

Implement login in a mern stack app by creating the login route and login user controller, validating email and password, and posting to /auth/login with axios and useState.

Hash passwords with bcrypt js by generating a salt, hashing the password, and storing the hashed value in the database on the backend for secure authentication.

Learn how to implement secure login by hashing passwords with bcrypt, comparing user input to the stored hash, and validating credentials using findOne in a MERN stack setup.

Style and replace default alerts with toastify in a MERN stack app, showing toast notifications for login and registration, customized by position, type, and backend messages.

Learn why storing credentials in local storage is insecure and how JWT tokens enable secure login with automatic redirects to home or dashboard in a MERN stack app.

Implement json web token authentication in a MERN app by generating a token with user id and email, setting a 30-day expiry, and sending it to the frontend.

Implement public and protected routes using JWT tokens and local storage, guiding navigation between login, register, and dashboard pages with React Router DOM to secure the home page.

Learners build a responsive MERN dashboard that decrypts user data from a JWT token to display name and email, and includes a password update form and logout feature.

Create an auth middleware to verify the json web token from the authorization header and extract the user data. Test with postman to verify the decrypted user data.

Decrypt token to reveal user data on the frontend, fetch the name and email via axios using a bearer token stored in local storage, and display them in the dashboard.

Implement a logout function tied to the logout button that clears local storage data, navigates to home page, and validates the logout by removing the token and allowing login again.

Implement a backend update password flow in a MERN app: post route, verify current password, hash new password with bcrypt (15 salt rounds), and update by ID.

Create a frontend update password form with use form validation, enforcing rules (min eight chars, number, uppercase, lowercase, special), validate current vs new passwords, post with axios, and show toasts.

Master email verification in a MERN stack JWT authentication app using nodemailer. Set up a Gmail transporter, app passwords, and send verification mails after user registration.

Explore how to implement email verification in a MERN stack app by hashing and storing a verify token, sending a HTML verification email, and validating the token via a route.

Create a backend verify mail route that reads the token, updates the user's isVerified to true in MongoDB, and deletes the token.

Learn how to implement front-end email verification in a MERN app. Create a verify mail page using react router params, axios, and toast notifications for success or error.