MySpace From Scratch — Part 3: Authentication

Andy Hartnett
Mar 15 · 4 min read

In this post we are going to cover Account Creation and Logging In.

Here are the basics:
- Someone creates a user by filling out a form that contains their email, name, and password
- The user is stored in a User model in Mongo
- When logging in the API checks the email / password against the Mongo DB and if a user is found it is returned back to the client.
- For security reasons we need to hash the password before it’s stored.

Creating the Account Creation Form

On the client side of the application, we need create a login page. On the login page we include a link to the account creation page. So in Nuxt I’m creating a two new pages. One for login and one for account creation.

No one has ever accused me of being a designer, but here is what I have for the login and create account page. I just built simple layouts using tailwind.

Like I said, I’m not a designer but it’s simple and to the point. Let’s wrap up this front end work with some Vue to make this form actually function.

Create Account Process

  1. User fills out form
  2. Javascript validates that all of the fields are filled out
  3. Javascript checks that the password and the repeat password are the same
  4. Send request to API
  5. If the API returns successful, redirect to the “home” page
  6. If the API returns unsuccessful, throw an error

Front End

For validation I use a loop to with the keys of each field and make sure we have data for each.

Then an if statement to ensure the passwords are the same.

Use axios to make a post request to the API to create account.

Use toast to show success or failed message.
I had to npm install @nuxtjs/toast --save

The above handles parts 1–3. Here is my create account Nuxt code:

Now we need to create the API route

I created a new file /app/routes.js as a place to drop all of my routes for now. I updated my server.js file to include this file.

In my new routes file I moved the existing route into there and then added another one for the user creation route. I went ahead and created two new files: /app/controllers/UserController.js for handling requests for the User object. And /app/models/UserModel.js for handling the access to the database.

Then I add the a create() method to the UserController, which hashes the password with bcrypt and then uses the UserModel to create the user and return a response with that user. I then create the UserModel, which defines the schema and returns the mongoose model. I add a Schema.pre() function to make sure that the emails can’t duplicate.

I also generate a token so that we can use that to authenticate the user’s requests from the client side. For this I use jsonwebtoken

A lot to take in but here is the UserController:

And the User Model:

And we have our account creation done!

Logging the User In

This post is already getting a little long so I’m going to summarize what I did, and then just show you the code for the API and the front end template

API Side

  1. New route for /login
  2. New method in the UserController login()
  3. That method checks the password against the email’s password (using bcrypt) and returns the user object with a user token if successful.
  4. If unsuccessful throw an error

Client Side

  1. When hitting the login button pass username and password to API
  2. If successful redirect to home page
  3. If not successful throw an toast error message

Authentication Is Done

What have we accomplished so far:

  1. We have a fully working environment
  2. The user can create an account
  3. The user can login

Not the most exciting things, but we are now positioned to start building some fun stuff!

In the next post

We are going to start creating the MySpace profile page. Once the user is logged in, they will be able to add photos and select one of them to be their profile photo.

If there’s anything in particular that you’d like me to be sharing as I go through this, please let me know in the comments! Until next time, thanks for following along!

Previous Posts In This Series:
Part 1 — Introduction
Part 2 — Setting Up Environment
Part 4 — Photo Uploads

While you’re here consider following me on twitter!

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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