Some Shall Pass

In our bootcamp we have just learned how to authenticate users and save their sessions on our Rails backend. Here, I will present a brief tutorial on how to do that and then how one might utilize that saved session on a React frontend to persist a login through page refreshes and to limit access to certain pages depending on whether someone is logged in or who they are.

First, we’ll give a quick overview of creating and saving a session on the backend. To do this, we’ll need to create a SessionsController that will handle creating and destroying our sessions. Our create action might look something like this:

This will trigger once a user attempts to log in using their credentials. I am using the bcrypt gem to handle the password hashing and authentication. For this to work the has_secure_password macro must be called on the User model.

We also need to be able to destroy our sessions when our users log out; that action might look something like this:

Now our users have the ability to login/out (creating/destroying sessions) by doing something in the frontend. We can use the returned data (either a user or an empty object) in our frontend to keep track of who our user currently is. We might do that by setting state to that user’s information (or to a not-logged-in state) upon login or logout. This would work fine for us except for when a user refreshes the page, in which case state is lost and we lose that valuable information on the front end. What we can do is add a useEffect to our frontend (most likely in a top or near-top level component) that will automatically ask our backend to send back information on our saved session, if there is any. The useEffect might look something like this:

Back in our backend, we need to build an action that corresponds to that route. Since this action is really just looking for the user currently logged in, it makes sense to put this action in our UsersController:

Now, if a user refreshes the page, our frontend will automatically request the session information from the backend and will remember who it is that’s logged in! Next, we’ll exhibit how to use this persisted data to dictate where in our frontend our user is allowed.

Using React Router, our top level component might be organized like this:

We might want only certain pages to be accessible to users who are logged in, and perhaps other pages to only be accessible to certain users (such as administrators). To do this, we can use React Router’s Redirect component in combination with a ternary operator, like so:

Here, loggedIn and isAdmin are just stand-ins, they could be booleans kept in state and set at the time of login, or you could just dig into the user object to determine logged-in or administrative status, depending on how your data is structured.

If the user is logged in or has the correct authorization, the Route will cause the appropriate component to render. If this is not the case, however, the Route will render a Redirect component, which automatically redirects (imagine that) the user to the indicated url. The only way a user can access a gated component is by logging in with the proper credentials!