DEV Community: Joshua Medina

A Guide to Setting Up Passport.js Google Strategy with PostgreSQL, Express, React, and Node.js

Joshua Medina — Mon, 28 Aug 2023 23:34:17 +0000

The purpose of this article is to provide the reader with a quick guide to setting up Passport.JS Google Strategy (OAuth2) with their React frontend and PostgreSQL backend to maintain a user session and authentication. While recently working on my latest web application, I noticed there are very few articles or videos that guides a developer on how to implement Passport specifically with React and PostgreSQL. We will use pg-pool to manage the connection between our express backend and our database. This article assumes the reader has a basic understanding of React and Express, and has already setup their credentials with Google Developers Console.

Getting Started

Once you have created your react app, and established your express server, cd to your root folder for your server (I named mine 'server') open your terminal and run this command to install the required packages:
npm install passport, passport-google-oauth20, pg, express-session
Additionally, you may want to install 'cors' to assist with any cors-error messages you might get, and 'dotenv' to establish your environment variables you don't want accessible to the public:
npm install cors, dotenv.

Backend

Setup & Initialization

DOTENV

After installing the required packages, let's setup our 'dotenv' file. At the top-level of our server, create a dotenv file and name it like so: .env. Make sure to include this file in your .gitignore file. This is where we will store our sensitive information. Inside this file should be:

server>.env

CLIENT_ID="FROM YOUR GOOGLE DEVELOPERS CONSOLE"
CLIENT_SECRET="FROM GOOGLE DEVELOPERS CONSOLE"
CLIENT_CALLBACK_URL="FROM GOOGLE DEVELOPERS CONSOLE"
CLIENT_URL="URL of your frontend. i.e. localhost:3000"
COOKIE_SECRET="ANY STRING YOU WANT. USED TO VERIFY COOKIE CREDENTIALS"
NODE_ENV="production"
DB_USER="name of user in your PostgreSQL database: normally defaults to 'postgres'"
DB_PASSWORD="The password you established for your database. You might not have set one up"
DB_HOST="The name of the host domain: i.e., localhost"
DB_PORT="The port your database uses: normally defaults to '5432'" **This is NOT the port your server 'listens' on**
DB_NAME="The name you have given your database"

Whenever we need to use a variable from this file, we will require it in like so: require("dotenv").config();

PG-POOL

Next we will setup our connection to our database using the variables in our dotenv file. I created a folder called 'db' then a file within called 'index.js', but you may use whatever you like. Establish your pool connection like so:

server>db>index.js

require("dotenv").config();
const { Pool } = require("pg");

const pool = new Pool({
  database: process.env.DB_NAME,
  port: process.env.DB_PORT,
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
 });

module.exports = pool;

Passport Google Strategy Setup

Next, create a file to hold our setup for Passport (I named mine 'auth.js'). This file will get fairly large fairly quick depending on the information you would like passport to maintain regarding your user. For the purposes of this article, I will keep it as simple as possible. Keep in mind you may need to adjust some variables to better suit your needs. At the top of the file, require in the following:

server>auth.js

const passport = require("passport");
const { Strategy: GoogleStrategy } = require("passport-google-oauth20");
require("dotenv").config();
const pool = require("./db/index.js");

You may want to 'require' in any helper functions you'd like to use to further authenticate a user to your database, such as checking if the user google email is already registered with your app. Next, still inside 'auth.js', we will create a new instance of 'passport' and 'GoogleStrategy':

server>auth.js
//---required in variables---//

passport.use(
  new GoogleStrategy(
    {
     clientID: process.env.CLIENT_ID,
     clientSecret: process.env.CLIENT_SECRET,
     callbackURL: process.env.GOOGLE_CALLBACK_URL,
    },
    async(accessToken, refreshToken, profile, done) =>{
     const userData = profile._json;
     let user = {};
     try {
      const currentUserQuery = await pool.query("SELECT * FROM users WHERE google_id = $1", [userData.sub]);
      if(currentUserQuery.rows.length > 0){
      user = {
       user_id: currentUserQuery.rows[0].user_id,
       username: currentUserQuery.rows[0].username,
       };
      } else {

Quick explanation of what's happening in this first portion of the strategy. We initialized a new GoogleStrategy, passed in our credentials, then began our async function, which takes 4 parameters: accessToken, refreshToken, profile, done. We then grabbed the information from the google response and stored it in a variable called userData. We created a variable called user and set it equal to an empty object. We did this so we could determine what information to store in session. We then queried our database to determine if the user is already registered and, if so, store in our 'user' object the information we want kept in session: user_id, username. Let's continue where we left off, our else logic:

//---Continuing logic---//
} else {
  const newUser = await pool.query("INSERT INTO users (username, email, firstName, lastName, img, googleID)
VALUES ($1, $2, 3$, $4, $5, $6) RETURNING user_id, username", [userData.name, userData.email, userData.given_name, userData.family_name, userData.picture, userData.sub]);
  user = {
   user_id: newUser.rows[0].user_id,
   username: newUser.rows[0].username
  }
}
done(null, user);
} catch (error) {
  done(error, false, error.message)
  }
 }
));

In this portion of our logic, we're stating that if the user is not already in our database, to insert their information and return only the information we want stored in session, again: user_id, username. done(null, user) is a callback function passport uses to determine when a block of logic is complete, whether from error or otherwise. The first parameter is used if there is an error, the second parameter is used to store the session information. Next, we have to serialize and deserialize. Still inside the same file, under passport.use:

//---Continuing from previous code block---//
passport.serializeUser((user, done) => {
  done(null, user);
});

passport.deserializeUser((user, done) => {
  done(null, user)
});

This is a simplified call for serialization and deserialization of user. NOTE: Passport stores in session whatever is contained in the deserializeUser done() callback function as req.user. So if you want to update your session object, here is where it must be done.

Server.js

Now that we have setup pool, dotenv, and passport, we can move onto our server's main file (I named mine server.js). First, we will require in the needed modules:

server>server.js

const express = require("express");
const session = require("express-session");
const cors = require("cors");
const passports = require("passport");
require("dotenv").config();
require("./auth.js")

Next, we'll initialize, then utilize a router. NOTE: The order in which we initialize our packages (express, session, passport, etc.) is important. Still within server.js:

server>server.js

//---required modules---//

const app = express();

app.use(
 cors({
  credentials: true,
  origin: process.env.CLIENT_URL,
 })
);

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static("public"));

app.use(
 session({
  secret: [process.env.COOKIE_SECRET],
  cookie: {
   secure: process.env.NODE_ENV === "production" ? "true" : "auto",
   sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
   maxAge: 30 * 24 * 60 * 60 * 1000,
  },
  resave: false,
  saveUninitialized: false,
 })
);

app.use(passport.session());
app.use(passport.authenticate("session"));

const authRouter = require("./routes/authRouter.js);
app.use("/auth", authRouter);

app.listen(8080, () => {
 console.log("Listening on port: 8080")
};

Setting up Authentication Route

In the previous section, at the end of the code block, we setup a route to handle "/auth". Now we will setup the actual router. We could have done everything inside our server.js file, but best practices dictate we maintain a separation of concerns. I created a folder called routes, then created a file named 'authRouter.js'. You may call it whatever you like.

server>routes>authRouter.js

const express = require("express");
const router = express.Router();
const passport = require("passport");
require("dotenv").config();

router.get("/google",
 passport.authenticate("google", { scope: "profile", })
);

router.get("/google/callback", 
 passport.authenticate("google", { session: true }), 
 (req, res) => {
  res.redirect(`${process.env.CLIENT_URL}`);
});

module.exports = router;

Frontend

Login Component

For simplicities sake, I will just use a very basic login component that returns a <div> with a <button>. You will need to provide your own styles, and imports as your app requires. Your environment variables may be different as well. I created a folder in my 'src' folder named 'pages' and a react file named 'Login.js'. The baseApiURL will be where your server is 'listening'. In this article, the server is listening on localhost:8080.

client>src>pages>Login.js

import { baseApiURL } "../App.js";

export default function Login(){

const handleOAuth = () => {
 window.open(`${baseApiURL}/auth/google`, "_self");
};

return (
 <div>
  <button onClick={handleOAuth}>
   Login with Google
  </button>
 </div>
 )
};

When the user clicks the button, a new window will appear (the reason for "_self"), asking the user to login with their google credentials. If they accept, they will be redirected according to the redirect we setup in our authRouter.

Managing Authentication

You now have everything setup for Google Authentication using Passport! Last thing to remember: whenever your frontend React app needs to verify the authentication of the user, whether in a GET or POST request, you must include credentials: "inlcude", like so:

//---POST Route---//

fetch(`${baseApiURL}${routeNeedingAuth}`, {
 credentials: "include",
 method: "POST",
 headers: {
  "Content-Type": "application/json",
 }, 
 body: JSON.stringify("DATA BEING SENT"),
})

//---GET Route---//

fetch(`${baseApiURL}${routeNeedingAuth}`, {
 credentials: "include",
})

Conclusion

Remember:

Your web application's needs and variables may vary.
The order in which you initialize the modules in your server matters.
Routes needing authentication after the user has logged in requires credentials: "include",

If you would like a visual guide, checkout this YouTube Playlist by Lester Fernandez. He does a phenomenal job explaining the steps. Happy Coding!

Express Middleware as the Nightclub Bouncer: Ensuring VIP Access to Your App

Joshua Medina — Sat, 05 Aug 2023 09:26:57 +0000

Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle.
-Expressjs.com

Welcome to the blog post where we're going to unravel the intriguing world of middleware and how it transforms into the "bouncer" of your web application! Imagine your web app is like a bustling nightclub, and you, as the app owner, want to ensure that only VIP guests (authenticated users) get access to the exclusive party. That's where middleware steps in, just like a vigilant bouncer stationed at the club's entrance. In this post, we'll explore how middleware can serve as a security guard, managing who gets in (authenticated users) and who gets turned away (unauthorized visitors).

What is Middleware?

In the context of web development using frameworks like ExpressJS, middleware is a special type of function that sits between the incoming request from the client and the response sent back by the server. It has the power to intercept and process the request before it reaches the main route handler. This clever functionality allows developers to add extra features, security measures, or custom logic to their applications without cluttering the main code. This will also help developers maintain DRY code.

Authentication Middleware

Authentication middleware is used to check whether a user is authenticated (logged in) before granting access to certain routes or resources. When a user makes a request to a protected route, the authentication middleware is executed before the route handler. The middleware examines the request to determine whether the user is authenticated. If the user is authenticated, the middleware allows the request to proceed to the route handler. If the user is not authenticated, the middleware may redirect the user to a login page, return an error response, or take other appropriate actions. Before we look at actually creating the authMiddleware, we need to briefly discuss the different authentication strategies.

Authentication Strategies

Although there are several strategies to use when authenticating, such as OAuth2, or Passport, for simplicity we will use the express-session (session). Please refer to the link on how to properly setup session in your environment.

Create Authentication Middleware

First, we need to create a middleware function that will handle the authentication logic. The middleware function typically checks for the presence of authentication data, in our case: session. As I quoted from expressjs.com earlier, middleware functions have access to the req, res objects as well as the next function. The next function (called 'next' by convention)(expressjs.com) is a callback provided by Express that allows a middleware function to pass control to the next middleware or route handler in the chain. When called, it passes the request to the next function and continues the execution flow through the middleware stack. If next is not called within a middleware, the request might hang, and subsequent middleware or route handlers won't be executed.

// in a separate location: ../middlewares/authentication.js

const authMiddleware = (req, res, next) => {
 // Check if the user has an active session
 if (req.session && req.session.user) {
  next();
 } else { 
  //User does not have an active session, redirect to login page
  res.redirect('/login');
 }
};

module.exports = authMiddleware;

This middleware checks if the user has an active session (indicating that they are authenticated) before allowing access to protected routes. If the user doesn't have an active session, they are redirected to a login page. In this example, we assume that the req.session.user object contains user information after a successful login. When the user logs in with the correct credentials, we would set req.session.user with the necessary user data (e.g. username, user_id) during the login process.

Implementing the Middleware

Now that we have our bouncer created, we next need to include it in any and all routes that require a VIP badge. First, let's take a look at the syntax for a standard GET request:

const express = require('express');
const router = express.Router();

router.get('/VIPdata', (req, res) => {
 res.render('vipData');
});
module.exports = router;

This code sets up an ExpressJS server that listens for GET requests on the URL route '/VIPdata'. When a request is made, the server responds by rendering the 'vipData' page. Anyone will be able to walk into the VIP section and view your data!

Now, let's look at the syntax for adding our middleware. Although we could have used a nameless function inside the GET request, best practices for DRY code would be to establish a named function, then require it in any routes that will need it.

const express = require('express');
const router = express.Router();
const authMiddleware = require('../middlewares/authentication');

// Our middleware sits between the route, and the route logic
router.get('/VIPdata', authMiddleware, (req, res) => {
 res.render('vipData');
});

module.exports = router;

The route is now protected with our authentication middleware (imported as authMiddleware) to ensure only authenticated users can access it. When a request is made to '/VIPdata', the server renders the 'vipData' view, allowing authenticated users to access the protected VIP data.

Conclusion:

In conclusion, we've journeyed into the fascinating realm of authentication middleware in ExpressJS, where we discovered the power of these "bouncers" guarding our web applications. Just like vigilant sentinels, authentication middleware ensures that only trusted users gain access to the exclusive parts of our application. Armed with these valuable insights, we're now equipped to protect our web applications with confidence, allowing users to revel in the unique and personalized experiences they deserve. So go forth, embrace the power of authentication middleware, and let your Express applications shine with a heightened sense of security and user satisfaction!
-Josh

Conditional Rendering in React && Build Dynamic User Interfaces

Joshua Medina — Sat, 17 Jun 2023 08:54:43 +0000

Conditional rendering plays a crucial role in building modern and interactive user interfaces in React. With the ability to selectively render components and content based on specific conditions, you can create dynamic UIs that adapt and respond to user interactions. In this blog post, we will explore various techniques and best practices to utilizing conditional rendering in React and unlock its full potential.

1. Conditional Rendering Basics

In React, conditional rendering can be achieved using JavaScript expressions within JSX. Let's start with a simple example using if/else:

function Greeting({ isLoggedIn }) {
  if(isLoggedIn){
    return <h1>Welcome back!</h1>;
  }else {
    return <h1>Please log in or sign up.</h1>;
  }
}

In the above example, the 'Greeting' component conditionally renders a different greeting to the users based on whether the prop 'isLoggedIn' is true or false.

2. Ternary Operator for Concise Rendering

As with vanilla JavaScript, we can utilize a ternary operator to handle some of our conditional rendering in React, while being a bit more concise.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up or log in.</h1>}
    </div>
  );
};

Using the ternary operator eliminates the if/else statements and makes the code more succinct and readable.

3. Logical && Operator for Conditional Rendering

Another approach to conditional rendering is using the logical && operator. The && allows you to conditionally render

...its(&&) right side if the left side (condition) is true, or render nothing otherwise. -React.dev

function Banner(){

const [isCartHovered, setIsCartHovered] = useState(false);

const toggleCart = () => {
  setIsCartHovered(!isCartHovered);
};

return (
  <div>
    <button className="cartButton" 
      onMouseEnter={toggleCart}
      onMouseLeave={toggleCart}
    >
    Shopping Cart
    </button>
    {isCartHovered && <HoverCart />}
  </div>
)
}

The above example of the && operator was taken directly from my E-Commerce-Store application. The code allows users to preview the items in their cart by conditionally rendering the <HoverCart /> component only when isCartHovered is true. The isCartHovered is only true when the user hovers over the cart button.

4. Switch Statements for Complex Conditions

In certain scenarios where you have multiple conditions and need to render different components based on specific cases, using switch statements can provide a more organized approach. Let's take a look at an example:

function UserProfile({ userRole }) {
  switch (userRole) {
    case 'admin':
      return <AdminProfile />;
    case 'manager':
      return <ManagerProfile />;
    case 'employee':
      return <EmployeeProfile />;
    default:
      return <GuestProfile />;
  }
}

In the example above, the UserProfile component renders different profiles based on the userRole prop. By using switch statements, it becomes easier to handle various cases and maintain readable code.

Switch statements are particularly useful when you have multiple conditions with different possible outcomes. They provide a clean and structured way to handle complex conditional rendering in your React components.

Conclusion

Conditional rendering is a powerful feature in React that enables the creation of dynamic and responsive user interfaces. By mastering techniques such as JavaScript expressions, the ternary operator, logical && operator, and switch statements, developers can build UIs that adapt and respond to specific conditions. Whether it's simple rendering, concise logic, handling conditional elements, or managing complex scenarios, understanding and applying these conditional rendering techniques will empower React developers to create engaging and interactive user interfaces with ease."

A Beginner's Guide to Regular Expressions Methods: Simplifying Syntax and Usage

Joshua Medina — Fri, 05 May 2023 22:38:53 +0000

"A regular expression is a sequence of characters that forms a search pattern. The search pattern can be used for text search and text replace operations. A regular expression can be a single character, or a more complicated pattern." -w3schools

Regular expression (regex) methods can be a powerful tool for developers, but they can also be daunting to understand and use. In this technical blog post, we will simplify the topic of regex methods used in JavaScript (JS) by collating all the necessary information in one place. We will cover the basics of regular expression methods, including syntax, and some common use cases. This blog post is organized for quick reference about the methods usable with regex and sometimes utilizes regex syntax like flags, character classes, assertions, and quantifiers to showcase the different ways the methods could be used. By the end of this post, you will have a comprehensive understanding of regular expression methods and be better equipped to use them in your own development projects.

-Methods-

Regular expressions are used with the RegExp Object methods test() and exec() and the String Object methods match(), matchAll(), replace(), replaceAll(), search(), and split(). -MDN Web Docs

-Regular Expression Object Methods-

The two methods we use on the regex object are test() and exec(). Regex methods are called on our RegExp Object and the parameter is the string we would like to search through: regex.method(string)

-test() Method-

The test() method returns a Boolean value: true if the pattern is found or false if the pattern is not found.

const regex = /pattern/;
const string1 = "This sentence contains the pattern";
const string2 = "This sentence does not contain it";

//When the pattern will be found
console.log(regex.test(string1)); //Expect: true


//When the pattern will not be found
console.log(regex.test(string2)); //Expect: false

-Common Use Case for test() Method-

Two common use cases for the test() method are when you want to ensure that a user inputs a valid phone number(i.e. correct amount of digits) or a valid email address (i.e. contains an '@' or a '.com'). Let's examine checking the validity of a US phone number. The code to test for a valid United States phone number could look like this:

const validUSNumberRegex = 
/^(\+?1[-. ]?)?\(?\d{3}\)?[-. ]?\d{3}[-. ]?\d{4}$/;

//If the number is valid

let userInputNumber =  +1 333-333-4444;

console.log(validNumberRegex.test(userInputNumber));
//Expect: true

//If the number is NOT a valid US Number

let userInputNumber = +974 4444 4444;

console.log(validUSNumberRegex.test(userInputNumber));
//Expect: false

With a true return, we could continue with the provided information as planned. With a false return, we could instruct the user to please provide a correct US number:

if(validUSNumberRegex.test(userInputNumber) == true){
  //Save number for later use
  validPhoneNumbersArray.push(userInputNumber);
} else {
  //Request User to resubmit a correct US number
  alert("Please enter a valid US phone number.")
}

-exec() Method-

The exec() method returns an array of information if the pattern is found: ['pattern', index: 'index found at', input: 'the string the pattern was found', groups: 'if the pattern belongs in a group']. The exec() method returns null if the pattern is not found. The exec() method is useful when you need to find the next match of a pattern within a string and you want to work with the individual match and its capturing groups before moving on to the next match. This method stores the index of the previous match, so when called again, will return the next match in the string.

const regex = /pattern/;
const string1 = "This sentence contains the pattern";
const string2 = "This sentence does not contain it";

// When the pattern will be found
console.log(regex.exec(string1)); 
/* Expect: [
'pattern', 
index: 27, 
input: 'This sentence contains the pattern', 
groups: undefined] 
*/

// When the pattern will NOT be found
console.log(regex.exec(string2)); //Expect: null

-Common Use Case for exec() Method-

Let's say we have been tasked to compile all the email addresses that were submitted from a multitude of users. For example, hundreds of thousands of users have submitted messages that look something like:

Hello, software developer. My name is John Wick. My email address is JohnWick@Unbeatable.com, my wife's email is JohnWicksWife@beatable.com, and my dog's email is JohnWicksDog@theRealLoveInterest.com. I am interested in joining your company because....

While you could read every single message and manually input the names and emails and any other pertinent information, it would be exponentially faster to use the exec() method. Using capture groups in your regex would further allow you to breakdown the information you are retrieving. Here is a while loop that will grab all the emails, then further dissect the email using the 'groups' property from the exec() method (let's assume the quote above has already been saved to the variable userLetters):

const emailRegex = 
/(?<user>\w+[!#$%&'*+\-/=?^_`{|]{0,1}\w+)@(?<domain>[a-zA-Z]+[-.]?[a-zA-Z0-9]+)\.(?<top>[a-zA-Z]{2,3})/g;

let submittedEmails = [];
let match;

while((match = emailRegex.exec(userLetters)) !== null) {
  submittedEmails.push({
    'userEmail': match[0],
    'userName': match.groups.user,
    'domainName': match.groups.domain,
    'topDomain': match.groups.top
  })
}
console.log(submittedEmails);
/* Expect: [
  {
    userEmail: 'JohnWick@Unbeatable.com',
    userName: 'JohnWick',
    domainName: 'Unbeatable',
    topDomain: 'com'
  },
  {
    userEmail: 'JohnWicksWife@beatable.com',
    userName: 'JohnWicksWife',
    domainName: 'beatable',
    topDomain: 'com'
  },
  {
    userEmail: 'JohnWicksDog@theRealLoveInterest.com',
    userName: 'JohnWicksDog',
    domainName: 'theRealLoveInterest',
    topDomain: 'com'
  }
]
*/

Not only are we now able to email all users who submitted valid emails, we could filter it to only email users utilizing the 'Unbeatable' domain name!

-String Object Methods-

These methods are match(), matchAll(), replace(), replaceAll(), search(), and split().
As mentioned earlier, we can use regex with methods used on String Objects: string.method(regex)

-match() Method-

The match() method in conjunction with the global flag will return an array of strings if matches are found: ['match1', match2, match3] or null if no matches are found. If the global flag is not used, the method will return the first match in the same format as the exec() method.

-Common Use Case for the match() Method-

Let's again say we have been tasked to compile certain information, but this time we need to only grab birthdates from the data. We don't have need to also grab additional information like how the exec() method provides, just an array of the birthdates. The user submitted info could look like this:

Hello again, Software Developer. My name is John Wick. I realized in my last message I forgot to include our birthdates. My birthday is 09/02/1964. My wife's birthday is 11/16/1966. My dog was born on 03/22/2020.

Let's assume we have already stored information above to a variable userInfo. Our code to grab the birthdays using the match() method could look like this:

const birthdayRegex = /\d{2}\/\d{2}\/\d{4}/g;

const birthdays = userInfo.match(birthdayRegex);
console.log(birthdays);
//Expect: [ '09/02/1964', '11/16/1966', '03/22/2020' ]

The above code regex only returns matches in the format 'xx/xx/xxxx'. You would need to alter the regex to match other formats. Once we have the data, we could use it to determine age demographics, how many adults, how many minors, etc...

-matchAll() Method-

The matchAll() method is similar to the exec() method in that it returns an array of information about the match.

The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups. MDM Web Docs

Simply put, the matchAll() method does what exec() method can do when working with all matches at once, but the matchAll() method can do it a bit more concisely, making it easier to read.

-Common Use Case for the matchAll() Method-

To showcase how the matchAll() method is more concise than the exec() method, we will use the same scenario as before. Compare the two codes and see the differences. Again we have this user info:

Hello, software developer. My name is John Wick. My email address is JohnWick@Unbeatable.com, my wife's email is JohnWicksWife@beatable.com, and my dog's email is JohnWicksDog@theRealLoveInterest.com. I am interested in joining your company because....

Assume again the above quote has been saved to the variable userLetters. Using the matchAll() method, the code might look like this:

const emailRegex = 
/(?<user>\w+[!#$%&'*+\-/=?^_`{|]{0,1}\w+)@(?<domain>[a-zA-Z]+[-.]?[a-zA-Z0-9]+)\.(?<top>[a-zA-Z]{2,3})/g;

const matches = [...userLetters.matchAll(emailRegex)].map(match => ({
  user: match.groups.user,
  domain: match.groups.domain,
  top: match.groups.top
}));

console.log(matches);
/* Expect: 
[
  { user: 'JohnWick', domain: 'Unbeatable', top: 'com' },
  { user: 'JohnWicksWife', domain: 'beatable', top: 'com' },
  { user: 'JohnWicksDog', domain: 'theRealLoveInterest', top: 'com' }
] */

-replace() Method-

The replace() method is used to replace a specified value or pattern in a string with a new value or string. The method returns a new string with the replaced value or pattern. It can be used with a regular expression or a string value to replace all occurrences (if the 'g' flag is used) of the specified value or pattern, or a specified number of occurrences. The replace() method does not modify the original string but returns a new string with the replaced values. The method takes two parameters: (regex, replacement) string.replace(regex, replacement). The replacement can be a string value, or a function. The function's result (return value) will be used as the replacement string. MDM Web Docs

const originalStr = "Regular Expressions are FUN, FUN, FUN!";
const regex = /fun/i;
const newWord = "AMAZING";

const newStr = originalStr.replace(regex, newWord);
console.log(originalStr); 
//Expect: "Regular Expressions are FUN, FUN, FUN!"
console.log(newStr);
//Expect: "Regular Expressions are AMAZING, FUN, FUN!"

What if we wanted to replace the first two 'FUN' with 'AMAZING'? With the help of a count variable, the code could look like:

const originalStr = "Regular Expressions are FUN, FUN, FUN!";
const regex = /fun/ig;
const newWord = "AMAZING";

let count = 0;
const newStr = originalStr.replace(regex, (match) => {
  count++;
  return count < 3 ? newWord : match;
});

console.log(newStr);
//Expect: "Regular Expressions are AMAZING, AMAZING, FUN!"

-Common Use Case for the replace() Method-

I actually just recently used the replace() method in a Recipe App I created. My app fetches information from an API, then dynamically renders the content to the user. I had an issue with some of the results from the API containing single quotes in the label property, which caused errors when working with the localStorage. If a user searched only for "Central Europe" in the cuisine dropdown box, the first recipe displayed used to be "Brined Ramps from 'Bar Tartine'". I fixed this within the Recipe Class using the replace() method. The code is essentially this:

//Original label: Brined Ramps from 'Bar Tartine'

this._label = recipe.recipe.label.replace(/'/g, '');

//New label: Brined Ramps from Bar Tartine

-replaceAll() Method-

The replaceAll() method does exactly as you'd expect, replaces all occurrences of a given substring in a string. Unlike replace(), which only replaces the first occurrence of the pattern unless the global flag is set, replaceAll() replaces all occurrences by default. The replaceAll() method, like replace(), takes two arguments: the pattern to be replaced and the replacement string. The pattern can be either a string or a regular expression, and the replacement string can be either a string or a function that returns a string. One important thing to note is that replaceAll requires a global regular expression pattern, meaning that the g flag must be specified in the regular expression pattern. If the g flag is not specified, a TypeError will be thrown.
This replaceAll() does NOT need a global flag:

const originalStr = "Regular Expressions are FUN, FUN, FUN!";
const newStr = originalStr.replaceAll("FUN", "AMAZING");

console.log(newStr);
//Expect: "Regular Expressions are AMAZING, AMAZING, AMAZING!";

This replaceAll() DOES need a global flag:

const originalStr = "Regular Expressions are FUN, FUN, FUN!";
const newStr = originalStr.replaceAll(/FUN/g, "AMAZING");

console.log(newStr);
//Expect: "Regular Expressions are AMAZING, AMAZING, AMAZING!";

-Common Use Case for the replaceAll() Method-

Exactly the same as replace(), when you need to replace ALL substrings.

-search() Method-

The search() method returns the index of the first match. If no match is found, it returns -1. The syntax for search() is: string.search(regex).

When you want to know whether a pattern is found, and also know its index within a string, use search()-MDM Web Docs

const string = "Regular Expressions are FUN, FUN, FUN!";
const indexOfRegex = string.search(/[A-Z]{2,}/);

console.log(indexOfRegex);
//Expect: 24

Now you might be thinking: "When would I need to know the index of a substring?" Great question! Knowing the index of a particular substring in a larger string can be useful in a variety of ways. For example, if you want to extract a specific piece of information from a string, you can use the indexOf method to find the starting index of that information and then use string manipulation techniques to extract it. Additionally, you can use the index to replace or modify specific parts of a string. The index can also be useful for performing more advanced operations such as parsing or tokenizing a string.

-split() Method-

The split() method splits a string into an array of substrings based on the regex. split() does not change the original string. This method can take two parameters: string.split(regex, limit).
The second parameter, 'limit', is optional. When used, the method will continue splitting the string until it has split limit number of times.

//No limit set
const stringToSplit = "Regular Expressions are FUN, FUN, FUN!";
let arrayOfSplitStr = stringToSplit.split(/\s/);

console.log(arrayOfSplitStr);
/* Expect: 
[ 'Regular', 'Expressions', 'are', 'FUN,', 'FUN,', 'FUN!' ]
*/

//Limit set
let arrayOfSplitStr = stringToSplit.split(/\s/, 4);
console.log(arrayOfSplitStr);
// Expect: [ 'Regular', 'Expressions', 'are', 'FUN,' ]

-Common Use Case for the split() Method-

We are now tasked with listing all the sentences in a 10,000 word document. No idea why we're tasked to do this, but it doesn't matter. We can write a simple regex to handle the different ways a sentence can end and use it in a split().

const multiSentenceDoc = "I LOVE CODING! Isn't problem solving great? I'm excited being a software developer.";

const splitRegex = /(?<=[.?!])\s+(?=[A-Z])/;

const splitArray = multiSentenceDoc.split(splitRegex);

console.log(splitArray);
/* Expect: [
  'I LOVE CODING!',
  "Isn't problem solving great?",
  "I'm excited being a software developer."
]

-Conclusion-

In conclusion, regular expressions are a powerful tool in any developer's toolkit, and the various string methods built upon them can provide significant benefits in terms of string manipulation and data processing. By mastering these methods, developers can improve their efficiency and productivity, and unlock new possibilities for their applications. Whether you're a beginner or an experienced developer, taking the time to learn and understand regular expressions and their associated methods can open up a world of possibilities and help you take your coding skills to the next level.