How to make authentication for a Rail API application

When finishing the project for my phase 3 at Flatiron School, I found myself interested in the authentication part the most. By using Bcrypt gem, we can make authentication for our single page application built in Javascript. I created a Github repo of a Rails API with a basic HTML page for the frontend part and an MVC for just 1 table “user”. The repo is attached at the end of this blog, you can use it to code along.

Our page right now will look like below.

We will together to make authentication for our page. If someone signs up or logs in with correct information, they can see the secret message.

For now, my database just has one table named “users” with attributes “name”, “age”, “email” without any data. If you run “rails server” inside of directory “blog-auth-app/backend”, you will able to access this URL with no user yet.

So for the authentication, we will use Bcrypt gem. So go to the Gemfile and uncomment this line:

Then bundle install. For Bcrypt gem working, you need to have attribute for your table “users”. We will save the password hashes in a column in the database instead of the password itself.

So run in your terminal:

Then run “rails db:migrate” again. So now our schema will look like this:

In your user model, you also need “" method. It will add 2 fields in our model: and .

In “main.js” file, it was already created a method . But it lacks attribute and You will need to add 2 below lines to that method.

The variable above is the response that is passed down from our create action in the user controller. Our create method looks like below. If the user is created successfully, it will respond to an object with status and user information. That object is passed down to variable above.

Then if the new user cannot save, that means it doesn’t pass our validations or some other reasons. In Rails, we have the way to capture all the errors by running this:

You can see above, it will respond to an object with as the key and passed it to our js file. Then now will be an array of all errors, we can print it out for users to see. Right now, I already put the validations that require the presence of age and email. If I leave that two boxes empty string and click submit, it will notify the errors like this.

Interesting, right? Now we know the way we can capture the errors on the backend and make them appear on the frontend part. Feel free to add more validations for users.

For the login part, the function in file is almost the same (you can uncomment the code below create part), except the URL. You’ll need to add a new route for your file. You can name whatever you want for URL link, just make it the same in file and file.

When someone posts information (POST REQUEST) to this URL , it will execute the action in users controller. That’s why we need to create the action.

Our action in users controller looks the same as action above but it adds the method to check user password. We can use the method thanks to . If it is true, we will pass the object {status: 200, user: user} to our frontend. Otherwise, it renders the object that contained the key: "Wrong email or password".

Finally, this is the secret message that will appear when you sign up or log in successfully.

Github repo. Feel free to clone and code along with this blog.

Happy Coding!

Full Stack Developer Connect with me here: https://www.linkedin.com/in/chi-nguyen-swe/

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