Crowdbotics
Published in

Crowdbotics

Building an authenticated MERN Stack App Using Material UI

Learn to build an authenticated full-stack application using MERN, styled with Material UI components.

Pre-requisites

Before we get started, install all the tools we are going to need to set up our application.

  • MongoDB
  • yarn
  • create-react-app

Set up the MERN App

To get started, you need to follow the steps below by opening your terminal and typing these commands. To keep you from getting lost, I will leave a comment before each command using #.

Connect Database and the Server

Inside config directory, create a new file called dbConnection.js. Let us start by defining the MongoDB connection.

Building The User Model

To demonstrate, I am going to create a user data model with properties to save the user data when a new user registers with our application. We are going to save user credentials and validate it using Mongoose in this section. Create a new file inside server/models/user.js.

User Routes

Now, let’s write the business logic behind the routes to create for the React end to interact with the server. Create a new file server/controllers/user.js and write the following code. Import the user model first that from the previous section.

Auth Routes

To restrict access to user operations — such as the logged in user can only access their profile and no one else’s — we are going to implement a JWT authentication to protect the routes. The two routes required to sign in and sign out the user from our application are going to be inside a separate file server/routes/auth.js.

Finishing the back-end

With the routing logic set up, we can now complete the server by adding our routes to index.js file.

Adding Material UI in React

There are a series of steps to follow to add the Material UI Library to our react app. Traverse in the client directory and follow the below steps. We are going to use Material Icons in SVG form, so let’s add that package.

Defining the Home Page

Now let’s build the first component of our application. Create a new file inside src/components/Home.js and put the following content.

Adding React Router

We need a way to navigate different routes for the user to sign in and sign out. In this section, we will add react-router library to our app for this purpose.

Connecting Node server and React

I wrote an article for Crowdbotics dealing how to connect a Node.js server with the React front end here. We do not need to review the whole process. Just open your package.json and add the following for our app to kickstart.

Front-End: Auth Components

Next, we will setup all the necessary components required for authentication.

Front-End: User Components

Similarly to our auth routes, we are going to separate our user components inside components/user/ folder. First, we need a React component to register a new user. Create a file called Signup.js.

Front-End: Completing the Navbar

In this section we are going to complete our client side routes by leveraging a Navbar component. Create a new file component/Navbar.js.

Running the Application

The next step is to import this navigation component inside Routes.js and define other necessary routes we need in our app. Open Routes.js and add the following.

Conclusion

We have reached the end. Even though this tutorial is lengthy and, a lot is going on, I am sure if you take your time, you will understand the concepts and the logic behind it. It is after all, a full-stack MERN application. It uses JSON Web Tokens as an authentication strategy.

You can find the complete source code for this tutorial below in a Github repository.👇

Building A Web Or Mobile App?

Crowdbotics is the fastest way to build, launch and scale an application.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aman Mittal

👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 2M+ views at Medium| My weekly dev newsletter 👉 https://www.getrevue.co/profile/amanhimself