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 :)

--

--

--

Programmer / Artist / Believer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to publish React-Native Package on NPM.

Publish React-Native Package

Relaunching the React Native Radio podcast

Basic CMD Commands

Easy text management for the web 🖥️💡

Make ESLint do the Work — Adding Custom Rules

A screenshot from astexplorer.net, showing the part of the tree that represents the call to the asyncFunction in the code sample above

Building a Realtime Drawing App Using Socket.IO and p5.js

Design a Beautiful Profile Card With CSS

Payment Gateway with Vue JS

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
Lucas Thinnes

Lucas Thinnes

Programmer / Artist / Believer

More from Medium

How to install Sass on Linux — Ubuntu 18.04 / 20.04

#6 Building a JavaScript & HTML Browser RPG: Refactoring Movement

All HTML5 Tags with their descriptions/Uses and examples

Prototype vs Class Object-Oriented Programming

JavaScript object’s capability to association, aggregation and composition demonstration