How to Create A Simple Authorization Login Using Bcrypt, React, and Ajax.

As I was dabbling into creating a login feature for a chat messenger, I ran into an issue in implementing bcrypt in a react component. Googling provided very little answers as I found myself going in circles. There were no concrete examples in proper implementation so my goal is to provide a brief example of how authorization can be achieved using bcrypt, react, and ajax.

Login React Component Part 1
Login React Component Part 2

The information obtained in the input fields are captured using the ref property and then sent via ajax request which will send a request to the server.

Mongoose Schema Part 1
Mongoose Schema Part 2

Assuming that a new user has been properly created in the database, the /confirmUser route will trigger the middleware of chatCtrl.authenticate.

Encrypted Password

As a side note, a great way to figure out if bcrypt is working is to check your database collection and look for some form of encryption as shown above.

The final step is to find only the username. It is important to not include the password because what is being stored in the request is the not encrypted version of the password. Adding the password as part of the query will result in an error. If a username is found, bcrypt will essentially take care of the rest, otherwise an error will trigger.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.