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
- User fills out form
- Send request to API
- If the API returns successful, redirect to the “home” page
- If the API returns unsuccessful, throw an error
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.
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
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
- New route for
- New method in the UserController
- That method checks the password against the email’s password (using bcrypt) and returns the user object with a user token if successful.
- If unsuccessful throw an error
- When hitting the login button pass username and password to API
- If successful redirect to home page
- If not successful throw an toast error message
Authentication Is Done
What have we accomplished so far:
- We have a fully working environment
- The user can create an account
- 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!