Oh boy, did we learn a lot these past few weeks. Man, we really fell down the rabbit hole of security this time 'round, huh? With Gatsby being a static site we don't normally have to worry too much about security and vulnerabilities within our site. But this week's challenge has changed all that.
By creating gated content using private routes we've exposed vectors which are vulnerable. And I'm going to be honest, authentication is complicated but with Gatsby and Auth0 it doesn't have to be.
Well, for one, if authentication was easy it'd be easy to break. But admittedly that's a very simplistic oversimplification of the complexities of the authentication process.
An article from HackerNoon which was linked in Gatsby's simple-auth repo, goes into detail of how getting it wrong can prove disasterous. The article specifically scrutinises online tutorials using Passport with Express.js for authentication, where the developer would set up means of "API token mechanisms, password reset token mechanisms, user authentication routes and endpoints, and views".
The flaws highlighted by the article's author, micaksica, provide a few reasons as to why security should be handled by someone who specialises in... well... security.
Don't get me wrong, I'm not stopping you from rolling out your own authentication measures. Not at all. There's valuable learning to be gained from doing so. But please do your due dilligence and don't fall under the illusion that your system is entirely secure especially if your system is for a professional setting.
Shall we cut to the chase where I state which methods I used? Yes? Ok... well to start off I followed the tutorial on Gatsby – Authentication Tutorial – with a blank project. Even though the tutorial is quite easy to follow along to, I was super delighted when I sussed everything out and I could log in with the highly secure hardcoded username and password (john, pass). Impenetrable.
Afterwards, came the integration of Auth0. After signing up for a free account, I navigated towards their React quick start guide which after having watched the livestream presented by Dustin Schau: anything you can do in React, you can do in Gatsby.
Let's just say the quick start guide didn't really agree with me for some reason, and I couldn't get my intial john-pass project to connect.
After many trials of google and error, I came across an article/guide by Dan Arias. Man, this guy knows how to write. I'd highly recommend following this guide, if for some reason, like me, you need extra guidance and instructions.
He also goes into setting up a local API server which is protected with Auth0. I was too intrigued to pass on this so I followed through and cloned his auth0-express project. And with a few minor adjustments to the .env file and enabling it within my Auth0 console, I managed to get it all working without too much of a sweat.
I think for now I'm not going to integrate authentication into my blog project as I don't see the need to add the extra bloat. Like what am I going to add that requires authentication?
If I think of a valid reason to add gated content I now know how. But for now I'm going to store this knowledge in my toolkit and develop on it further.
Comments
Add comment