Introduction
I began this post with the intent to write a definitive guide on using Passport-Local in React because the resources out there were sparse on that specific topic. React is a library that builds user interfaces while authentication happens between the browser and the server (and a database in our case). So, lack of resources is due to the topics not being directly related.
To understand the topic more deeply, I built my own Authentication method using cookies and bcrypt. I was confused on how the different elements of a MERN (MySQL, Express, React, NodeJS) application interacted with each other in the context of authentication. I addition to covering registration, login, hashing passwords, and using cookies, I review:
- How to make sure that CRUD takes into consideration the identity of the authenticated user so that they can only see, create, delete, update their own information.
- How to make sure that only authenticated users have access to certain pages.
Welcome to A Guide on Authentication!
Below is a summary of my authentication approach:
Summary of my authentication approach
In React, information can be shared across components using Global State and Context. Either can be a valuable tool for determining what the user sees; however, we will depend on good ole fashioned cookies for authenticating users.
Step by Step on Authenticating Users in MERN app
Before we dive in, let’s clarify some definitions! Registration is essentially a request to create a new user record. Login is a request to be given access. Access is verified by checking if the user exists in the database and if the password provided matches the password in the record.
Think of registration as being added to the list to an exclusive club and login as showing up and having to show your id to prove that you are you.
First, we need to build a few paths
Start by creating the routes that the user will interact with directly — I chose to create two pages, one for login and one for registration or signup. In the App.js folder, I created the routes and referenced the pages I wanted to render.
Creating login and register routes in React
On the server side, I created one route /api/user to handle registration and login.
API calls on Server side to actually login and register user
The two pieces above can all be created on a single server file or split out into multiple files as I have done so. The concepts are still the same.
Registering A New User
When a user registers, they fill out a form with information such as name, username/email and password. For our application, we will use email as the primary identifier for our users.
…but should the password be stored in some special way?
I’m glad you thought of that! Yes. One way to do that is to use bcrypt**, **a library that hashes passwords. In plain speak, bcrypt maps the password into something unrecognizable. In fact, I created over 20 users with the password “password” and none of the outputted text was similar in any recognizable way. So, server side, before actually creating the User record in your database, hash the password. That way, if anyone hacks your database, they won’t be able to get any actual password information.
User Registration shown at the database level
An async function is used with bcrypt to ensure that the password is hashed before the User record is created. After creation, the User Id will be tied to a session record. Since the method is similar for registering and logging in, I’ll explain later.
Logging in An Existing User
When a user signs in, they fill out a form with their username/email and password. The values are bundled in the API request.
Server side, we are first checking whether the user exists and then checking if the password is valid. Note that the comparison isn’t a triple equal — The truth is that we can’t match them directly but the bcrypt compare function can.
User login shows at the database level
Great, we’ve technically authenticated a user! Now, we need to make it _mean _something:
Using Cookies to Restrict Access
Restricting Access based on authenticated User information
#reactjs #react #programming
