Sourabh Bagrecha

Senior Developer Advocate at MongoDB 

> **Note:** GraphQL is deprecated. [Learn more.](https://www.mongodb.com/developer/products/atlas/deprecating-mongodb-atlas-graphql-hosting-services/)

Welcome back to our journey building a full stack web application with MongoDB Atlas App Services, GraphQL, and React!

In the [first part of the series](https://www.mongodb.com/developer/products/atlas/email-password-authentication-app-services), we configured the email/password authentication provider in our backend App Service. In this second article, we will integrate the authentication into a web application built with React. We will write only a single line of server-side code and let the App Service handle the rest!

We will also build the front end of our expense management application, Expengo, using React. By the end of today’s tutorial, we will have the following web application:

![Expengo application walkthrough](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/0_Hn_2_D_Mk_Z778_Ry6oz_1_06ebd7bc2f.gif)

## Set up your React web application

Make sure you have [Node.js and npm installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) on your machine. You can check if they’re correctly set up by running the following commands in your terminal emulator:

```sh
node -v
npm -v
```

### Create the React app
Let’s create a brand new React app. Launch your terminal and execute the following command, where “expengo” will be the name of our app:

```sh
npx create-react-app expengo -y
```

The process may take up to a minute to complete. After it’s finished, navigate to your new project:

```sh
cd expengo
```

### Add required dependencies
Next, we’ll install the [Realm Web SDK](https://www.mongodb.com/docs/realm/web/). The SDK enables browser-based applications to access data stored in MongoDB Atlas and interact with Atlas App Services like Functions, authentication, and GraphQL.

```
npm install realm-web
```

We’ll also install a few other npm packages to make our lives easier:

1. [React-router-dom](https://reactrouter.com/docs/en/v6) to manage navigation in our app:

    ```
    npm install react-router-dom
    ```
   
1. [Material UI](https://mui.com/) to help us build beautiful components without writing a lot of CSS:

    ```
    npm install @mui/material @emotion/styled @emotion/react
    ```

### Scaffold the application structure
Finally, let’s create three new directories with a few files in them. To do that, we’ll use the shell. Feel free to use a GUI or your code editor if you prefer.

```sh
(cd src/ && mkdir pages/ contexts/ realm/)
(cd src/pages && touch Home.page.js PrivateRoute.page.js Login.page.js Signup.page.js)
(cd src/contexts && touch user.context.js)
(cd src/realm && touch constants.js)
```

Open the expengo directory in your code editor. The project directory should have the following structure:

```
├── README.md
└──node_modules/
├── …
├── package-lock.json
├── package.json
└── public/
 ├── …
└──src/
 └──contexts/
  ├──user.context.js
 └──pages/
  ├──Home.page.js
  ├──PrivateRoute.page.js
  ├──Login.page.js
  ├──Signup.page.js
 └── realm/
  ├──constants.js
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── reportWebVitals.js
 └── setupTests.js
```

## Connect your React app with App Services and handle user management

In this section, we will be creating functions and React components in our app to give our users the ability to log in, sign up, and log out.

* Start by copying your App Services App ID:

![Atlas App Services Screen highlight the Copy App ID button.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Copy_App_ID_53e06faff4.png)

Now open this file: `./src/realm/constants.js`

Paste the following code and replace the placeholder with your app Id:

```js
export const APP_ID = "<-- Your App ID -->";
```


### Create a React Context for user management
Now we will add a new React Context on top of all our routes to get access to our user’s details, such as their profile and access tokens. Whenever we need to call a function on a user’s behalf, we can easily do that by consuming this React Context through child components.
The following code also implements functions that will do all the interactions with our Realm Server to perform authentication. Please take a look at the comments for a function-specific description.

**./src/contexts/user.context.js**

```js
import { createContext, useState } from "react";
import { App, Credentials } from "realm-web";
import { APP_ID } from "../realm/constants";
 
// Creating a Realm App Instance
const app = new App(APP_ID);
 
// Creating a user context to manage and access all the user related functions
// across different components and pages.
export const UserContext = createContext();
 
export const UserProvider = ({ children }) => {
 const [user, setUser] = useState(null);
 
 // Function to log in user into our App Service app using their email & password
 const emailPasswordLogin = async (email, password) => {
   const credentials = Credentials.emailPassword(email, password);
   const authenticatedUser = await app.logIn(credentials);
   setUser(authenticatedUser);
   return authenticatedUser;
 };
 
 // Function to sign up user into our App Service app using their email & password
 const emailPasswordSignup = async (email, password) => {
   try {
     await app.emailPasswordAuth.registerUser(email, password);
     // Since we are automatically confirming our users, we are going to log in
     // the user using the same credentials once the signup is complete.
     return emailPasswordLogin(email, password);
   } catch (error) {
     throw error;
   }
 };
 
 // Function to fetch the user (if the user is already logged in) from local storage
 const fetchUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.refreshCustomData();
     // Now, if we have a user, we are setting it to our user context
     // so that we can use it in our app across different components.
     setUser(app.currentUser);
     return app.currentUser;
   } catch (error) {
     throw error;
   }
 }
 
 // Function to logout user from our App Services app
 const logOutUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.logOut();
     // Setting the user to null once loggedOut.
     setUser(null);
     return true;
   } catch (error) {
     throw error
   }
 }
 
 return <UserContext.Provider value={{ user, setUser, fetchUser, emailPasswordLogin, emailPasswordSignup, logOutUser }}>
   {children}
 </UserContext.Provider>;
}
```

## Create a PrivateRoute page
This is a wrapper page that will only allow authenticated users to access our app’s private pages. We will see it in action in our ./src/App.js file.

**./src/pages/PrivateRoute.page.js**

```js
import { useContext } from "react";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const PrivateRoute = () => {
 
 // Fetching the user from the user context.
 const { user } = useContext(UserContext);
 const location = useLocation();
 const redirectLoginUrl = `/login?redirectTo=${encodeURI(location.pathname)}`;
 
 // If the user is not logged in we are redirecting them
 // to the login page. Otherwise we are letting them to
 // continue to the page as per the URL using <Outlet />.
 return !user ? <Navigate to={redirectLoginUrl} /> : <Outlet /> ;
}
 
export default PrivateRoute;
```


## Create a login page
Next, let’s add a login page.

**./src/pages/Login.page.js**

```js
import { Button, TextField } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Login = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // We are consuming our user-management context to
 // get & set the user details here
 const { user, fetchUser, emailPasswordLogin } = useContext(UserContext);
 
 // We are using React's "useState" hook to keep track
 //  of the form values.
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // This function will be called whenever the user edits the form.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 // This function will redirect the user to the
 // appropriate page once the authentication is done.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // Once a user logs in to our app, we don’t want to ask them for their
 // credentials again every time the user refreshes or revisits our app, 
 // so we are checking if the user is already logged in and
 // if so we are redirecting the user to the home page.
 // Otherwise we will do nothing and let the user to login.
 const loadUser = async () => {
   if (!user) {
     const fetchedUser = await fetchUser();
     if (fetchedUser) {
       // Redirecting them once fetched.
       redirectNow();
     }
   }
 }
 
 // This useEffect will run only once when the component is mounted.
 // Hence this is helping us in verifying whether the user is already logged in
 // or not.
 useEffect(() => {
   loadUser(); // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 
 // This function gets fired when the user clicks on the "Login" button.
 const onSubmit = async (event) => {
   try {
     // Here we are passing user details to our emailPasswordLogin
     // function that we imported from our realm/authentication.js
     // to validate the user credentials and log in the user into our App.
     const user = await emailPasswordLogin(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
       if (error.statusCode === 401) {
          alert("Invalid username/password. Try again!");
      } else {
          alert(error);
      }
 
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Login</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Login
   </Button>
   <p>Don't have an account? <Link to="/signup">Signup</Link></p>
 </form>
}
 
export default Login;
```


## Create a signup page
Now our users can log into the application, but how do they sign up? Time to add a signup page!

**./src/pages/Signup.page.js**

```js
import { Button, TextField } from "@mui/material";
import { useContext, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Signup = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // As explained in the Login page.
 const { emailPasswordSignup } = useContext(UserContext);
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // As explained in the Login page.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 
 // As explained in the Login page.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // As explained in the Login page.
 const onSubmit = async () => {
   try {
     const user = await emailPasswordSignup(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
     alert(error);
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Signup</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Signup
   </Button>
   <p>Have an account already? <Link to="/login">Login</Link></p>
 </form>
}
 
export default Signup;
```


## Create a homepage
Our homepage will be a basic page with a title and logout button.

**./src/pages/Home.page.js:**

```js
import { Button } from '@mui/material'
import { useContext } from 'react';
import { UserContext } from '../contexts/user.context';
 
export default function Home() {
 const { logOutUser } = useContext(UserContext);
 
 // This function is called when the user clicks the "Logout" button.
 const logOut = async () => {
   try {
     // Calling the logOutUser function from the user context.
     const loggedOut = await logOutUser();
     // Now we will refresh the page, and the user will be logged out and
     // redirected to the login page because of the <PrivateRoute /> component.
     if (loggedOut) {
       window.location.reload(true);
     }
   } catch (error) {
     alert(error)
   }
 }
 
 return (
   <>
     <h1>Welcome to Expengo</h1>
     <Button variant="contained" onClick={logOut}>Logout</Button>
   </>
 )
}
```


## Putting it all together in App.js
Let’s connect all of our pages in the root React component—App.

**./src/App.js**

```js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { UserProvider } from "./contexts/user.context";
import Home from "./pages/Home.page";
import Login from "./pages/Login.page";
import PrivateRoute from "./pages/PrivateRoute.page";
import Signup from "./pages/Signup.page";
 
function App() {
 return (
   <BrowserRouter>
     {/* We are wrapping our whole app with UserProvider so that */}
     {/* our user is accessible through out the app from any page*/}
     <UserProvider>
       <Routes>
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/signup" element={<Signup />} />
         {/* We are protecting our Home Page from unauthenticated */}
         {/* users by wrapping it with PrivateRoute here. */}
         <Route element={<PrivateRoute />}>
           <Route exact path="/" element={<Home />} />
         </Route>
       </Routes>
     </UserProvider>
   </BrowserRouter>
 );
}
 
export default App;
```


## Launch your React app
All have to do now is run the following command from your project directory:

```
npm start
```

Once the compilation is complete, you will be able to access your app from your browser at http://localhost:3000/. You should be able to sign up and log into your app now.

## Conclusion
Woah! We have made a tremendous amount of progress. Authentication is a very crucial part of any app and once that’s done, we can focus on features that will make our users’ lives easier. In the next part of this blog series, we’ll be leveraging App Services GraphQL to perform CRUD operations. I’m excited about that because the basic setup is already over.

If you have any doubts or concerns, please feel free to reach out to us on the MongoDB Community Forums. I have created a [dedicated forum topic](https://www.mongodb.com/community/forums/t/build-a-full-stack-app-using-mongodb-realm-graphql-without-worrying-about-servers-at-all/156840) for this blog where we can discuss anything related to this blog series.

And before you ask, here’s the [GitHub repository](https://github.com/sourabhbagrecha/expengo), as well!


Configuring signup and login authentication is a common step for nearly every web application. Learn how to set up email/password authentication in React using MongoDB Atlas App Services.

Configure Email/Password Authentication in MongoDB Atlas App Services

Implement Email/Password Authentication in React

Fullstack Web App with MongoDB Atlas App Services, GraphQL, and React

> **Note:** GraphQL is deprecated. [Learn more.](https://www.mongodb.com/developer/products/atlas/deprecating-mongodb-atlas-graphql-hosting-services/)

One of the things I like the most is building full-stack apps using Node.js, React, and MongoDB. Every time I get a billion-dollar idea, I immediately start building it using this tech stack. No matter what app I’m working on, there are a few features that are common:

- Authentication and authorization: login, signup, and access controls.
- Basic CRUD (Create, Read, Update, and Delete) operations.
- Data analytics.
- Web application deployment.

And without a doubt, all of them play an essential role in any full-stack application. But still, they take a lot of time and energy to build and are mostly repetitive in nature. Therefore, we are left with significantly less time to build the features that our customers are waiting for.
In an ideal scenario, your time as a developer should be spent on implementing features and not reinventing the wheel. With [MongoDB Atlas App Services](https://www.mongodb.com/atlas/app-services), you don’t have to worry about that. All you have to do is connect your client app to the service you need and you’re ready to rock!
Throughout this series, you will learn how to build a full stack web application with MongoDB Atlas App Services, GraphQL, and React. We will be building an expense manager application called Expengo.

## Authentication

Implementing authentication in your app usually requires you to create and deploy a server while making sure that emails are unique, passwords are encrypted, and sessions/tokens are managed securely.
In this blog, we’ll configure email/password authentication on Atlas App Services. In the subsequent part of this series, we’ll integrate this with our React app.

![Expengo app walkthrough](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/walkthrough_a085dddc6a.gif)

## MongoDB Atlas App Services authentication providers
MongoDB Atlas is a developer data platform integrating a multi-cloud database service with a set of data services. Atlas App Services provide secure serverless backend services and APIs to save you hours of coding.
For authentication, you can choose from many different providers such as email/password, API key, Google, Apple, and Facebook. For this tutorial, we’ll use the email/password authentication provider.

## Deploy your free tier Atlas cluster
If you haven’t already, [deploy a free tier](https://www.mongodb.com/docs/atlas/tutorial/deploy-free-tier-cluster/) MongoDB Atlas cluster. This will allow us to store and retrieve data from our database deployment. You will be asked to add your IP to the IP access list and create a username/password to access your database. Once a cluster is created, you can create an App Service and link to it.

## Set up your App Service
Now, click on the “App Services” tab as highlighted in the image below:

![Database Deployments screen highlighting App Services tab](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/App_Services_tab_5d34a6032b.png)

There are a variety of templates one can choose from. For this tutorial, we will continue with the “Build your own App” template and click “Next.”

![Atlas App Services welcome page highlighting the Build Your Own App feature](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Select_a_template_06356e9eb4.png)

Add application information in the next pop-up and click on “Create App Service.”

![Connecting data to Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Create_App_Services_Dialog_4c6ddcdc76.png)

Click on “Close Guides” in the next pop-up screen.

![Application guides for Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Close_guides_54b8ce39f3.png)

Now click on “Authentication” in the side-bar. Then, click on the “Edit” button on the right side of Email/Password in the list of Authentication Providers.

![Authentication providers for Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Turn_on_authentication_d4528fa3b6.png)

Make sure the Provider Enabled toggle is set to On.

On this page, we may also configure the user confirmation settings and the password reset settings for our application.  For the sake of simplicity of this tutorial, we will choose:

1. User confirmation method: “Automatically confirm users.”
2. Password reset method: “Send a password reset email.”
3. Placeholder password reset URL: http://localhost:3000/resetPassword.
    > We're not going to implement a password reset functionality in our client application. With that said, the URL you enter here doesn't really matter. If you want to learn how to reset passwords with App Services, check out the [dedicated documentation](https://www.mongodb.com/docs/atlas/app-services/authentication/email-password/#password-resets).
4. Click “Save Draft.”

![Defining authentication settings within Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Authentication_provider_06d7d94eee.png)

Once your Draft has been saved, you will see a blue pop-up at the top, with a “Review Draft & Deploy” button. Click on it and wait for a few moments.

![Review Draft & Deploy button in App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Review_Draft_and_Deploy_115d03c3ef.png)

You will see a pop-up displaying all the changes you made in this draft. Click on “Deploy” to deploy these changes:

![Deployment draft in Atlas App Services](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Deploy_Draft_9cafaa3f80.png)

You will see a “Deployment was successful” message in green at the top if everything goes fine. Yay!

![Successful deployment notification](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/Deployment_was_successful_ffc92d6da9.png)

## Conclusion

Please note that all the screenshots were last updated in August 2022. Some UX details may have changed in more recent releases.
In the next article of the series, we will learn how we can utilize this email/password authentication provider in our React app.


In less than 6 steps, learn how to set up authentication and allow your users to log in and sign up to your app without writing a single line of server code.

If you have ever used a SQL database, you might have heard about stored procedures. Stored procedures represent pre-written SQL code designed for reuse. By storing frequently used SQL queries as procedures, you can execute them repeatedly. Additionally, these procedures can be parameterized, allowing them to operate on specified parameter values. Oftentimes, developers find themselves wondering:

- Does MongoDB support stored procedures? 
- Where do you write the logic for stored procedures in MongoDB? 
- How can I run a query every midnight, like a CRON job?

In today’s article, we are going to answer these questions and demystify stored procedures in MongoDB.

## Does MongoDB support stored procedures?

Essentially, a stored procedure consists of a set of SQL statements capable of accepting parameters, executing tasks, and optionally returning values. In the world of MongoDB, we can achieve this using an [aggregation pipeline](https://www.mongodb.com/docs/manual/core/aggregation-pipeline/). 

An aggregation pipeline, in a nutshell, is basically a series of stages where the output from a particular stage is an input for the next stage, and the last stage’s output is the final result. 

Now, every stage performs some sort of processing to the input provided to it, like filtering, grouping, shaping, calculating, etc. You can even perform [vector search](https://www.mongodb.com/products/platform/atlas-vector-search) and [full-text search](https://www.mongodb.com/cloud/atlas/lp/search) using MongoDB’s unified developer data platform, [Atlas](https://mdb.link/stored-procedures-triggers).

Let's see how MongoDB’s aggregation pipeline, Atlas triggers, and change streams together can act as a super efficient, powerful, and flexible alternative to stored procedures.

## What is MongoDB Atlas?

[MongoDB Atlas](https://mdb.link/stored-procedures-triggers) is a multi-cloud developer data platform focused on making it stunningly easy to work with data. It offers the optimal environment for running MongoDB, the leading non-relational database solution.

MongoDB's document model facilitates rapid innovation by directly aligning with the objects in your code. This seamless integration makes data manipulation more intuitive and efficient. With MongoDB, you have the flexibility to store data of diverse structures and adapt your schema effortlessly as your application evolves with new functionalities.

The Atlas database is available in 100+ regions across AWS, Google Cloud, and Azure. You can even take advantage of multi-cloud and multi-region deployments, allowing you to target the providers and regions that best serve your users. It has best-in-class automation and proven practices that guarantee availability, scalability, and compliance with the most demanding data security and privacy standards.

## What is an Atlas Trigger?

Database triggers enable the execution of server-side logic whenever a document undergoes addition, modification, or deletion within a connected Atlas cluster. 

Unlike conventional SQL data triggers confined to the database server, [Atlas Triggers](https://www.mongodb.com/docs/atlas/app-services/triggers/) operate on a serverless compute layer capable of scaling autonomously from the database server. 

It seamlessly invokes Atlas Functions and can also facilitate event forwarding to external handlers via Amazon EventBridge.

## How can Atlas Triggers be invoked?

An Atlas Trigger might fire on:

- A specific operation type in a given collection, like insert, update, and delete. 
- An authentication event, such as User Creation or Deletion.
- A scheduled time, like a CRON job.

## Types of Atlas Triggers

There are three types of triggers in Atlas:

- [Database triggers](https://www.mongodb.com/docs/atlas/app-services/triggers/database-triggers/) are used in scenarios where you want to respond when a document is inserted, changed, or deleted. 
- [Authentication triggers](https://www.mongodb.com/docs/atlas/app-services/triggers/authentication-triggers/) can be used where you want to respond when a database user is created, logged in, or deleted.
- [Scheduled triggers](https://www.mongodb.com/docs/atlas/app-services/triggers/scheduled-triggers/) acts like a CRON job and run on a predefined schedule.

Refer to [Configure Atlas Triggers](https://www.mongodb.com/docs/atlas/triggers/) for advanced options.

## Atlas Triggers in action

Let's compare how stored procedures can be implemented in SQL and MongoDB using triggers, functions, and aggregation pipelines.

### The SQL way

Here's an example of a stored procedure in MySQL that calculates the total revenue for the day every time a new order is inserted into an orders table:

```
DELIMITER $$

CREATE PROCEDURE UpdateTotalRevenueForToday()
BEGIN
    DECLARE today DATE;
    DECLARE total_revenue DECIMAL(10, 2);

    -- Get today's date
    SET today = CURDATE();

    -- Calculate total revenue for today
    SELECT SUM(total_price) INTO total_revenue
    FROM orders
    WHERE DATE(order_date) = today;

    -- Update total revenue for today in a separate table or perform any other necessary action
    -- Here, I'm assuming you have a separate table named 'daily_revenue' to store daily revenue
    -- If not, you can perform any other desired action with the calculated total revenue

    -- Update or insert the total revenue for today into the 'daily_revenue' table
    INSERT INTO daily_revenue (date, revenue)
    VALUES (today, total_revenue)
    ON DUPLICATE KEY UPDATE revenue = total_revenue;
END$$

DELIMITER ;
```

In this stored procedure:

- We declare two variables: today to store today's date and total_revenue to store the calculated total revenue for today.
- We use a SELECT statement to calculate the total revenue for today from the orders table where the order_date matches today's date.
- We then update the daily_revenue table with today's date and the calculated total revenue. If there's already an entry for today's date, it updates the revenue. Otherwise, it inserts a new row for today's date.

Now, we have to create a trigger to call this stored procedure every time a new order is inserted into the orders table. Here's an example of how to create such a trigger:

```
CREATE TRIGGER AfterInsertOrder
AFTER INSERT ON orders
FOR EACH ROW
BEGIN
    CALL UpdateTotalRevenueForToday();
END;
```

This trigger will call the UpdateTotalRevenueForToday() stored procedure every time a new row is inserted into the orders table.

### The MongoDB way

If you don’t have an existing MongoDB Database deployed on Atlas, [start for free](https://www.mongodb.com/docs/guides/atlas/cluster/) and get 500MBs of storage free forever.

Now, all we have to do is create an Atlas Trigger and implement an Atlas Function in it.

Let’s start by [creating an Atlas database trigger](https://www.mongodb.com/docs/atlas/app-services/triggers/database-triggers/#create-a-database-trigger). 

![enter image description here][7]

![enter image description here][2]

![enter image description here][1]

![enter image description here][3]

1. Select the **Trigger Type** as “Database” since we want our trigger to respond to database events rather than on a defined schedule.
2. Give this trigger a **Name** of your choice.
3. Select a **Data Source** that you want this trigger to be linked to.
4. We are **Watching Against** a “Collection” since we want this trigger to execute every time a new document is inserted into the orders collection.
5. Select the appropriate **Cluster**, **Database**, and **Collection name** where you want this trigger to observe any changes.
6. We are only interested in new orders being created in our application, hence we will only choose “Insert Document” in the **Operation Type**.
7. Enable the **Full Document** option for this trigger.
8. You can keep the other options in their default state. Learn more about [configuring Atlas database triggers](https://www.mongodb.com/docs/atlas/app-services/triggers/database-triggers/#configuration).

![enter image description here][6]

Finally, we will implement the following Atlas Function in the function editor:

```javascript
exports = async function (changeEvent) {
    //Get the date from the newly inserted document
    const date = changeEvent.fullDocument.order_date;
    const ordersCollection = context.services.get("triggers-demo").db("business").collection("orders");
    const dailyRevenueCollection = context.services.get("triggers-demo").db("business").collection("daily_revenue");

    const pipeline = [
        {
            $group: {
                _id: date,
                total_revenue: { $sum: "$total_amount" }
            }
        }
    ];

    const result = await ordersCollection.aggregate(pipeline).toArray();
    const totalRevenue = result.length > 0 ? result[0].total_revenue : 0;

    await dailyRevenueCollection.updateOne(
        { date: date },
        { $set: { revenue: totalRevenue } },
        { upsert: true }
    );
};
```

Hit “Save.”

![enter image description here][4]

### Testing

Now, to test if our trigger is working correctly, let’s insert a document into our orders collection:

```json
{
    "_id": { "$oid": "65c357c89b2a791ae372bce3" },
    "order_date": "07-02-2024",
    "total_amount": 1499
}
```

![enter image description here][5]

To verify whether our trigger executed successfully, we can check the **dailyRevenue** collection, and if it contains a new document with the same date as we used in the newly inserted order, congratulations — you have successfully implemented a fully functional Atlas Trigger.

![enter image description here][8]

## Conclusion

Typically, you would use a stored procedure in SQL when you are frequently trying to execute complex queries on the database.

Stored procedures were initially lauded for their perceived advantages in terms of performance, efficiency, and security. However, their drawbacks — including maintenance challenges, limited portability, and blurred roles between developers and database administrators — have become increasingly apparent in modern architectural paradigms.

On the other hand, MongoDB makes it stunningly easy to work with data. It provides modern tools and techniques that help us build event-driven applications blazingly fast.

MongoDB features, such as aggregation pipelines and [change streams](https://www.mongodb.com/docs/manual/changeStreams/), are powerful alternatives to traditional stored procedures. MongoDB Atlas, the developer data platform, further enhances development flexibility with features like Atlas Functions and Triggers, enabling seamless integration of server-side logic within the database environment.

The migration from stored procedures to MongoDB is not just a technological shift; it represents a paradigm shift towards embracing a future-ready digital landscape. As organizations transition, they gain the ability to leverage MongoDB's innovative solutions, maintaining agility, enhancing performance, and adhering to contemporary development practices.

So, what are you waiting for? [Sign up for Atlas](https://mdblink.com/stored-procedures-triggers) today and experience the modern alternative to stored procedures in MongoDB.


  [1]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltcb5b2b2db6b3a2b6/65dce8447394e52da349971b/image1.png
  [2]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt5cbb9842024e79f1/65dce844ae62f722b74bdfe0/image2.png
  [3]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt529e154503e12f56/65dce844aaeb364e19a817e3/image3.png
  [4]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blta2a7b461deb6879d/65dce844aaeb36b5d5a817df/image4.png
  [5]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt5801d9543ac94f25/65dce8446c65d723e087ae99/image5.png
  [6]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt5ceb23e853d05d09/65dce845330e0069f27f5980/image6.png
  [7]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt626536829480d1be/65dce845375999f7bc70a71b/image7.png
  [8]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt1b1366584ee0766a/65dce8463b4c4f91f07ace17/image8.png

Let's see how MongoDB’s aggregation pipeline, Atlas triggers, and change streams together can act as a super efficient, powerful, and flexible alternative to stored procedures.

Demystifying Stored Procedures in MongoDB

Chuck Freedman

Director of Developer Advocacy and Enablement

Stanimira Vlaeva

Developer Advocate

Welcome to MongoDB Developer Day Sydney! Below you can find all the resources you will need for the day.

## Data Modeling and Design Patterns
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vSnAmKMkZfJ_fSMhsbIoJdxKN3EDor9uQ0WjtHQPjLf06AGma6u_7Z64iRufwdOWzRxNFdhkDP7Hjyj/pub?start=false&loop=false&delayms=60000)
* [Library application](https://potent-bulwark-400605.web.app/catalogue)
* [System requirements](https://docs.google.com/presentation/d/e/2PACX-1vSjnVIW0OxyqfBeVw1aV2XtILg9yBYySvPaWQliqZzwEaMHO9o8j1B2d9Qie4wOf-r4QxC2JuiHUl0N/pub?start=false&loop=false&delayms=60000)

## MongoDB Atlas Setup: Hands-on exercises setup and troubleshooting
* [Intro lab: hands-on exercises](https://mongodb-developer.github.io/intro-lab/)
* [Data import tool](https://mdb.link/import-library-data)

## Aggregation Pipelines Lab
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQUEYTdibY5xWAe4EGSp4IZ8Kt4hBTrz_oLGs9kNTajrNA5pwzra_fAJEbzXufDbIKg4_TgiZ3UdjLp/pub?start=false&loop=false&delayms=60000)
* [Aggregations lab: hands-on exercises](https://mongodb-developer.github.io/aggregation-pipeline-lab/docs/simple-queries/match)

## Search Lab
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQsQ0UQSoXF86gLhmcLBZgMTWm9ZUIbtSyLD8-dBVnaYfZO2G10s2EB-XYz_bD9z2bK166WYtq14hga/pub?start=false&loop=false&delayms=60000)
* [Search lab: hands-on exercises](https://mongodb-developer.github.io/search-lab/)

## Additional resources
* [Library management system code](https://github.com/mongodb-developer/library-management-system)
* [MongoDB data modeling book](https://www.amazon.com/MongoDB-Data-Modeling-Schema-Design/dp/1634621980)
* [Data Modeling course](https://learn.mongodb.com/courses/m320-mongodb-data-modeling) on MongoDB University
* [MongoDB for SQL Pros](https://learn.mongodb.com/learning-paths/mongodb-for-sql-professionals) on MongoDB University
* [Atlas Search Workshop](https://www.atlassearchworkshop.com/): An in-depth workshop that uses the more advanced features of Atlas Search

## How was it?
Let us know what you liked about this day, and how we can improve (and get a cool 🧦 gift 🧦) by filling out this [survey](https://forms.gle/Crz553kqi8uH6Dah8).

## Join the Community
Stay connected, and join our community:
* Join the [Sydney MongoDB User Group](https://www.mongodb.com/community/user-groups/sydney/)!
* Sign up for the [MongoDB Community Forums](http://community.mongodb.com).

Join us for a full day of hands-on sessions about MongoDB. An event for developer by developers.

Developer Day Sydney

Welcome to MongoDB Developer Day Melbourne! Below you can find all the resources you will need for the day.

## Data Modeling and Design Patterns
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vSnAmKMkZfJ_fSMhsbIoJdxKN3EDor9uQ0WjtHQPjLf06AGma6u_7Z64iRufwdOWzRxNFdhkDP7Hjyj/pub?start=false&loop=false&delayms=60000)
* [Library application](https://potent-bulwark-400605.web.app/catalogue)
* [System requirements](https://docs.google.com/presentation/d/e/2PACX-1vSjnVIW0OxyqfBeVw1aV2XtILg9yBYySvPaWQliqZzwEaMHO9o8j1B2d9Qie4wOf-r4QxC2JuiHUl0N/pub?start=false&loop=false&delayms=60000)

## MongoDB Atlas Setup: Hands-on exercises setup and troubleshooting
* [Intro lab: hands-on exercises](https://mongodb-developer.github.io/intro-lab/)
* [Data import tool](https://mdb.link/import-library-data)

## Aggregation Pipelines Lab
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQUEYTdibY5xWAe4EGSp4IZ8Kt4hBTrz_oLGs9kNTajrNA5pwzra_fAJEbzXufDbIKg4_TgiZ3UdjLp/pub?start=false&loop=false&delayms=60000)
* [Aggregations lab: hands-on exercises](https://mongodb-developer.github.io/aggregation-pipeline-lab/docs/simple-queries/match)

## Search Lab
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQsQ0UQSoXF86gLhmcLBZgMTWm9ZUIbtSyLD8-dBVnaYfZO2G10s2EB-XYz_bD9z2bK166WYtq14hga/pub?start=false&loop=false&delayms=60000)
* [Search lab: hands-on exercises](https://mongodb-developer.github.io/search-lab/)

## Additional resources
* [Library management system code](https://github.com/mongodb-developer/library-management-system)
* [MongoDB data modeling book](https://www.amazon.com/MongoDB-Data-Modeling-Schema-Design/dp/1634621980)
* [Data Modeling course](https://learn.mongodb.com/courses/m320-mongodb-data-modeling) on MongoDB University
* [MongoDB for SQL Pros](https://learn.mongodb.com/learning-paths/mongodb-for-sql-professionals) on MongoDB University
* [Atlas Search Workshop](https://www.atlassearchworkshop.com/): An in-depth workshop that uses the more advanced features of Atlas Search

## How was it?
Let us know what you liked about this day, and how we can improve (and get a cool 🧦 gift 🧦) by filling out this [survey](https://forms.gle/qMyim8WkAk2yC48K6).

## Join the Community
Stay connected, and join our community:
* Join the [Melbourne MongoDB User Group](https://www.mongodb.com/community/user-groups/melbourne/)!
* Sign up for the [MongoDB Community Forums](http://community.mongodb.com).

Developer Day Melbourne

Welcome to MongoDB Developer Day Auckland! Below you can find all the resources you will need for the day.

## Data Modeling and Design Patterns
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vSnAmKMkZfJ_fSMhsbIoJdxKN3EDor9uQ0WjtHQPjLf06AGma6u_7Z64iRufwdOWzRxNFdhkDP7Hjyj/pub?start=false&loop=false&delayms=60000)
* [Library application](https://potent-bulwark-400605.web.app/catalogue)
* [System requirements](https://docs.google.com/presentation/d/e/2PACX-1vSjnVIW0OxyqfBeVw1aV2XtILg9yBYySvPaWQliqZzwEaMHO9o8j1B2d9Qie4wOf-r4QxC2JuiHUl0N/pub?start=false&loop=false&delayms=60000)

## MongoDB Atlas Setup: Hands-on exercises setup and troubleshooting
* [Intro lab: hands-on exercises](https://mongodb-developer.github.io/intro-lab/)
* [Data import tool](https://mdb.link/import-library-data)

## Aggregation Pipelines Lab
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQUEYTdibY5xWAe4EGSp4IZ8Kt4hBTrz_oLGs9kNTajrNA5pwzra_fAJEbzXufDbIKg4_TgiZ3UdjLp/pub?start=false&loop=false&delayms=60000)
* [Aggregations lab: hands-on exercises](https://mongodb-developer.github.io/aggregation-pipeline-lab/docs/simple-queries/match)

## Search Lab
* [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQsQ0UQSoXF86gLhmcLBZgMTWm9ZUIbtSyLD8-dBVnaYfZO2G10s2EB-XYz_bD9z2bK166WYtq14hga/pub?start=false&loop=false&delayms=60000)
* [Search lab: hands-on exercises](https://mongodb-developer.github.io/search-lab/)

## Additional resources
* [Library management system code](https://github.com/mongodb-developer/library-management-system)
* [MongoDB data modeling book](https://www.amazon.com/MongoDB-Data-Modeling-Schema-Design/dp/1634621980)
* [Data Modeling course](https://learn.mongodb.com/courses/m320-mongodb-data-modeling) on MongoDB University
* [MongoDB for SQL Pros](https://learn.mongodb.com/learning-paths/mongodb-for-sql-professionals) on MongoDB University
* [Atlas Search Workshop](https://www.atlassearchworkshop.com/): An in-depth workshop that uses the more advanced features of Atlas Search

## How was it?
Let us know what you liked about this day, and how we can improve (and get a cool 🧦 gift 🧦) by filling out this [survey](https://forms.gle/EgqTnsWJnoh2oEr48).

## Join the Community
Stay connected, and join our community:
* Join the [Auckland MongoDB User Group](https://www.mongodb.com/community/user-groups/auckland/)!
* Sign up for the [MongoDB Community Forums](http://community.mongodb.com).