Setting up the React Frontend

Now it's time to set up the frontend of my password manager. If this is the first of my posts on this you are seeing, cool. There are a few others previously that go over how I set up my backend api with Ruby on Rails here and here.

1. When I originally ran npm install -g create-react-app I came into an error that I needed to update my npm. That's as easy as npm install -g npm.

2. Once that is done I will be able to run the npm install and then create-react-app <project-name> in the folder I wanted to kick things off in.

   • Note: the project name needs to be alllllll lower case.
   • This will create a pretty blank set up and you will need to add in any thing you need to speak to the back end. For my project that meant that I needed to set up Components and Containers in an src folder and make sure that the front end was speaking to the back end.

3. Within the cmd in the backend's folder run rails server. This will give you access to your localhost-ing in the browser at "http://localhost:3000/" and a connection point for the frontend. In a seperate tab in the cmd you can npm start the front to connect to the backend. This is when you set up the main fetch to the backend api to interact with it.

   • For me this meant that within my "App.js" Component I set up the imports I would need and the variables for my localhost.

4. For my project I needed to set up a "pay wall" for the login. This required setting up a fetch for the user to login. As I already had a few users in my seed I needed to make sure that when I set up a fetch to a backend that the proper authorization was used and that a JWT would be set in the browser for that user. As you can see I was able to setState for a unique token for that user and the user data.

5. There also needs to be information on the page to check in the user that was fetched. This needs to be done at the highest level, for me the App.js file.

6. Now that this is attempted I need to set up my serializers to nest the users saved credentials nicely. This took a lot of effort as the serializer I was using as part of the Ruby backend was not being updated anymore and documentation was difficult. After a 2 days and 3 coaches help I was able to get it working. See part 15 in my other post on my password manger

7. Now that I have the users data I need to do something with it. From here on out it is a lot of style things. For me I enumerated over the users saved credentials and displayed them in an ordered list and in React I needed to pass my users state down to the component I was going to be using it in. Once there I was able to enumerate over the list to display it.

   • This passing gets kind of complicated for me as I should have had state in a Store BUT I was just learning about keeping state in a Store and didn't feel comfortable relying on something I wasn't sure how to use, so sessionState it is.

8. Now that we have the data we need to encrypt it before it goes to the back end. This involved using a gem called "cryptr". Cryptr is an AES-256-gcm encrypt/decrypt module for node.js that will be used for my secure storage of information. This will need to be installed and run before information is sent to the backend database. For my project I initially made this part of the frontend where I decrypt the data and then to encrypt what is sent to the backend I did as the following image shows.

   • Note: since creating this project I discovered that this process is not 100% accurate and there needs to be more done to this to ensure that users cannot mess with the transmission of the credentials before the backend received the date. A big part of this will be using HTTPS but also ensuring that the backend and front end clean any prontentually malicious data that might being attempted to be stored in the database.
   • Note that a token was needed for authorization when information is sent to the backend. Without this token there will be an error BUT this token can currently be bypassed if the token is known.

9. Now that the lists are displayed I need to make it so that a user can update an account list grouping as well as add and delete items in an account list grouping. This becomes part of the separate update and delete fetch calls that a button will activate. You'll note that the fetch for these also require a token for authorization.

10. Now that I can update and delete accounts I need to be able to filter the main Account grouping name to make it easier to find a specific login credential. I did this by re-displaying the list based on the filter specification

It's time to make it pretty, or as pretty as a password manager should be. For me I went with simple and clean and then worked on some other features of it from here on.

This is the end of this series. Thanks for reading. I hope it was helpful to someone and if not, it was helpful to me to write.
Time to work on making it better as I learn more about application security and test it.

References

1. https://www.npmjs.com/package/cryptr

Please Note that I am still learning and if something that I have stated is incorrect please let me know. I would love to learn more about what I may not understand fully.