How to Build a Node.js User Management App

Cosmic Blog
Cosmic Blog How to Build a Node.js User Management App
by Tony Spiro on November 22, 2016

Managing your users in a Node.js app is easiest when you use a Headless CMS like Cosmic

In this tutorial I’m going to show you how to build a user management app using Node.js and Cosmic as a Node.js CMS.

TL;DR

View the full source code on GitHub
View the Demo
Why Use Cosmic as Your Node.js CMS?

The app will include the following pages:

  • Login
  • Signup
  • Users list (logged in user access only)

Getting Started

Create a file titled app-server.js file and add the following:

This is the entry point of our app and serves to initialize everything we need for our user management app.  We’re using Express for the Node.js framework, Hogan Express for view rendering from Mustache templates.  Express Session is used to initialize and save sessions.

We are going to have a couple partials available in our templates, header and footer as all of our pages will share these.

Know Your Routes

Next let’s take a look at index.js in our routes folder.

Here we have all of our routes.

Logging In

Let’s take a look at home.js which is the login page for our app:

There is not much going on here, just loading our dynamic content from Cosmic, as well as the HTML login form.

Looking at the auth.js file, you’ll see this is where the login form will send the data to log the user in.

When the data is sent to /auth the Cosmic NPM module searches for the email first then, if found tries to match the submitted password to the password saved in the Cosmic API (using bcrypt). If both email and password are matched with a user, the session is created and the user is redirected from the login page to the users page.  Let’s take a look at the users list page.

Access Exclusive Content

After the user has logged in successfully, they are redirected to the users list page.  This is how it looks:

If the user session is not set, they are immediately redirected to the login page with an unauthorized message. If they have a user session, they will be able to see a list of all registered users (from the Users Object Type). This gives you the idea of how to limit user access in our app. By checking for req.session.user on any page, you can restrict access to logged in users only.

Signing Up

Let’s take a look at what happens for new users when they post their info to /users:

There’s a few things happening here. First, the email is checked against the current list of users.  If a match is not found, the user object is created with each data point of the user: First Name, Last Name, Email and Password stored as metafields in the Cosmic API.

Taking this a step further, after you log into your Cosmic bucket and go to your Users Object Type you will be able to add more Metafields to the users in your system.  This makes adding dynamic, extended data very easy.  For example, let’s say you needed to add a profile image, address, GitHub username, etc.  All of these can be added as Metafields to the User Object.  See screenshot below:


See Ya Next Time

Now let’s see what happens when a user accesses the /logout route:

The session is simply destroyed and the user is redirected back to the login page.

Where's the HTML?

I'm not going to go into too much detail on the HTML, but basically both login and signup forms have JQuery validation and submit AJAX requests to the route endpoints.  Check out the main.js file on GitHub to see how JQuery is used for this and other UI and UX things.

Conclusion

And that’s it.  Cosmic is a powerful platform for content creation and app data management.  With your Cosmic-powered User Management App you can now extend your user data using the Cosmic API or from your Cosmic Bucket Dashboard.

 I hope you found this tutorial helpful.   If you have any questions or feedback you can reach out to us on Twitter or chat with us in the Slack community.

You may also like


In this installment of the Cosmic Developer Spotlight Series, we sat down with Jacob Knaack, a Web Developer and Technical Communicator residing in Seattle, Washington. Jacob is a Front End Developer at restack, a development studio that finely crafts websites and apps. Jacob is also a frequent contributor to the Cosmic Community, having recently built both the Progressive Apollo Blog as well as the Gatsby Documentation Website. Follow Jacob on LinkedIn and GitHub and enjoy the conversation.

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jamie Introcaso, an experienced Software Developer residing in Charlotte, North Carolina. Jamie is an active member of the Cosmic Community and recently wrote a blog detailing his migration from WordPress to Cosmic. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Follow Jamie on his Cosmic-powered website, Twitter and LinkedIn and enjoy the conversation.

In this installment of the Cosmic Developer Spotlight Series, we sat down with Ali Spittel, a Software Engineer and Developer Advocate residing in Washington, DC. Ali was most recently Lead Instructor at General Assembly prior to scaling back her course schedule to accept a position as Software Engineer and Dev Advocate at DEV Community. When she's not busy teaching or leading the front-end charge at DEV Community, she's directing the DC Chapter of WomenWhoCode. Follow Ali on Twitter or her DEV Community profile and enjoy the Q/A.

In this installment of the Cosmic Developer Spotlight Series, we sat down with Raymond Camden, a Senior Software Engineer and Developer Advocate residing in Lafayette, Louisiana. Raymond has extensive experience in the technology space, having enjoyed stints at IBM, Adobe and AuthO prior to becoming a Senior Engineer for Developer Experience at American Express. Follow Raymond on Twitter, GitHub or LinkedIn, and enjoy the Q/A.

In this installment of the Cosmic Developer Spotlight Series, we sat down with Rick Hanlon, a Front End Engineer  and recent New Yorker that is now residing in London, England working on the front end team at Facebook. Rick is also on the core team of Jest, a JavaScript testing platform. Follow Rick on Twitter or LinkedIn and enjoy the Q/A.

Looking to shortlist some headless content management systems? Our comprehensive list will help you narrow down the growing headless CMS landscape.

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales