Advanced MERN Stack Authentication

Plan the MERN stack authentication project by outlining the front-end with React and Sass, Redux state, a Node Express back end, testing with Insomnia, and deployment to Versal and Render.

Create a dedicated front end folder and initialize a React app with create-react-app from the terminal. Set up for development in the advanced MERN stack authentication course.

Clean up the React app by removing unused CSS, logos, and web vitals, organize assets into components, pages, and assets folders, reference a styles repo, and start the app.

Explore framework-free styling with custom utility classes in a dedicated index css. See how double-dash utility classes enable quick flex and grid layouts, center alignments, and consistent headings and paragraphs.

Install react-router-dom and related packages, then set up front-end routing using BrowserRouter, Routes, and Route. Create a home component in pages/home and style it with Sass.

Build a header component for the home page with a logo and links, organized in a header folder; implement nav links with active states and a go-home function using useNavigate.

Create a React functional footer component in Footer.js, using a horizontal rule and a gray, flex-centered bar with an all rights reserved message for the homepage.

Build the home component by structuring two sections with hero text and an image, import the login image from assets, and implement register and login buttons.

Create a reusable layout component that wraps header and footer across pages, passing the children prop and applying 80% viewport height, with selective wrapping for login pages.

This lecture guides building the login page for six auth pages, explains CSS modules to avoid style clashes, and introduces a reusable card component to wrap login content.

Build a login component for a MERN stack app, featuring a centered card with a Google login button, a controlled email/password form, and forgot password and register links.

Build a reusable password input component with a visibility toggle for login and registration forms, using dynamic props, stateful show-password logic, and icon buttons.

Build the register component for frontend authentication by reusing the login template, adding name, email, password, and confirm password fields, and wiring form data state and input handling.

Build a password strength indicator within a register component by handling input changes, tracking four conditions with React state (lowercase, uppercase, numbers, special characters, length), and displaying dynamic icons.

Learn to implement a password strength indicator in a React register form by monitoring input with useEffect, using regex for uppercase, lowercase, numbers, and special characters, and length checks.

Create a forgot password component in the MERN app by cloning the login page, adding /forgot, removing the password field, and using an email icon with home and login links.

Develop a reset password component by reusing the forgot password UI, routing a reset token, and adding password and confirm password fields with a reset password button.

Build a login with code page for two-factor authentication using an access code, reusing the forgot password template and configuring the login with code component.

Build and wire the verify account component inside the auth folder, wiring a verification token route, header and footer layout, and a centered account verification section with a primary button.

Builds a profile page and component with a profile card, avatar image, and subscriber role, plus an editable form for name, email, phone, and bio.

Develop a page menu component for the profile page in the user management area, wiring nav links to profile, change password, and users with header styling and active-state inheritance.

Create a standalone change password page by duplicating the profile component, add three password fields for current, new, and confirm passwords, and bind them to form data state.

Build the users component by scaffolding a user lists page and routing, wiring CSS, and adjusting the change password border, while planning a user stats component.

Learn to build a reusable user stats component in a MERN stack app by creating an info box subcomponent with dynamic background color, icon, title, and count, wired via props.

Create a responsive user list with a search box and a reusable search component. Integrate the component using value and onChange props for all users in the table.

Build and refine a user table in the advanced MERN stack course, including serial number, name, email, role, and actions with a change role form.

Build a change role component featuring a form with a select input bound to a user role state and options for subscriber, author, admin, and suspended, plus a check button.

Build a loader component with React Portal to provide a full-screen loader and a page spinner, importing assets and CSS, and render it in a dedicated loader div.

Set up the backend folder for a MERN app by creating server.js, initializing npm, installing express, mongoose, dotenv, body-parser, and cookie-parser, and preparing mongodb connection for insomnia testing.

Create a node server with dotenv, set up gitignore, import express and mongoose, define a home route, connect to MongoDB via a uri from dotenv, and start on port 5000.

Set up and test API routes with insomnia, connect the server to MongoDB, and organize code with an MVC folder structure—models, controllers, roots, and utils—while preparing to create endpoints.

Set up middleware for a MERN app by configuring express.json, body-parser, and cookie-parser. Enable cors with origins and credentials to allow secure front-end back-end requests.

Create and export a mongoose user model by defining a schema with name, email (unique and trimmed), password, photo (default), bio, role, isVerified, and timestamps for MongoDB storage.

Scaffold and wire up the user routes and controller in a MERN app by creating a POST /api/users/register, exporting modules, and integrating the route into the server.

Create a custom error handler middleware for a MERN app that returns a JSON error and a development only stack trace, then export and wire it into the server.

Register a user in mern stack authentication by validating name, email, and password, installing json web token, decrypt js, and express-async-handler, then creating the user.

Learn to generate a jwt token for a new user, use a secret from env, export a token utility, and send the token in an http only cookie during registration.

Hash the user password before saving to the database by using a Mongoose pre-save hook on the user schema, generating a salt and storing the hashed password.

Capture the user agent at registration with the user-agent-js parser to log browser and device data, enabling two-factor authentication when users sign in from new devices.

Create and test a login route by adding a login user function to the user controller, wiring it to login post path, and preparing a test admin with verified status.

Implement a login controller in the mern stack, validating email and password, verifying user existence, comparing passwords, generating a token, and returning it via cookies with user data.

Create a get logout route and logout controller, expire the cookie to log out, export the function, and test the flow with a 200 response and a 'logout successful' message.

Learn to build a protected get user route in a MERN stack, retrieving user data from MongoDB while enforcing login, user-specific access, and admin permissions.

Implement a protect middleware in the midway folder to verify a JWT token from cookies, fetch the logged-in user, and block access for unauthenticated or suspended users.

Build the get user controller using request.user from middleware to find a user by id, return data (excluding password) and respond 404 if not found, with token managed via cookies.

Implement the update user route and controller with a protected patch request, updating name, phone, bio, and photo from the front end, then save and return the updated user.

Implement an admin-only delete user route in a MERN app, protected by admin-only middleware that enforces role-based access.

Protect the delete user operation with an admin-only middleware, fetch the user by id from request params, handle not-found errors, and return a success message when deletion completes.

Fetch all users from the database with a protected get request, sorting by created_at and omitting passwords. Admins and authors may view; only admins may delete.

Create a login status route in a mern stack app that checks the user token in cookies, verifies the jwt, and returns true or false to indicate login state.

Upgrade a user’s role via a post route protected for admins, retrieving by id from the request body, updating the role, saving, and responding with a confirmation.

Create a send email function for a MERN stack app using Node M.A and Node Mila Express Handlebars to build HTML email templates and send via Outlook SMTP.

Implement an automated email route and controller in the mern stack, validate seven required parameters: subject, to, reply_to, template, name, link, from, integrate handlebars templates, and test with insomnia.

Create a Handlebars email template in the backend views folder, use dynamic variables for name and link, and test sending automated emails with console verification.

Create a token model to store verification, reset, and login tokens in MongoDB using Mongoose, associating tokens with user IDs and tracking created and expiration times for secure email-based actions.

Create a route and controller function to send a verification email by generating a crypto token for the user and preparing to save and email it.

Learn to hash the verification token, store it securely in the database, build the verification URL, and send a verification email using a handlebars template in a MERN authentication flow.

Create Handlebars templates for the verification email, copy from tests, customize the verify email, and test sending the email while confirming the token is hashed and stored for verification.

Set up a patch route to verify a user via verification token, hash and check it against the database, then mark the user as verified and return account verification successful.

implement a forgot password route in a MERN stack app by creating password reset email templates and a post route that sends a reset token.

Create a forgot password controller that receives the email, validates the user, generates and hashes a reset token, saves it with 60-minute expiry, and sends a password reset email.

Demonstrates building a reset password route in a MERN app, using a reset token from email, hashing it, locating the user, and updating the password.

Protect the patch route for changing passwords. Validate old and new passwords, verify the old password, save the new one, email a change notice, and require re-login.

Create a change password email template in handlebars for automated notifications, including a dynamic name and reset link.

Implement two-factor authentication for sign-ins from unrecognized devices or user agents, and prepare testing with postman, install Decryptor to encrypt and decrypt tokens, and configure a secret key in env.

Trigger two-factor authentication for new, unregistered user agents by verifying the device against allowed agents, generating and encrypting a six-digit login code, and prompting the user to check email.

Develop and test a send login code route in a MERN stack app, sending a six-digit login code to the user's email using the provided email param and postman integration.

Build the login code sender by extracting the user email, retrieving the user and token, decrypting and validating expiry, and emailing a six-digit access code using a login code template.

Enable login with code by sending the access code and email to the backend to validate two factor authentication and grant access via a login route.

Validate the user email and login code, decrypt the stored token, verify it matches, then register the user agent and issue a session cookie.

Move the google login flow to the front end first, then connect the front end to the back end to build a fully functional application.

Set up Redux Toolkit in a React app, install React Redux, and Axios, create a Redux store and an auth slice with isLoggedIn, and wire the provider for state management.

Set up Redux Toolkit for authentication by configuring env files and an API URL, and define states like is logged in, user, two factor, and loading, with an Axios service.

Set up axios with credentials, and implement a register user flow using createAsyncThunk in Redux, calling the backend register endpoint and handling errors.

Explore handling register responses with extra reducers, define pending, fulfilled, and rejected cases, manage loading and user details, and show toast notifications using createAsyncThunk in a MERN authentication flow.

Implement robust register form validation in a MERN app by preventing paste in the confirm password and validating name, email, and password before dispatching the register action.

Dispatch the register action via use dispatch, select auth state, and navigate to the profile on success; reset flags and test with form data.

Debug a register bug by correcting the origin value and ensuring the frontend sends user data. Implement console logging and a loading state to streamline the registration flow.

Create a redux login flow by posting to the login endpoint, sending email and password, and handling loading, success, and error states with user data updates and a toast.

Refactor the login components to use email and password, validate inputs, dispatch the login action, and navigate to the profile on success, with loading and two-factor authentication.

Use redux logic to log out a user in a MERN stack app by calling the logout endpoint and handling response, loading, error, and success states.

Develop logout logic in the header with an on click, reset state, dispatch logout, and navigate to login; switch the service to get and test by logging in then out.

Implement get login status in Redux logic to fetch true or false from the backend. Update services and extra reducers to handle pending, fulfilled, and error states without user notifications.

Rename the login status function to get login status and apply it in two places via useEffect on the landing page; build a reusable hook to check login state.

Create a custom hook, useRedirectLoggedOutUser, that checks login status and redirects logged-out users with a toast when the session expires, and navigates to a dynamic path.

Protect front-end components by conditionally rendering links based on login status and user role, showing login for guests and admin or author user menus with redux selectors.

Create a dedicated get user profile function and Redux logic to fetch and display the logged-in user's profile from the gets user API endpoint, with loading, success, and error handling.

Add component logic to fetch and display the user profile from Redux, wiring profile state with useEffect, optional chaining, and loading states for a seamless user interface.

Implement redux logic to update user data in the profile component, sending a patch request to the backend with user data, and handle loading, success, and error states.

Update a user's profile by configuring cloud name and upload preset, wiring environment variables, and implementing image change and profile image preview with optional chaining.

Upload the user profile image to Cloudinary, validating JPEG, JPG, and PNG formats, and then save the image URL and profile data to the database using a fetch-based workflow.

Update user profiles by uploading the image to cloud binary and saving name, phone, bio, and photo to MongoDB with a Redux dispatch and a success toast.

Shorten long usernames on the profile page by displaying up to a chosen character limit followed by three dots, using a text-shortening function within the advanced mern stack authentication course.

Set up the send verification email flow with a post api, create a redux slice, and handle success, errors, and backend notifications for user verification.

Explain how the component logic sends verification emails in a MERN stack app, including showing not verified notifications and dispatching Redux actions after user registration.

Develop redux logic to verify a user by building a verification url with a token using string interpolation, and handle pending, success, and error states, exporting the verify user function.

Build the verify user flow by dispatching a verify accounts action with a token from route params and showing a loading spinner during the update.

Implement change password for a logged-in user using redux logic, sending old and new passwords via patch to the change password endpoint, and manage loading, success, and error with toasts.

Build a change password component with old and new password fields, validating matching passwords and old password, dispatching redux, logging out, and redirecting to login with a loading state.

Build an automated email workflow triggered after a password change by creating an email service and a Redux slice with async thunks, pending and fulfilled states, and user messaging.

Implement automated email sending in the front end using a change password flow, creating an email data object with subject, to, reply-to, template, and URL.

Learn to implement forgot password using redux logic in a MERN app: create service, post to /forgot password, and build a slice managing loading, success, and error states.

Implement forgot password flow in the forgot component by validating email, dispatching a forgot password action via redux, and showing a loading spinner and reset email from the backend.

Use redux logic to implement reset password, sending user data and reset token via a patch API call. Manage pending, fulfilled, and failed states to show success or error messages.

Learn to implement reset password component logic in a MERN stack app, including handling password inputs, token via useParams, and navigating to login after a successful reset.

Trace the password reset flow in real time, verify the token and new password with console logs and tests, and fix a frontend payload bug that blocked the reset.

Implement admin-only access to the users page by wrapping navigation with role-based rules and adding a Redux get users thunk to fetch all users from the API.

Learn to fetch and display users in a MERN app: manage user state, guard routes with login redirects, dispatch get users, and render a table with name, email, and role.

Apply delete user functionality in redux logic for the MERN stack authentication course by duplicating actions and issuing a delete request with the user id, then toast the deletion message.

Develop the delete user workflow in the component logic, using a pop up notification to confirm deletion, dispatch a redux action, and refresh the user list after removal.

Develop Redux logic to upgrade a user by duplicating a prior function, sending user data to the upgrade endpoint, and handling pending, fulfilled, and error states with toasts.

Add component logic to upgrade a user’s role in a MERN stack authentication app, wiring the change role form to dispatch an upgrade and send an automated email.

Connect a live search filter to a redux slice to filter users by name or email as you type, wiring a search component to dispatch filter_users with users and query.

Add pagination to the user list in the advanced MERN stack app using the React Page package, set items per page, and render filtered users as current items.

Explore redux logic to compute user stats by counting verified and suspended users from the users array, updating the slice state with reducers and actions.

Build the user stats component logic by wiring redux states for verified and suspended users, dispatching actions to calculate them, and deriving total and unverified user counts.

Implement two factor authentication by sending a login code when a login attempt comes from an unrecognized device, using redux logic and Axios to post login code to user’s email.

Implement component logic in the login form to send an email login code, manage two-factor conditions, dispatch redux actions, and navigate to the login code route.

Master login with code using redux logic in a MERN stack authentication course, sending code and email to the backend, handling loading, is logged in, two-factor state, and errors.

Advance MERN stack authentication by building a login with code component that manages params and email, validates a six-character code, dispatches login with code, and navigates to the profile page.

Add a flow to resend the login code by entering an email and dispatching a send login code action, wiring email receipts and resets.

Configure Google login by creating a cloud project, setting up consent screen and scopes, adding test users, and generating a web OAuth client with localhost origins and backend callback.

implement google authentication in a MERN stack by configuring the google client ID and secret, installing frontend and backend packages, creating google routes, and handling the google login token.

Implement Google login on frontend of a MERN stack by wiring a Google login component and dispatching a login with Google action using the user token, with toasts for feedback.

Implement Google login on the backend by verifying the ID token, extracting payload data, and syncing with MongoDB to register or login users.

Deploy the app by creating separate front end and back end repositories on GitHub, opening an account with render, and pushing all branches from Visual Studio Code.

Deploy the frontend to Vercel by connecting your GitHub repo, configuring environment variables, and monitoring the deployment to publish the app under a Vercel domain.

Deploy the backend to render by connecting your GitHub repository in the render dashboard, configuring environment variables, and setting the build command and the stats command for deployment.

Test the application by logging in with Gmail to verify the front end connects to the back end, fetch users, and confirm the flicker issue no longer appears after login.