How I learned authentication in React

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…

Background

I discovered Cross-Origin Resource Sharing (CORS) last week when I tried to make a request to the Github Jobs API from the client-side and got this error message:

The error was replicated using google.com from my localhost:3000

What is it?

According to Mozilla(MDN): “Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.”

Meaning, if a webpage tries to make a request to another webpage…

Last week, I taught myself how to use Firebase Realtime Database. Being able to generate data realtime and have that data available to other users is a huge step up from storing data in local storage. This is probably where I should share that I’m on my 4th week of a Full Stack Developer Program at the UC Berkeley Extension school.

A little background about Firebase before we start: Firebase is a mobile and web development platform that was founded in 2011 and later acquired by Google. When you go to their website, you’ll notice 19+ products available to users…

Ana

Guatemala -> San Bernardino -> Wellesley -> SF | Software Engineering Student | Passionate about people, puns, and data.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store