
Build a secure, standard MERN stack user authentication system with JWT, using React, Tailwind, Node.js, and MongoDB, including password hashing, email verification, and password reset flows.
Set up a React application for the MERN stack authentication project by creating a client folder with create-react-app, starting the dev server on localhost:3000, and updating src.
Install Tailwind in a React app, generate tailwind.config.js and postcss.config.js, and update the index.css to enable Tailwind styles and verify with Tailwind IntelliSense.
Install essential npm modules such as react-router-dom, axios, and react-hot-toast, set up a pages and components folder, and configure routes for home, login, and register before starting the dev server.
Build a MERN stack login and register UI with a simple centered white form, capturing email, password, and confirm password using useState, and applying initial front-end and back-end logic.
Covers managing registration form states (name, email), duplicating them for login, styling with tailwind theming using primary and secondary colors, and wiring onChange and onClick handlers for authentication.
Establish a MongoDB connection in Node.js with mongoose by centralizing credentials in a data file and importing them, then configure mongoose.connect with use new url parser and log success.
Build basic login and registration APIs using express and mongoose, create a user model with name, email, password and is_verified default false, and handle 200/400 responses for registration and login.
Connect React and Node.js to integrate frontend and backend, test login and registration APIs, configure a proxy to run on localhost 5000, and prepare for password hashing with MongoDB.
Implement email verification by creating a token model, generating encrypted tokens tied to a user, and sending a verification link. Validate and delete the token upon verification.
MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js frontend framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and any front-end JavaScript framework that can work.
MongoDB - document database
Express(.js) - Node.js web framework
React(.js) - a client-side JavaScript framework
Node(.js) - the premier JavaScript web server
Authentication is the act of proving an assertion, such as the identity of a computer system user. In contrast with identification, the act of indicating a person or thing's identity, authentication is the process of verifying that identity.
Authorization specifies access rights/privileges to resources, which is related to general information security and computer security, and access control in particular. More formally, "to authorize" is to define an access policy
In this course, we will learn the following topics
Basic Authentication
Password hashing / encryption / decryption
Email verification functionality
Forgot password functionality
JWT authentications
Working with Protected Routes and Public Routes
Handling API requests with auth middlewares
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.