User Authentication with JWT — JSON Web Tokens

Image from pch.vector

Ruby on Rails Backend / Server

In regards to the backend, I am going to follow the same steps as last weeks article and past my three backend controllers quickly here so that we can focus on the frontend components and attribute the code much to Reinald Reynoso’s great blog that started me down this path.

Application Controller
Auth Controller
User Controller

React.js Frontend / Client

Since we have already done the SignUp component, lets jump right in to the SignIn component. All of our components will be functional components so that we can not only get more experience with React Hooks, but also can learn Redux Hooks for state.

THE SIGNIN COMPONENT

Your Sign In form can take in as many fields as you’d like; you’ll just need to update you <input> fields accordingly. Although my Sign Up form asked for more information, my Sign In form only asks for input of two fields and then validates them on the backend in our Auth Controllers ‘login” method: authenticating that the email matches against the password.

ACTIONS CONSTANTS FILE

Before we go any further, I’d like to stop and make a quick code refactoring. In last weeks blog post, I had originally designed it so that my exported action constants (ex: export const POST_USER = “POST_USER) were directly in my action components. Because we are going to keep making more of these constants, I think it would be a great idea to start their own file, so we only have to import them one time in our reducer from one file and we can even refactor one of our constants so that other action files can use them, if necessary(like POST_USER). Because the first action in all of our action functions (again, in the signup user case this was called POST_USER) is to simply let the reducer know that we are loading the information and to set the value of isLoading to true, we can change the name of that function to something else, and use it in the remaining action files we build, making our reducer a bit more DRY. This file will look like this and, so far, contain our Sign Up and Sign In constants and our renamed LOADING_USER, which will get used in all 3 action files we build in total:

THE SIGN IN ACTION FILE

signInUser action file

THE REDUCER

We will use the same exact reducer for all of our actions, so let’s update our imports, update the one constant we changed and add our next 3 cases:

AUTO-LOGGING IN A USER

Both our User Sign Up and Sign In functionality that we have built so far, will automatically ‘log’ us in and send us to the component that we specify, but what happens if we have a page refresh, etc, and oh, no! we have lost our user…the user data and login info didn’t persist, so our program has completely forgotten that we had a logged in user. We don’t want our user to have to login again, super inconvenient and no one wants that kind of experience on a site.

THE GET USER ACTION FILE

Our getUser.js action file will now be built like this: Please note that although this is a GET request to the ‘auto_login’ method in our Auth Controller, we are sending along a header of : Authorization: `Bearer ${token}`

THE UPDATED REDUCER

Here is our newly update reducer with the 3 new action constants that we used in our getUser action:

Software Engineer. A new addict of ReactJS & Javascript, CSS & APIs, with a little dabbling in Ruby, Ruby On Rails…