Connecting Rails Auth to JS Frontend

This post will be following up my previous post on creating a rails backend which supports authorization. There isn’t a lot of code required for completing that task, so understanding what the constituent lines mean and what they accomplish is the crucial takeaway. A lot of the elements in JavaScript used to connect the front and back end should look fairly familiar, and to save on time explaining I will refrain from implementing any styling.

SETUP / HTML

To start out, we will need two files in a new directory, one of them being an index.html and another being a JavaScript file (the name is your choice). In the HTML file, we will want to display a title and a form with two inputs for the username and password along with a button to submit. Feel free to set this up for yourself before continuing, if not, here is what I got:

    <h1>Front End Auth</h1>
    <form class="login">
      <input 
        name="username"
        placeholder="Username"
        type="text"
      />
      <input 
        name="password"
        placeholder="******"
        type="text"
      />
      <button type="submit">Login</button>
    </form>

This will be the result:

We are going to leave the HTML at that, as simple as it is. I want to spend the most time addressing the JavaScript functions here.

JAVASCRIPT

First off, we will want to grab the form by the class name and assign to a variable. This looks as such:

const loginForm = document.querySelector('.login')

Now that we have the variable, we want an event listener on this with an action and function passed as arguments. This looks as such, and the function will be typed out and explained in the next step:

loginForm.addEventListener("submit", handleLogin)

Here we are at the final step, the “handleLogin” function. There are a handful of steps we will want to do for this one, in this order:

• Prevent the page from automatically refreshing when the button is clicked.
• Grab the information entered within the forms using FormData.
• Assign an object to a variable with the FormData information.
• Make a post request to the login route to our backend.
• Set the token into local storage.
• Reset the forms.

For those of you brave enough to try this on your own it is totally your call, if not, I will post the way through this below:

function handleLogin(event) {
  event.preventDefault()
  const loginFormData = new FormData(event.target)
  const username = loginFormData.get("username")
  const password = loginFormData.get("password")
  console.log(username, password)
  const loginBody = { username, password }
  fetch("http://localhost:3000/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(loginBody)
  }).then(response => response.json())
    .then(result => {
      console.log(result.token)
      localStorage.setItem("token", result.token)
    })
  event.target.reset()
}

All of this should look fairly familiar, it surely did to me minus the “localStorage” aspect. The setting of the token in this manner is basically just to ensure if a user closes the page that the token will remain on file when it is reopened!

After entering the username and password that I used in the prior article, you can now see in the “Network” tab of the developer tools showing the token and a successful request:

And the console showing the username, password and token:

Pat yourself on the back for connecting these two! Hope you enjoyed and thank you for dropping in :)