MERN Stack Web Development with Ultimate Authentication

Create a mern auth project with separate client and server folders, bootstrap the React client with Create React App, launch the frontend, and start building the backend API with Postman.

initialize a new server with npm, install express and nodemon, create server.js. define a get /api/signup endpoint that returns json and run on port 8000 with nodemon.

Install essential npm packages like body-parser, cors, dotenv, express-jwt, express-validator, mongoose, and sendgrid to enable authentication, email sending, and MVC structure with models, views (react), and controllers.

Move routes into an organized mvc structure by creating a routes folder and an auth router, wiring Express router as middleware, exporting modules, and applying api paths.

Move routes to a controllers folder, create an auth signup controller exported for reuse, and wire it into routes to set up the future user model.

define a user schema with name, email, password, role, and reset password link; use a virtual field to hash passwords with crypto and salt, and implement authentication methods.

Learn how to connect a MERN server to MongoDB and apply middleware, including Morgan logging, cors handling, and body-parser, while using dotenv for development versus production.

Connect your app to MongoDB by installing locally or using Atlas, then set up Robo 3D and Postman to test APIs and view data.

Connect your server to MongoDB using a URL from env or Atlas, then mongoose.connect with deprecation-safe options, log db status, and prepare validation with express-validator before saving users.

Apply express validator to enforce required signup fields (name, email, password), implement validator middleware, and return informative json errors (422) before saving a user.

Implement a signup flow that validates input, prevents duplicate emails, and defers account creation until the user clicks a verification email link, using a mongoose user model.

Implement an email confirmation workflow using jwt, sending signup data via sendgrid; the client reads the token from the link to finalize server-side user creation, with gitignore protecting secrets.

Learn to send emails with sendgrid by configuring api keys and environment variables for jwt secret, activation, and reset flows, and implement signup and account activation in a mern app.

Learn how to implement email-based signup using a json web token for account activation, sending activation links via SendGrid, validating email, and securely handling token-based user creation.

Implement account activation in a MERN stack app by validating and decoding JWT tokens, creating an activation endpoint, and saving the user to the database after verification.

Implement sign in by validating email and password, authenticating the user, and issuing a JWT token for the client to store for access to protected routes.

Begin front end with React, clean up client scaffold, set up Bootstrap, render a React app while iterating between server and client to implement sign up, sign in, and account activation.

Build a reusable React layout with navigation using children props and bootstrap, and set up routes for home, signup, and sign in to enable a single-page app.

Install React router dom and set up a browser router to manage navigation, defining the home route and future sign in and sign up routes with switch and route.

Create a signup page in a MERN app by building an auth/signup.js component, wiring Axios requests, toast notifications, and exact routes within the layout.

Learn to build a sign up form in React using useState to manage name, email, and password, with a single handleChange, submit handling, and dynamic button text.

Learn to implement a complete signup flow in a MERN app: manage form state, submit via axios to a backend API using environment variables, and handle success and error toasts.

Create a sign in component by adapting sign up code to accept email and password, post to sign in, store token in a cookie and user data in local storage.

Build the activate account component in a MERN app by extracting the token from the URL, decoding it to get the user name, and posting to the backend for activation.

Implement active navigation by using React Router DOM and withRouter to compare the current path name with link targets, applying active styling to home, sign in, and sign up.

Save tokens and user data in cookies and local storage with a js cookie helper. Build helpers.js to set, get, and remove from cookies and local storage and authenticate users.

Describe authenticating sign-in with the authenticate method, storing user data in local storage and cookies, redirecting authenticated users home, hiding sign-in/up links, and implementing sign-out to clear data.

Implement a private route that restricts pages to logged-in users and admins using a private root with React Router Dom. Check authentication via local storage and redirect to sign in.

Extend the private route to enforce admin role. Redirect non-admin users to sign in and route admins to the admin page after login.

Implement role-based redirects in a MERN app by authenticating users, storing data in local storage, and routing to admin or private pages using react-router history push.

Create a backend read route in the mern stack to fetch a user profile by id and populate a form for read and update on admin and private pages.

Protect api endpoints by restricting routes to authenticated users with express jwt middleware that validates a secret and exposes user data via request.user and bearer tokens.

Implement the update user profile endpoint with put /user/update, using sign-in middleware to access request user and validate name and password before saving.

Create an admin middleware to restrict routes to authenticated admins by verifying user role, attaching user data to the request profile, and guarding updates with next in the route flow.

Configure the profile update page by reusing the signup form in a private React page, enabling name and password updates; pre-populate fields from backend responses, with email and role uneditable.

Fix frontend issues by correcting labels, removing unused imports, and updating sign up, sign in, and private components. Prepare a backend request to fetch user information using the updated inputs.

Learn to fetch and prepopulate a user profile on mount using useEffect and axios, handle protected routes with a token, and manage jwt expiry by signing out on 401.

Update user profiles in a MERN app by sending a PUT to user/update with name and password, using token headers, and displaying a profile updated toast while syncing local storage.

Mirror the private profile update for admins using the admin/update endpoint, enable role-based redirects to the admin page, and reuse the same get user information api.

Implement forgot password and reset password flows in the backend by adding validators, creating routes and controller methods, and sending a tokenized reset link via email using SendGrid.

Implement reset password flow by generating a token, storing it in the user model, emailing the reset link, and on use verifying the token to update the password.

Implement the frontend forgot password flow with a React form that posts the email to the API/forgot password endpoint and shows success or error toasts.

Create a reset password client component that reads the token from the url, decodes the user name, and submits the new password to complete the password reset.

Implement Google login in the MERN stack by obtaining the Google client ID, integrating the React Google Login component, and sending the ID token to the backend for verification.

Implement Google login on the MERN stack backend by verifying the ID token with Google auth library, finding or creating the user, and returning a JWT token and user data.